Merge pull request #3010 from Automattic/update/blank-canvas-patterns

Blank Canvas: Add block patterns

blank-canvas/functions.php

@@ -163,6 +163,11 @@ function blank_canvas_enqueue() {
 }
 add_action( 'wp_enqueue_scripts', 'blank_canvas_enqueue', 11 );
 
+/**
+ * Block Patterns.
+ */
+require get_stylesheet_directory() . '/inc/block-patterns.php';
+
 /**
  * Enqueue CSS for Customizer message.
  */

blank-canvas/inc/block-patterns.php

@@ -0,0 +1,201 @@
+<?php
+/**
+ * Block Patterns
+ *
+ * @package Blank Canvas
+ * @since   1.0
+ */
+
+if ( ! function_exists( 'blank_canvas_register_block_patterns' ) ) :
+	/**
+	 * Sets up support for block patterns and unregisters Seedlet's.
+	 */
+	function blank_canvas_register_block_patterns() {
+		/**
+		 * Register Block Pattern Category.
+		 */
+		if ( function_exists( 'register_block_pattern_category' ) ) {
+
+			register_block_pattern_category(
+				'blank-canvas',
+				array( 'label' => __( 'Blank Canvas', 'blank-canvas' ) )
+			);
+		}
+
+		/**
+		 * Register Block Patterns.
+		 */
+		if ( function_exists( 'register_block_pattern' ) ) {
+
+			register_block_pattern(
+				'blank-canvas/about-me',
+				array(
+					'title'      => __( 'About Me', 'blank-canvas' ),
+					'categories' => array( 'blank-canvas' ),
+					'content'    => '<!-- wp:spacer {"height":20} -->
+									<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
+									<!-- /wp:spacer -->
+									<!-- wp:media-text {"mediaPosition":"right","mediaId":1752,"mediaLink":"' . get_stylesheet_directory_uri() . '/assets/pattern-tattoo.jpg","mediaType":"image","imageFill":true} -->
+									<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(' . get_stylesheet_directory_uri() . '/assets/pattern-tattoo.jpg);background-position:50% 50%"><img src="' . get_stylesheet_directory_uri() . '/assets/pattern-tattoo.jpg" alt="' . __( 'A photo of a tattooed hand, giving the "I love you" sign.', 'blank-canvas' ) . '" class="wp-image-1752 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"align":"wide"} -->
+									<h2 class="alignwide"><strong>' . __( 'Hi! I’m a tattooist based in Florida City.', 'blank-canvas' ) . '</strong></h2>
+									<!-- /wp:heading -->
+									<!-- wp:paragraph -->
+									<p>' . __( 'Specializing in fine line tattoos with a single needle. With over 10 years of experience, I can make your tattoo dreams come true.', 'blank-canvas' ) . '</p>
+									<!-- /wp:paragraph -->
+									<!-- wp:buttons -->
+									<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#d35069"}},"textColor":"background"} -->
+									<div class="wp-block-button"><a class="wp-block-button__link has-background-color has-text-color has-background" style="background-color:#d35069">' . __( 'Get in touch', 'blank-canvas' ) . '</a></div>
+									<!-- /wp:button --></div>
+									<!-- /wp:buttons -->
+									<!-- wp:social-links {"className":"is-style-default"} -->
+									<ul class="wp-block-social-links is-style-default"><!-- wp:social-link {"url":"https://facebook.com/","service":"facebook"} /-->
+									<!-- wp:social-link {"url":"https://instagram.com/","service":"instagram"} /-->
+									<!-- wp:social-link {"url":"https://twitter.com/","service":"twitter"} /--></ul>
+									<!-- /wp:social-links -->
+									<!-- wp:spacer -->
+									<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+									<!-- /wp:spacer --></div></div>
+									<!-- /wp:media-text -->',
+				)
+			);
+
+			register_block_pattern(
+				'blank-canvas/links',
+				array(
+					'title'      => __( 'Links', 'blank-canvas' ),
+					'categories' => array( 'blank-canvas' ),
+					'content'    => '<!-- wp:spacer {"height":20} -->
+									<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
+									<!-- /wp:spacer -->
+									<!-- wp:image {"align":"center","id":20,"width":98,"height":95,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
+									<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="' . get_stylesheet_directory_uri() . '/assets/pattern-hat.jpg" alt="' . __( 'Photo of a man wearing a hat.', 'blank-canvas' ) . '" class="wp-image-20" width="98" height="95"/></figure></div>
+									<!-- /wp:image -->
+									<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"34px","lineHeight":"1"}}} -->
+									<p class="has-text-align-center" style="font-size:34px;line-height:1"><strong>' . __( 'Alex Fredrickson', 'blank-canvas' ) . '</strong></p>
+									<!-- /wp:paragraph -->
+									<!-- wp:social-links {"align":"center","className":"is-style-default"} -->
+									<ul class="wp-block-social-links aligncenter is-style-default"><!-- wp:social-link {"url":"https://linkedin.com/","service":"linkedin"} /-->
+									<!-- wp:social-link {"url":"https://twitter.com/","service":"twitter"} /-->
+									<!-- wp:social-link {"url":"https://instagram.com/","service":"instagram"} /--></ul>
+									<!-- /wp:social-links -->
+									<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"20px","lineHeight":"1.65"}}} -->
+									<p class="has-text-align-center" style="font-size:20px;line-height:1.65">' . __( 'My latest and greatest tips, resources, and reads.<br>So much goodness all in one place!', 'blank-canvas' ) . '</p>
+									<!-- /wp:paragraph -->
+									<!-- wp:buttons {"contentJustification":"center"} -->
+									<div class="wp-block-buttons is-content-justification-center"><!-- wp:button {"borderRadius":"","width":100,"className":"is-style-fill"} -->
+									<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"><a class="wp-block-button__link">' . __( 'Must read: The Place That Made Me', 'blank-canvas' ) . '</a></div>
+									<!-- /wp:button -->
+
+									<!-- wp:button {"width":100,"className":"is-style-fill"} -->
+									<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"><a class="wp-block-button__link">' . __( 'Rain Journal by Richard Johnson', 'blank-canvas' ) . '</a></div>
+									<!-- /wp:button -->
+
+									<!-- wp:button {"width":100,"className":"is-style-fill"} -->
+									<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"><a class="wp-block-button__link">' . __( '10th Day of Rain', 'blank-canvas' ) . '</a></div>
+									<!-- /wp:button -->
+
+									<!-- wp:button {"width":100,"className":"is-style-fill"} -->
+									<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"><a class="wp-block-button__link">' . __( 'Blurring the Lines Between Architecture and Nature', 'blank-canvas' ) . '</a></div>
+									<!-- /wp:button -->
+
+									<!-- wp:button {"width":100,"className":"is-style-fill"} -->
+									<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"><a class="wp-block-button__link">' . __( 'Instant Classic: A story of Persistence', 'blank-canvas' ) . '</a></div>
+									<!-- /wp:button --></div>
+									<!-- /wp:buttons -->',
+				)
+			);
+
+			register_block_pattern(
+				'blank-canvas/invitation',
+				array(
+					'title'      => __( 'Invitation', 'blank-canvas' ),
+					'categories' => array( 'blank-canvas' ),
+					'content'    => '<!-- wp:media-text {"mediaId":2207,"mediaLink":"' . get_stylesheet_directory_uri() . '/assets/pattern-drink.jpg","mediaType":"image","verticalAlignment":"center","imageFill":true,"style":{"color":{"background":"#f5fff4"}}} -->
+									<div class="wp-block-media-text alignwide is-stacked-on-mobile is-vertically-aligned-center is-image-fill has-background" style="background-color:#f5fff4"><figure class="wp-block-media-text__media" style="background-image:url(' . get_stylesheet_directory_uri() . '/assets/pattern-drink.jpg);background-position:50% 50%"><img src="' . get_stylesheet_directory_uri() . '/assets/pattern-drink.jpg" alt="Photo of two drinks." class="wp-image-2207 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:spacer {"height":30} -->
+									<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
+									<!-- /wp:spacer -->
+									<!-- wp:heading {"style":{"color":{"text":"#c61aa7"}}} -->
+									<h2 class="has-text-color" style="color:#c61aa7"><strong>' . __( 'You&rsquo;re Invited', 'blank-canvas' ) . '</strong></h2>
+									<!-- /wp:heading -->
+									<!-- wp:columns -->
+									<div class="wp-block-columns"><!-- wp:column -->
+									<div class="wp-block-column"><!-- wp:paragraph {"fontSize":"small"} -->
+									<p class="has-small-font-size">' . __( 'Pier 38<br>San Francisco, CA', 'blank-canvas' ) . '</p>
+									<!-- /wp:paragraph --></div>
+									<!-- /wp:column -->
+									<!-- wp:column -->
+									<div class="wp-block-column"><!-- wp:paragraph {"fontSize":"small"} -->
+									<p class="has-small-font-size">' . __( '8pm–12am<br>April 16th', 'blank-canvas' ) . '</p>
+									<!-- /wp:paragraph --></div>
+									<!-- /wp:column --></div>
+									<!-- /wp:columns -->
+									<!-- wp:separator {"customColor":"#e343cd","className":"is-style-wide"} -->
+									<hr class="wp-block-separator has-text-color has-background is-style-wide" style="background-color:#e343cd;color:#e343cd"/>
+									<!-- /wp:separator -->
+									<!-- wp:paragraph -->
+									<p>' . __( 'Join us for a celebratory party featuring creative cocktails and mocktails, seasonal chef-crafted snacks and appetizers, and a range of desserts and pastries from local bakeries.', 'blank-canvas' ) . '</p>
+									<!-- /wp:paragraph -->
+									<!-- wp:buttons -->
+									<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#c61aa7"}},"textColor":"background","className":"is-style-fill"} -->
+									<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-background-color has-text-color has-background" style="background-color:#c61aa7">' . __( 'RSVP', 'blank-canvas' ) . '</a></div>
+									<!-- /wp:button --></div>
+									<!-- /wp:buttons -->
+									<!-- wp:spacer {"height":30} -->
+									<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
+									<!-- /wp:spacer --></div></div>
+									<!-- /wp:media-text -->',
+				)
+			);
+
+			register_block_pattern(
+				'blank-canvas/split-screen',
+				array(
+					'title'      => __( 'Split Screen', 'blank-canvas' ),
+					'categories' => array( 'blank-canvas' ),
+					'content'    => '<!-- wp:media-text {"align":"full","mediaId":598,"mediaLink":"' . get_stylesheet_directory_uri() . '/assets/pattern-camera.jpg","mediaType":"image","imageFill":true} -->
+									<div class="wp-block-media-text alignfull is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(' . get_stylesheet_directory_uri() . '/assets/pattern-camera.jpg);background-position:50% 50%"><img src="' . get_stylesheet_directory_uri() . '/assets/pattern-camera.jpg" alt="' . __( 'Photo of a vintage camera.', 'blank-canvas' ) . '" class="wp-image-598 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:cover {"overlayColor":"background","minHeight":95,"minHeightUnit":"vh"} -->
+									<div class="wp-block-cover has-background-background-color has-background-dim" style="min-height:95vh"><div class="wp-block-cover__inner-container"><!-- wp:image {"align":"center","id":624,"width":200,"height":200,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
+									<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="' . get_stylesheet_directory_uri() . '/assets/pattern-woman.jpg" alt="' . __( 'Photo of a woman.', 'blank-canvas' ) . '" class="wp-image-624" width="200" height="200"/></figure></div>
+									<!-- /wp:image -->
+
+									<!-- wp:heading {"textAlign":"center","level":1} -->
+									<h1 class="has-text-align-center"><strong>' . __( 'Jasmine Baker', 'blank-canvas' ) . '</strong></h1>
+									<!-- /wp:heading -->
+
+									<!-- wp:paragraph {"align":"center","backgroundColor":"background"} -->
+									<p class="has-text-align-center has-background-background-color has-background">' . __( 'Hello! I am a photographer and designer living near Portland, Maine. When I am not posting to Instagram, you can find me shooting weddings and portraits.', 'blank-canvas' ) . '</p>
+									<!-- /wp:paragraph -->
+
+									<!-- wp:social-links {"align":"center","className":"is-style-default"} -->
+									<ul class="wp-block-social-links aligncenter is-style-default"><!-- wp:social-link {"url":"https://instagram.com","service":"instagram"} /-->
+
+									<!-- wp:social-link {"url":"https://www.tiktok.com","service":"tiktok"} /-->
+
+									<!-- wp:social-link {"url":"https://twitter.com","service":"twitter"} /-->
+
+									<!-- wp:social-link {"url":"https://youtube.com","service":"youtube"} /--></ul>
+									<!-- /wp:social-links --></div></div>
+									<!-- /wp:cover --></div></div>
+									<!-- /wp:media-text -->',
+				)
+			);
+		}
+
+		/**
+		 * Unregister Seedlet Block Pattern Category.
+		 */
+		if ( function_exists( 'unregister_block_pattern_category' ) ) {
+			unregister_block_pattern_category( 'seedlet' );
+		}
+
+		/**
+		 * Unregister Block Patterns from Seedlet.
+		 */
+		if ( function_exists( 'unregister_block_pattern' ) ) {
+			unregister_block_pattern( 'seedlet/group-split-background' );
+			unregister_block_pattern( 'seedlet/group-image-overlap' );
+			unregister_block_pattern( 'seedlet/latest-posts-alternating-grid' );
+		}
+	}
+endif;
+add_action( 'after_setup_theme', 'blank_canvas_register_block_patterns', 12 );

