Skatepark: add text list with button block pattern (#4390)

* Add text list with button pattern.

* Use columns instead of a group.

* Update to percentage units instead of vw.

skatepark/assets/theme.css

@@ -177,6 +177,13 @@
 	--wp--custom--button--spacing--padding--bottom: 0.5em;
 }
 
+h1.is-style-skatepark-heading-border, h2.is-style-skatepark-heading-border, h3.is-style-skatepark-heading-border, h4.is-style-skatepark-heading-border, h5.is-style-skatepark-heading-border, h6.is-style-skatepark-heading-border {
+	display: inline-block;
+	border-top: 2px solid var(--wp--custom--color--primary);
+	margin-bottom: 0;
+	padding-top: 1em;
+}
+
 a {
 	text-decoration-thickness: 0.07em;
 	text-underline-offset: 0.46ex;

skatepark/functions.php

@@ -42,6 +42,11 @@ function skatepark_scripts() {
 }
 add_action( 'wp_enqueue_scripts', 'skatepark_scripts' );
 
+/**
+ * Block Styles.
+ */
+require get_stylesheet_directory() . '/inc/block-styles.php';
+
 /**
  * Block Patterns.
  */

skatepark/inc/block-patterns.php

@@ -19,6 +19,7 @@ if ( ! function_exists( 'skatepark_register_block_patterns' ) ) :
 		if ( function_exists( 'register_block_pattern' ) ) {
 			$block_patterns = array(
 				'pre-footer',
+				'text-list-with-button'
 			);
 
 			foreach ( $block_patterns as $block_pattern ) {

skatepark/inc/block-styles.php

@@ -0,0 +1,30 @@
+<?php
+/**
+ * Skatepark Theme: Block Styles
+ *
+ * @package Skatepark
+ * @since 1.0.0
+ */
+
+if ( ! function_exists( 'skatepark_register_block_styles' ) ) :
+
+	function skatepark_register_block_styles() {
+
+		if ( function_exists( 'register_block_style' ) ) {
+
+			/**
+			 * Register block styles
+			 */
+			register_block_style(
+				'core/heading',
+				array(
+					'name'         => 'skatepark-heading-border',
+					'label'        => __( 'Top Border', 'skatepark' ),
+					'style_handle' => 'skatepark-heading-border',
+				)
+			);
+		}
+	}
+endif;
+
+add_action( 'after_setup_theme', 'skatepark_register_block_styles' );

skatepark/inc/patterns/text-list-with-button.php

@@ -0,0 +1,30 @@
+<?php
+/**
+ * Text list with Button.
+ *
+ * @package Skatepark
+ * @since 1.0.0
+ * 
+ */
+
+return array(
+	'title'      => __( 'Text List with Button', 'skatepark' ),
+	'categories' => array( 'skatepark' ),
+	'content'    => '<!-- wp:columns {"align":"wide"} -->
+		<div class="wp-block-columns alignwide"><!-- wp:column {"width":"75%"} -->
+		<div class="wp-block-column" style="flex-basis:75%"><!-- wp:heading {"level":4,"className":"is-style-skatepark-heading-border"} -->
+		<h4 class="is-style-skatepark-heading-border">' . esc_html__( 'Visiting Coaches', 'skatepark' ) . '</h4>
+		<!-- /wp:heading -->
+		<!-- wp:heading --><h2>' . esc_html__( 'Rodney Mullen. Paul Rodriguez. Bucky Lasek. Bob Burnquist. Tony Hawk. Ryan Sheckler. Eric Koston. Bam Margera. Chris Cole. Andrew Reynolds.', 'skatepark' ) . '</h2>
+		<!-- /wp:heading -->
+		<!-- wp:buttons -->
+		<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
+		<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">' . esc_html__( 'See All Faculty', 'skatepark' ) . '</a></div>
+		<!-- /wp:button --></div>
+		<!-- /wp:buttons --></div>
+		<!-- /wp:column -->
+		<!-- wp:column {"width":"25%"} -->
+		<div class="wp-block-column" style="flex-basis:25%"></div>
+		<!-- /wp:column --></div>
+		<!-- /wp:columns -->'
+);

skatepark/sass/elements/_headings.scss

@@ -0,0 +1,8 @@
+h1, h2, h3, h4, h5, h6 {
+	&.is-style-skatepark-heading-border{
+		display: inline-block;
+		border-top: 2px solid var(--wp--custom--color--primary);
+		margin-bottom: 0;
+		padding-top: 1em;
+	}
+}

skatepark/sass/theme.scss

@@ -4,5 +4,6 @@
 @import "blocks/buttons";
 @import "blocks/search";
 @import "block-patterns/pre-footer";
+@import "elements/headings";
 @import "elements/links";
 @import "templates/header";