Sk8prk: block based boilerplate

sk8prk/assets/alignments-front.css

@@ -0,0 +1,79 @@
+/*
+ * Alignments, loaded in the front-end only.
+ */
+
+body {
+	margin: 0;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+.wp-site-blocks,
+.wp-block-template-part.alignfull {
+	padding: 0 var(--wp--custom--margin--horizontal);
+}
+
+.wp-site-blocks > *:not(.wp-block-post-content),
+.wp-site-blocks .wp-block-post-content > * {
+	max-width: var(--wp--custom--width--default);
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.wp-site-blocks .alignwide {
+	width: var(--wp--custom--width--wide);
+	max-width: 100%;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.wp-site-blocks .alignfull {
+	transform: translateX(calc(0px - var(--wp--custom--margin-horizontal)));
+	width: calc(100% + (2 * var(--wp--custom--margin-horizontal)));
+	max-width: calc(100% + (2 * var(--wp--custom--margin-horizontal)));
+	margin-left: 0;
+	margin-right: 0;
+	box-sizing: content-box;
+}
+
+.wp-site-blocks .wp-block-template-part.alignfull {
+	width: 100%;
+	max-width: 100%;
+}
+
+.wp-site-blocks .wp-block-columns.alignfull {
+	width: 100%;
+	max-width: 100%;
+}
+
+.aligncenter {
+	text-align: center;
+}
+
+.wp-site-blocks .alignleft {
+	float: left;
+	margin-right: 2em;
+	max-width: 360px;
+}
+
+.wp-site-blocks .alignright {
+	float: right;
+	margin-left: 2em;
+	max-width: 360px;
+}
+
+@media screen and (min-width: 1290px) {
+
+	.wp-site-blocks,
+	.wp-block-template-part.alignfull {
+		padding: 0;
+	}
+
+	.wp-site-blocks .alignfull {
+		transform: translateX(0px);
+		width: 100% + var(--wp--custom--margin-horizontal);
+		max-width: calc(100% + var(--wp--custom--margin-horizontal));
+	}
+}

sk8prk/assets/block-styles.css

@@ -0,0 +1,16 @@
+.wp-block-separator.is-style-thick-separator:not(.is-style-wide):not(.is-style-dots) {
+	opacity: 1;
+	height: 3px;
+	border-bottom-width: 3px;
+	max-width: 100%;
+	color: var(--wp--custom--color--secondary);
+}
+
+.is-style-filter-effect,
+.is-style-filter-effect figure{
+	background-color: var(--wp--custom--color--primary);
+}
+
+.is-style-filter-effect img {
+	mix-blend-mode: luminosity;
+}

sk8prk/block-patterns.php

@@ -0,0 +1,226 @@
+<?php 
+if ( ! function_exists( 'sk8prk_register_block_patterns' ) ) :
+	/**
+	 * Sets up support for block patterns 
+	 */
+	function sk8prk_register_block_patterns() {
+		/**
+		 * Register Block Pattern Category.
+		 */
+		if ( function_exists( 'register_block_pattern_category' ) ) {
+
+			register_block_pattern_category(
+				'sk8prk',
+				array( 'label' => __( 'Sk8prk', 'sk8prk' ) )
+			);
+		}
+
+		/**
+		 * Register Block Patterns.
+		 */
+		if ( function_exists( 'register_block_pattern' ) ) {
+
+			register_block_pattern(
+				'sk8prk/blog-post-pattern-1',
+				array(
+					'title'      => __( 'Left column image', 'sk8prk' ),
+					'categories' => array( 'sk8prk' ),
+					'content'    => '<!-- wp:columns -->
+					<div class="wp-block-columns"><!-- wp:column {"width":"25%"} -->
+					<div class="wp-block-column" style="flex-basis:25%"><!-- wp:separator {"className":"is-style-thick-separator"} -->
+					<hr class="wp-block-separator is-style-thick-separator"/>
+					<!-- /wp:separator -->
+
+					<!-- wp:image {"id":149,"sizeSlug":"large","linkDestination":"none","className":"is-style-filter-effect"} -->
+					<figure class="wp-block-image size-large is-style-filter-effect"><img src="http://sk8rprk.local/wp-content/uploads/2020/11/83aed971345021f0f3c8fd41a2906d4e-819x1024.jpg" alt="" class="wp-image-149"/><figcaption>Learn the basics of skating along with a group of your peers.</figcaption></figure>
+					<!-- /wp:image --></div>
+					<!-- /wp:column -->
+
+					<!-- wp:column {"width":"50%"} -->
+					<div class="wp-block-column" style="flex-basis:50%"><!-- wp:heading {"level":4} -->
+					<h4>A HEADING</h4>
+					<!-- /wp:heading -->
+
+					<!-- wp:paragraph -->
+					<p>Skate ipsum dolor sit amet, poseur nollie casper pop shove-it. Kickturn noseblunt slide tailslide lien air Bonite. Rocket air poseur snake shoveit Chico Brenes. Crooked grind locals casper slide bank. Disaster frigid air bail aerial. Hang ten smith grind tailslide sick.</p>
+					<!-- /wp:paragraph -->
+
+					<!-- wp:paragraph -->
+					<p>Nose blunt masonite nosebone bluntslide. Poseur tic-tac coping feeble Neil Blender. Rail camel back kick-nose bone air. Saran Wrap skate or die handplant coping. 540 half-flip face plant ho-ho. Hang up cab flip stalefish.</p>
+					<!-- /wp:paragraph -->
+
+					<!-- wp:paragraph -->
+					<p>Vert quarter pipe tailslide grab. Nose slide Bam Margera rocket air axle set disaster. Fast plant crail grab Japan air chicken wing Bullet 66. Hurricane coping masonite crail grab Brooklyn Banks. Death box salad grind concave cess slide.</p>
+					<!-- /wp:paragraph --></div>
+					<!-- /wp:column -->
+
+					<!-- wp:column -->
+					<div class="wp-block-column"></div>
+					<!-- /wp:column --></div>
+					<!-- /wp:columns -->',
+				)
+			);
+
+			register_block_pattern(
+				'sk8prk/blog-post-pattern-2',
+				array(
+					'title'      => __( 'Testimonial and image', 'sk8prk' ),
+					'categories' => array( 'sk8prk' ),
+					'content'    => '
+					<!-- wp:columns -->
+					<div class="wp-block-columns"><!-- wp:column {"width":"25%"} -->
+					<div class="wp-block-column" style="flex-basis:25%"><!-- wp:separator {"className":"is-style-thick-separator"} -->
+					<hr class="wp-block-separator is-style-thick-separator"/>
+					<!-- /wp:separator -->
+
+					<!-- wp:paragraph {"align":"right"} -->
+					<p class="has-text-align-right">Jane Doe</p>
+					<!-- /wp:paragraph --></div>
+					<!-- /wp:column -->
+
+					<!-- wp:column -->
+					<div class="wp-block-column"><!-- wp:paragraph {"fontSize":"large","style":{"typography":{"lineHeight":"1"}}} -->
+					<p class="has-large-font-size" style="line-height:1"><strong>Add a testimonial from someone who loves what you do.</strong></p>
+					<!-- /wp:paragraph --></div>
+					<!-- /wp:column --></div>
+					<!-- /wp:columns -->
+
+					<!-- wp:image {"align":"wide","id":164,"sizeSlug":"large","linkDestination":"none","className":"is-style-filter-effect"} -->
+					<figure class="wp-block-image alignwide size-large is-style-filter-effect"><img src="http://sk8rprk.local/wp-content/uploads/2020/11/8045e70b649d5576b1c2011c3f77b97e-1024x683.jpg" alt="" class="wp-image-164"/></figure>
+					<!-- /wp:image -->',
+				)
+			);
+
+			register_block_pattern(
+				'sk8prk/blog-post-pattern-3',
+				array(
+					'title'      => __( 'Two columns and gallery', 'sk8prk' ),
+					'categories' => array( 'sk8prk' ),
+					'content'    => '<!-- wp:columns -->
+					<div class="wp-block-columns"><!-- wp:column -->
+					<div class="wp-block-column"></div>
+					<!-- /wp:column -->
+
+					<!-- wp:column {"width":"50%"} -->
+					<div class="wp-block-column" style="flex-basis:50%"><!-- wp:heading {"level":4} -->
+					<h4>ANOTHER HEADING</h4>
+					<!-- /wp:heading -->
+
+					<!-- wp:paragraph -->
+					<p>Add your company history here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet eros eget justo elementum interdum. Cras vestibulum nulla id aliquam rutrum. Vestibulum aliquet mauris ut augue ultrices facilisis. Vestibulum pretium ligula sed ipsum dapibus, tempus iaculis felis ornare. Morbi pretium sed est tincidunt hendrerit. Curabitur id elit scelerisque, pharetra tellus sit amet.</p>
+					<!-- /wp:paragraph -->
+
+					<!-- wp:paragraph -->
+					<p>Aliquam consectetur tristique metus non pulvinar. Donec luctus magna quis justo tincidunt, eu euismod lacus faucibus. Cras eros risus, venenatis ut ante eu.</p>
+					<!-- /wp:paragraph --></div>
+					<!-- /wp:column -->
+
+					<!-- wp:column -->
+					<div class="wp-block-column"><!-- wp:spacer {"height":32} -->
+					<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
+					<!-- /wp:spacer -->
+
+					<!-- wp:separator {"className":"is-style-thick-separator"} -->
+					<hr class="wp-block-separator is-style-thick-separator"/>
+					<!-- /wp:separator -->
+
+					<!-- wp:paragraph {"style":{"typography":{"fontSize":"28px","lineHeight":1.4}}} -->
+					<p style="font-size:28px;line-height:1.4">A quote that is aligned right next to some normal paragraphs and headings</p>
+					<!-- /wp:paragraph -->
+
+					<!-- wp:paragraph -->
+					<p>– Jane Doe</p>
+					<!-- /wp:paragraph --></div>
+					<!-- /wp:column --></div>
+					<!-- /wp:columns -->
+
+					<!-- wp:gallery {"ids":[166,167,168,169],"columns":4,"linkTo":"none","align":"full","className":"is-style-filter-effect"} -->
+					<figure class="wp-block-gallery alignfull columns-4 is-cropped is-style-filter-effect"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="http://sk8rprk.local/wp-content/uploads/2020/11/3c598f80ce1664b8f669fb521fdda9dd-683x1024.jpg" alt="" data-id="166" data-link="http://sk8rprk.local/5-simple-skateboarding-tricks/3c598f80ce1664b8f669fb521fdda9dd/" class="wp-image-166"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://sk8rprk.local/wp-content/uploads/2020/11/518f4af2b79d74510dc63665d2cec67e-576x1024.jpg" alt="" data-id="167" data-link="http://sk8rprk.local/5-simple-skateboarding-tricks/518f4af2b79d74510dc63665d2cec67e/" class="wp-image-167"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://sk8rprk.local/wp-content/uploads/2020/11/cb9f8776e749a062b7beb21a65e1e196-819x1024.jpg" alt="" data-id="168" data-link="http://sk8rprk.local/5-simple-skateboarding-tricks/cb9f8776e749a062b7beb21a65e1e196/" class="wp-image-168"/></figure></li><li class="blocks-gallery-item"><figure><img src="http://sk8rprk.local/wp-content/uploads/2020/11/1a7c360b434981af2d748948f1602d64-1024x683.jpg" alt="" data-id="169" data-full-url="http://sk8rprk.local/wp-content/uploads/2020/11/1a7c360b434981af2d748948f1602d64-scaled.jpg" data-link="http://sk8rprk.local/5-simple-skateboarding-tricks/1a7c360b434981af2d748948f1602d64/" class="wp-image-169"/></figure></li></ul></figure>
+					<!-- /wp:gallery -->
+
+					<!-- wp:columns -->
+					<div class="wp-block-columns"><!-- wp:column -->
+					<div class="wp-block-column"></div>
+					<!-- /wp:column -->
+
+					<!-- wp:column {"width":"50%"} -->
+					<div class="wp-block-column" style="flex-basis:50%"><!-- wp:paragraph -->
+					<p>Nose blunt masonite nosebone bluntslide. Poseur tic-tac coping feeble Neil Blender. Rail camel back kick-nose bone air. Saran Wrap skate or die handplant coping. 540 half-flip face plant ho-ho. Hang up cab flip stalefish Primo slide.<br>Vert quarter pipe tailslide grab. Nose slide Bam Margera rocket air axle set disaster. Fast plant crail grab Japan air chicken wing Bullet 66. Hurricane coping masonite crail grab Brooklyn Banks. Death box salad grind concave cess slide.</p>
+					<!-- /wp:paragraph --></div>
+					<!-- /wp:column -->
+
+					<!-- wp:column -->
+					<div class="wp-block-column"></div>
+					<!-- /wp:column --></div>
+					<!-- /wp:columns -->',
+				)
+			);
+
+			register_block_pattern(
+				'sk8prk/three-testimonials',
+				array(
+					'title'      => __( 'Three Testimonials', 'sk8prk' ),
+					'categories' => array( 'sk8prk' ),
+					'content'    => '<!-- wp:separator {"className":"is-style-thick-separator"} -->
+					<hr class="wp-block-separator is-style-thick-separator"/>
+					<!-- /wp:separator -->
+
+					<!-- wp:spacer {"height":25} -->
+					<div style="height:25px" aria-hidden="true" class="wp-block-spacer"></div>
+					<!-- /wp:spacer -->
+
+					<!-- wp:columns {"align":"wide"} -->
+					<div class="wp-block-columns alignwide"><!-- wp:column -->
+					<div class="wp-block-column"><!-- wp:heading {"level":4} -->
+					<h4>HEADING A</h4>
+					<!-- /wp:heading -->
+
+					<!-- wp:paragraph -->
+					<p>Add more info about your service. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id arcu aliquet, elementum nisi quis, condimentum nibh.</p>
+					<!-- /wp:paragraph --></div>
+					<!-- /wp:column -->
+
+					<!-- wp:column -->
+					<div class="wp-block-column"><!-- wp:heading {"level":4} -->
+					<h4>HEADING B</h4>
+					<!-- /wp:heading -->
+
+					<!-- wp:paragraph -->
+					<p>Add more info about your service. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id arcu aliquet, elementum nisi quis, condimentum nibh.</p>
+					<!-- /wp:paragraph --></div>
+					<!-- /wp:column -->
+
+					<!-- wp:column -->
+					<div class="wp-block-column"><!-- wp:heading {"level":4} -->
+					<h4>HEADING C</h4>
+					<!-- /wp:heading -->
+
+					<!-- wp:paragraph -->
+					<p>Add more info about your service. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id arcu aliquet, elementum nisi quis, condimentum nibh.</p>
+					<!-- /wp:paragraph --></div>
+					<!-- /wp:column --></div>
+					<!-- /wp:columns -->
+
+					<!-- 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:separator {"className":"is-style-thick-separator"} -->
+					<hr class="wp-block-separator is-style-thick-separator"/>
+					<!-- /wp:separator --></div>
+					<!-- /wp:column -->
+
+					<!-- wp:column {"width":"66.66%"} -->
+					<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:paragraph {"style":{"typography":{"fontSize":"36px"}}} -->
+					<p style="font-size:36px"><strong>Add a testimonial from someone who loves what you do.</strong></p>
+					<!-- /wp:paragraph -->
+
+					<!-- wp:paragraph -->
+					<p>Jane Doe</p>
+					<!-- /wp:paragraph --></div>
+					<!-- /wp:column --></div>
+					<!-- /wp:columns -->',
+				)
+			);
+		}
+	}
+endif;
+add_action( 'after_setup_theme', 'sk8prk_register_block_patterns', 12 ); ?>

sk8prk/block-template-parts/footer.html

@@ -0,0 +1,55 @@
+<!-- wp:columns {"align":"wide"} -->
+<div class="wp-block-columns alignwide"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:site-title {"fontSize":"big"} /-->
+
+<!-- wp:paragraph -->
+<p>Skate ipsum dolor sit amet, poseur nollie casper pop shove-it. Kickturn noseblunt tailslide.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:social-links {"className":"is-style-logos-only"} -->
+<ul class="wp-block-social-links is-style-logos-only"><!-- wp:social-link {"url":"http:\/\/twitter.com","service":"twitter"} /-->
+
+<!-- wp:social-link {"url":"http:\/\/facebook.com","service":"facebook"} /-->
+
+<!-- wp:social-link {"url":"http:\/\/instagram.com","service":"instagram"} /--></ul>
+<!-- /wp:social-links --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"level":3,"fontSize":"normal"} -->
+<h3 class="has-normal-font-size">MORE INFO</h3>
+<!-- /wp:heading -->
+
+<!-- wp:navigation {"orientation":"vertical"} -->
+<!-- wp:navigation-link {"label":"Our board","type":"page","id":38,"url":"\/our-board\/"} /-->
+
+<!-- wp:navigation-link {"label":"Locations","type":"page","id":40,"url":"\/locations\/"} /-->
+
+<!-- wp:navigation-link {"label":"Jobs","type":"page","id":41,"url":"\/jobs\/"} /-->
+
+<!-- wp:navigation-link {"label":"Privacy Policy","type":"page","id":42,"url":"\/privacy-policy-2\/"} /-->
+<!-- /wp:navigation --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:heading {"level":3,"fontSize":"normal"} -->
+<h3 class="has-normal-font-size">SUBSCRIBE</h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Subscribe form here!</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
+
+<!-- wp:spacer {"height":13} -->
+<div style="height:13px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
+<p class="has-text-align-center has-small-font-size">Proudly Powered by <a href="https://wordpress.org">WordPress</a></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer {"height":52} -->
+<div style="height:52px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->