blank-canvas/inc/wpcom.php

@@ -14,3 +14,91 @@ function blank_canvas_wpcom_customize_update( $wp_customize ) {
 	$wp_customize->remove_control( 'hide_front_page_title');
 }
 add_action( 'customize_register', 'blank_canvas_wpcom_customize_update', 11 );
+
+/**
+ * Register WP.com-only block patterns.
+ */
+if ( ! function_exists( 'blank_canvas_register_wpcom_block_patterns' ) ) :
+	function blank_canvas_register_wpcom_block_patterns() {
+		
+		if ( function_exists( 'register_block_pattern' ) ) {
+
+			/* This pattern is WP.com-only because it relies on the Layout Grid block. */
+			register_block_pattern(
+				'blank-canvas/card',
+				array(
+					'title'      => __( 'Card', 'blank-canvas' ),
+					'categories' => array( 'blank-canvas' ),
+					'content'    => '<!-- wp:jetpack/layout-grid {"column1DesktopSpan":4,"column1DesktopOffset":4,"column1TabletSpan":4,"column1TabletOffset":2,"column1MobileSpan":4,"column2DesktopOffset":8,"column2TabletOffset":13,"className":"column1-desktop-grid__span-4 column1-desktop-grid__start-5 column1-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__start-3 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"} -->
+									<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-4 column1-desktop-grid__start-5 column1-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__start-3 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"><!-- wp:jetpack/layout-grid-column -->
+									<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:image {"id":16,"sizeSlug":"large","linkDestination":"none","className":"margin-bottom-none"} -->
+									<figure class="wp-block-image size-large margin-bottom-none"><img src="' . get_stylesheet_directory_uri() . '/assets/pattern-portrait.jpg" alt="' . __( 'Portrait of a woman against a pink and blue background.', 'blank-canvas' ) . '"/></figure>
+									<!-- /wp:image -->
+
+									<!-- wp:group {"className":"margin-top-none","style":{"color":{"background":"#ebfbff"}}} -->
+									<div class="wp-block-group margin-top-none has-background" style="background-color:#ebfbff"><div class="wp-block-group__inner-container"><!-- wp:heading {"className":"margin-bottom-none","textColor":"primary"} -->
+									<h2 class="margin-bottom-none has-primary-color has-text-color"><strong>' . __( 'Kate Pollard', 'blank-canvas' ) . '</strong></h2>
+									<!-- /wp:heading -->
+
+									<!-- wp:paragraph {"className":"margin-top-half","textColor":"primary","style":{"typography":{"fontSize":"18px"}}} -->
+									<p class="margin-top-half has-primary-color has-text-color" style="font-size:18px">' . __( 'Hi! I’m a lead strategist for growing sustainable revenue streams for integrated fundraising.', 'blank-canvas' ) . '</p>
+									<!-- /wp:paragraph -->
+
+									<!-- wp:buttons {"contentJustification":"center"} -->
+									<div class="wp-block-buttons is-content-justification-center"><!-- wp:button {"borderRadius":4,"style":{"color":{"text":"#ffffff","background":"#067eb1"}}} -->
+									<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background" style="border-radius:4px;background-color:#067eb1;color:#ffffff">' . __( 'Get in touch', 'blank-canvas' ) . '</a></div>
+									<!-- /wp:button --></div>
+									<!-- /wp:buttons -->
+
+									<!-- wp:social-links {"align":"center"} -->
+									<ul class="wp-block-social-links aligncenter"><!-- wp:social-link {"url":"https://linkedin.com/","service":"linkedin"} /-->
+
+									<!-- wp:social-link {"url":"https://twitter.com/","service":"twitter"} /-->
+
+									<!-- wp:social-link {"url":"https://instagram.com/","service":"instagram"} /--></ul>
+									<!-- /wp:social-links --></div></div>
+									<!-- /wp:group --></div>
+									<!-- /wp:jetpack/layout-grid-column --></div>
+									<!-- /wp:jetpack/layout-grid -->',
+				)
+			);
+
+			/* This pattern is WP.com-only because it relies on the Contact Form block. */
+			register_block_pattern(
+				'blank-canvas/email-signup',
+				array(
+					'title'      => __( 'Email Signup', 'blank-canvas' ),
+					'categories' => array( 'blank-canvas' ),
+					'content'    => '<!-- wp:cover {"url":"' . get_stylesheet_directory_uri() . '/assets/pattern-art.jpg","id":1934,"dimRatio":60,"overlayColor":"secondary","minHeight":100,"minHeightUnit":"vh","contentPosition":"top left","align":"full"} -->
+									<div class="wp-block-cover alignfull has-background-dim-60 has-secondary-background-color has-background-dim has-custom-content-position is-position-top-left" style="background-image:url(' . get_stylesheet_directory_uri() . '/assets/pattern-art.jpg);min-height:100vh"><div class="wp-block-cover__inner-container"><!-- wp:columns -->
+									<div class="wp-block-columns"><!-- wp:column {"width":"5%"} -->
+									<div class="wp-block-column" style="flex-basis:5%"></div>
+									<!-- /wp:column -->
+
+									<!-- wp:column {"width":50} -->
+									<div class="wp-block-column" style="flex-basis:50%"><!-- wp:spacer {"height":10} -->
+									<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
+									<!-- /wp:spacer -->
+
+									<!-- wp:heading -->
+									<h2><strong>' . __( 'Virtual Art Classes', 'blank-canvas' ) . '</strong></h2>
+									<!-- /wp:heading -->
+
+									<!-- wp:paragraph -->
+									<p>' . __( 'Join instructor Jaime Adams for a series of virtual classes aimed at helping you hone your drawing skills. We will focus on composition, perspective, contour, representing volume, and more!', 'blank-canvas' ) . '</p>
+									<!-- /wp:paragraph -->
+
+									<!-- wp:jetpack/contact-form -->
+									<!-- wp:jetpack/field-email {"required":true,"options":[]} /-->
+
+									<!-- wp:jetpack/button {"element":"button","text":"' . __( 'Learn More', 'blank-canvas' ) . '","textColor":"secondary","backgroundColor":"background"} /-->
+									<!-- /wp:jetpack/contact-form --></div>
+									<!-- /wp:column --></div>
+									<!-- /wp:columns --></div></div>
+									<!-- /wp:cover -->',
+				)
+			);
+		}
+	}
+endif;
+add_action( 'after_setup_theme', 'blank_canvas_register_wpcom_block_patterns', 12 );

