浏览代码

Skatepark: Add columns in container block pattern (#4449)

* Skatepark: Add columns in container pattern

* Skatepark: Fix indentation in block pattern

* Skatepark: Add inherit layout to columns in container

* Skatepark: Change pattern spacing to percentages

* Skatepark: Wrap alt text in esc_html__()

* Skatepark: Shrink internal margins in columns in container pattern

* Skatepark: Match vertical spacers to other patterns

* Skatepark: Increase container top padding

* Skatepark: Make padding consistent for pattern container

* Skatepark: Update css comment

* Skatepark: Override spacing for paragraphs & headings

* Skatepark: Reduce paragraph top & bottom margin

* Skatepark: Remove columns in container scss file

* Skatepark: Add spacers for spacing in container pattern
Sarah Norris 3 年之前
父节点
当前提交
5f09f9c404

+ 5 - 0
skatepark/assets/theme.css

@@ -43,6 +43,11 @@
 	color: var(--wp--preset--color--background);
 }
 
+p {
+	margin-top: calc( 0.5 * var(--wp--custom--margin--vertical));
+	margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical));
+}
+
 .wp-block-post-author__content {
 	display: flex;
 	flex-direction: column;

+ 1 - 0
skatepark/inc/block-patterns.php

@@ -26,6 +26,7 @@ if ( ! function_exists( 'skatepark_register_block_patterns' ) ) :
 				'testimonial',
 				'two-columns-of-text',
 				'paragraph-with-quote',
+				'columns-in-container',
 			);
 
 			foreach ( $block_patterns as $block_pattern ) {

+ 54 - 0
skatepark/inc/patterns/columns-in-container.php

@@ -0,0 +1,54 @@
+<?php
+/**
+ * Columns in container.
+ *
+ * @package Skatepark
+ */
+
+return array(
+	'title'      => __( 'Columns 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":{"width":"3px","style":"solid"},"spacing":{"padding":{"top":"4%","right":"4%","bottom":"4%","left":"4%"}}},"borderColor":"primary","className":"columns-in-container","layout":{"inherit":true}} -->
+	<div class="wp-block-group alignwide columns-in-container has-border-color has-primary-border-color" style="border-style:solid;border-width:3px;padding-top:4%;padding-right:4%;padding-bottom:4%;padding-left:4%"><!-- wp:columns {"align":"wide"} -->
+	<div class="wp-block-columns alignwide"><!-- wp:column -->
+	<div class="wp-block-column"><!-- wp:heading {"level":4} -->
+	<h4>' . esc_html__( 'Learn to skate', 'skatepark' ) . '</h4>
+	<!-- /wp:heading -->
+
+	<!-- wp:paragraph {"className":"is-style-indented-paragraph"} -->
+	<p class="is-style-indented-paragraph">' . esc_html__( 'Skatepark welcomes youth of all ages and experience levels. Whether you’ve never been on a board before, or you can already do tricks, there’s a place for you and something to learn.', 'skatepark' ) . '</p>
+	<!-- /wp:paragraph --></div>
+	<!-- /wp:column -->
+
+	<!-- wp:column -->
+	<div class="wp-block-column"><!-- wp:heading {"level":4} -->
+	<h4>' . esc_html__( 'Make new friends', 'skatepark' ) . '</h4>
+	<!-- /wp:heading -->
+
+	<!-- wp:paragraph {"className":"is-style-indented-paragraph"} -->
+	<p class="is-style-indented-paragraph">' . 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:spacer {"height":40} -->
+	<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+
+	<!-- wp:image {"align":"wide","id":26,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":["#000","#B9FB9C"]}}} -->
+	<figure class="wp-block-image alignwide size-large"><img src="https://skateparkdemo.files.wordpress.com/2021/08/693372530767c766f2db45bbfb132770-2048x1365-1.jpeg?w=1024" alt="' . esc_html__( 'Close-up of a person riding a skateboard, focusing on their feet and the board. One foot is on the board, while the other foot is up, in motion. A skatepark is blurred in the background.', 'skatepark' ) . '" class="wp-image-26"/></figure>
+	<!-- /wp:image -->
+
+	<!-- wp:spacer {"height":5} -->
+	<div style="height:5px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+
+	<!-- 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.', 'skatepark' ) . '</p>
+	<!-- /wp:paragraph --></div>
+	<!-- /wp:group -->',
+);

+ 5 - 0
skatepark/sass/base/_text.scss

@@ -2,3 +2,8 @@
 ::selection {
 	color: var(--wp--preset--color--background);
 }
+
+p {
+	margin-top: calc( 0.5 * var(--wp--custom--margin--vertical) );
+	margin-bottom: calc( 0.5 * var(--wp--custom--margin--vertical) );
+}