Skip to content
This repository has been archived by the owner on Feb 17, 2025. It is now read-only.

Skatepark: add mixed media in container pattern #4403

Merged
merged 4 commits into from
Aug 23, 2021
Merged

Skatepark: add mixed media in container pattern #4403

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bf92afd
Add basic mixed media pattern.
jffng Aug 12, 2021
085edb4
Add and refine mixed media in container pattern.
jffng Aug 16, 2021
70fffeb
Increase padding.
jffng Aug 23, 2021
fa518fd
Compress image.
jffng Aug 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added skatepark/assets/images/skateboard-sideways.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions skatepark/assets/theme.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions skatepark/inc/block-patterns.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ function skatepark_register_block_patterns() {

if ( function_exists( 'register_block_pattern' ) ) {
$block_patterns = array(
'mixed-media-in-container',
'pre-footer',
'text-list-with-button',
'full-width-image-with-aside-caption',
Expand Down
90 changes: 90 additions & 0 deletions skatepark/inc/patterns/mixed-media-in-container.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<?php
/**
* Pre Footer.
*
* @package Skatepark
*/

return array(
'title' => __( 'Mixed Media in Container', 'skatepark' ),
'categories' => array( 'skatepark' ),
'content' => '<!-- wp:spacer {"height":40} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"align":"wide","style":{"border":{"style":"solid"},"spacing":{"padding":{"top":"3%","right":"4%","bottom":"4%","left":"4%"}}},"className":"skatepark-mixed-media-in-container"} -->
<div class="wp-block-group alignwide skatepark-mixed-media-in-container" style="border-style:solid;padding-top:3%;padding-right:4%;padding-bottom:4%;padding-left:4%"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:heading {"level":3} -->
<h3>' . esc_html__( 'Why Camp?', 'skatepark' ) . '</h3>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:paragraph {"className":"is-style-indented-paragraph"} -->
<p class="is-style-indented-paragraph">' . esc_html__( 'Skateboarding can teach people discipline, patience, and resiliency. It’s a great sport for kids with a lot of energy! We’ll help build up some structure and support in your life, all while you meet new people and have a ton of fun learning how to skateboard. Just think of all the cool tricks you’ll learn!', 'skatepark' ) . '</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":40} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:image {"sizeSlug":"large","style":{"color":{"duotone":["#000","#BFF5A5"]}}} -->
<figure class="wp-block-image size-large"><img src="' . get_stylesheet_directory_uri() . '/assets/images/skateboard-sideways.jpg" " alt="' . esc_attr__( 'A skateboard laying on its side on top of concrete.', 'skatepark' ) . '"/></figure>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably compress this.

<!-- /wp:image -->

<!-- wp:spacer {"height":40} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4} -->
<h4>' . esc_html__( 'Discipline', 'skatepark' ) . '</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>' . esc_html__( 'Skateboarding can teach people discipline, patience, and resiliency. It’s a great sport for kids with a lot of energy! We’ll help build up some structure and support in your life, and you’ll have fun.', 'skatepark' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4} -->
<h4>' . esc_html( 'Friendship', 'skatepark' ) . '</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>' . esc_html( 'Skateboarding is a social sport! Come hang out and meet some new friends to cheer you on while you skate. We have a strict no-bullying policy and maintain a supportive environment.', 'skatepark' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:separator {"color":"primary","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-background has-primary-background-color has-primary-color is-style-wide"/>
<!-- /wp:separator --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4} -->
<h4>' . esc_html( 'Mentoring', 'skatepark' ) . '</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>' . esc_html( 'Work 1:1 with our team of coaches to learn how to skate. They’ll be your mentors and guides while you’re at camp. Plus, many of our older campers will mentor the younger skaters.', 'skatepark' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->',
);
7 changes: 7 additions & 0 deletions skatepark/readme.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,10 @@ This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

Skatepark uses the following images:

License: CC0
https://stocksnap.io/photo/skateboard-sideways-USRYO9E14Y by Messala Ciulla (https://stocksnap.io/author/messala)

Used in block patterns.
6 changes: 6 additions & 0 deletions skatepark/sass/block-patterns/_mixed-media-in-container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.skatepark-mixed-media-in-container {
hr, p, h1, h2, h3, h4, h5, h6 { // Shrink default vertical margins for all the elements in this pattern
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not crazy about this but not sure of a better way to reduce and standardize the margins between headings, paragraphs, and separators for this pattern.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't think of another way to target these elements... I think this is fine, especially as it's specific to this pattern.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

makes sense to me that we do it this way, since we are adding the margin globally from the theme css, it's not really the editor that's failing us here. In the end this is just an exception, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah they are exceptions. But if we reduce the vertical margins, I don't think these exceptions will be needed.

margin-top: 20px;
margin-bottom: 20px;
}
}
1 change: 1 addition & 0 deletions skatepark/sass/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
@import "block-styles/indented-paragraph";
@import "block-styles/side-quote";
@import "block-styles/testimonial-quote";
@import "block-patterns/mixed-media-in-container";
@import "block-patterns/pre-footer";
@import "block-patterns/paragraph-with-quote";
@import "elements/headings";
Expand Down