blank-canvas/style.css

@@ -26,6 +26,25 @@ 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.
+
+Blank Canvas is derived from Seedlet. 2020-2021 Automattic
+Seedlet is distributed under the terms of the GNU GPL v2 or later.
+
+Images from stocksnap.io
+License: CC0
+- Sarah Pflug: https://stocksnap.io/photo/hand-sign-BPQSX1BQTF
+- Clem Onojeghuo: https://stocksnap.io/photo/beanie-scarf-M2U9VL0ZWG
+- Brooke Cagle: https://stocksnap.io/photo/people-woman-MU7G67710S
+- Daria Shevtsova: https://stocksnap.io/photo/girl-camera-AZED07HITL
+- Benjamin Voros: https://stocksnap.io/photo/blue-denim-BWPRK5DEF0
+- Artsy Crafty: https://stocksnap.io/photo/office-supplies-BDVUKQ4BBF
+Used as block pattern images.
+
+Image from foodiesfeed.com
+License: CC0
+https://www.foodiesfeed.com/free-food-photo/watermelon-juice-2/
+Used as block pattern image.
+
 */
 
 @import "variables.css";

blank-canvas/variables.css

@@ -1,3 +1,6 @@
+/**
+ * Base Variables
+ */
 :root {
 	/* Globals */
 	/* Font Family */
@@ -7,4 +10,13 @@
 	--global--color-secondary: #007cba;
 	--global--color-secondary-hover: #006ba1;
 	--global--color-tertiary: #FAFAFA;
-}
+}
+
+/**
+ * Repsonsive Variables
+ */
+@media only screen and (min-width: 830px) {
+	:root {
+		--responsive--alignwide-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), 1000px);
+	}
+}