Block Editor: Add the initial set of block patterns.

Included patterns:

text-two-columns
two-buttons
two-images
text-two-columns-with-images
text-three-columns-buttons
large-header
large-header-paragraph
three-buttons
quote
testimonials

Props mcsf, nrqsnchz.
See #50550.


git-svn-id: https://develop.svn.wordpress.org/trunk@48334 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/block-patterns.php

@@ -0,0 +1,33 @@
+<?php
+/**
+ * Register the block patterns and block patterns categories
+ *
+ * @package WordPress
+ * @since 5.5.0
+ */
+
+$core_block_patterns = array(
+	'text-two-columns',
+	'two-buttons',
+	'two-images',
+	'text-two-columns-with-images',
+	'text-three-columns-buttons',
+	'large-header',
+	'large-header-paragraph',
+	'three-buttons',
+	'quote',
+	'testimonials',
+);
+
+foreach ( $core_block_patterns as $core_block_pattern ) {
+	register_block_pattern(
+		'core/' . $core_block_pattern,
+		require( __DIR__ . '/block-patterns/' . $core_block_pattern . '.php' )
+	);
+}
+
+register_block_pattern_category( 'buttons', array( 'label' => _x( 'Buttons', 'Block pattern category', 'gutenberg' ) ) );
+register_block_pattern_category( 'columns', array( 'label' => _x( 'Columns', 'Block pattern category', 'gutenberg' ) ) );
+register_block_pattern_category( 'gallery', array( 'label' => _x( 'Gallery', 'Block pattern category', 'gutenberg' ) ) );
+register_block_pattern_category( 'header', array( 'label' => _x( 'Headers', 'Block pattern category', 'gutenberg' ) ) );
+register_block_pattern_category( 'text', array( 'label' => _x( 'Text', 'Block pattern category', 'gutenberg' ) ) );

src/wp-includes/block-patterns/large-header-paragraph.php

@@ -0,0 +1,13 @@
+<?php
+/**
+ * Large header and a paragraph block pattern.
+ *
+ * @package WordPress
+ */
+
+return array(
+	'title'         => __( 'Large header and a paragraph' ),
+	'content'       => "<!-- wp:group {\"align\":\"wide\"} -->\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container\"><!-- wp:cover {\"customGradient\":\"radial-gradient(rgb(122,220,180) 0%,rgb(0,208,130) 100%)\",\"contentPosition\":\"center center\",\"align\":\"wide\"} -->\n<div class=\"wp-block-cover alignwide has-background-dim has-background-gradient is-position-center-center\" style=\"background:radial-gradient(rgb(122,220,180) 0%,rgb(0,208,130) 100%)\"><div class=\"wp-block-cover__inner-container\"><!-- wp:paragraph {\"align\":\"center\",\"placeholder\":\"Write title…\",\"textColor\":\"black\",\"style\":{\"typography\":{\"fontSize\":90,\"lineHeight\":\"1.2\"}}} -->\n<p class=\"has-text-align-center has-black-color has-text-color\" style=\"line-height:1.2;font-size:90px\"><strong>" . __( '"Sir Knight"' ) . "</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"textColor\":\"black\"} -->\n<p class=\"has-text-align-center has-black-color has-text-color\">" . __( 'If your worship be disposed to alight, you will fail of nothing here but of a bed as for all other accommodations, you may be supplied to your mind.' ) . "</p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:cover --></div></div>\n<!-- /wp:group -->",
+	'viewportWidth' => 1000,
+	'categories'    => array( 'header' ),
+);

src/wp-includes/block-patterns/large-header.php

@@ -0,0 +1,13 @@
+<?php
+/**
+ * Large header block pattern.
+ *
+ * @package WordPress
+ */
+
+return array(
+	'title'         => __( 'Large header' ),
+	'content'       => "<!-- wp:group {\"align\":\"wide\"} -->\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container\"><!-- wp:cover {\"gradient\":\"pale-ocean\",\"align\":\"wide\"} -->\n<div class=\"wp-block-cover alignwide has-background-dim has-background-gradient has-pale-ocean-gradient-background\"><div class=\"wp-block-cover__inner-container\"><!-- wp:paragraph {\"align\":\"center\",\"placeholder\":\"Write title…\",\"textColor\":\"black\",\"style\":{\"typography\":{\"fontSize\":72}}} -->\n<p class=\"has-text-align-center has-black-color has-text-color\" style=\"font-size:72px\"><strong>" . __( 'Large header' ) . "</strong></p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:cover --></div></div>\n<!-- /wp:group -->",
+	'viewportWidth' => 1000,
+	'categories'    => array( 'header' ),
+);

src/wp-includes/block-patterns/quote.php

@@ -0,0 +1,13 @@
+<?php
+/**
+ * Quote block pattern.
+ *
+ * @package WordPress
+ */
+
+return array(
+	'title'         => __( 'Quote' ),
+	'content'       => "<!-- wp:quote {\"className\":\"is-style-large\"} -->\n<blockquote class=\"wp-block-quote is-style-large\"><p>" . __( '"Sir Knight, if your worship be disposed to alight, you will fail of nothing here but of a bed as for all other accommodations, you may be supplied to your mind."' ) . '</p><cite>' . __( '— Don Quixote' ) . "</cite></blockquote>\n<!-- /wp:quote -->",
+	'viewportWidth' => 800,
+	'categories'    => array( 'text' ),
+);

src/wp-includes/block-patterns/testimonials.php

@@ -0,0 +1,13 @@
+<?php
+/**
+ * Testimonials block pattern.
+ *
+ * @package WordPress
+ */
+
+return array(
+	'title'         => __( 'Testimonials' ),
+	'content'       => "<!-- wp:group {\"align\":\"wide\"} -->\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns {\"align\":\"full\"} -->\n<div class=\"wp-block-columns alignfull\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:group {\"style\":{\"color\":{\"background\":\"#8ed1fd\"}}} -->\n<div class=\"wp-block-group has-background\" style=\"background-color:#8ed1fd\"><div class=\"wp-block-group__inner-container\"><!-- wp:paragraph -->\n<p>" . __( '"Sir Knight, if your worship be disposed to alight, you will fail of nothing here but of a bed as for all other accommodations, you may be supplied to your mind."' ) . "</p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":20} -->\n<div class=\"wp-block-column\" style=\"flex-basis:20%\"><!-- wp:image {\"sizeSlug\":\"large\",\"className\":\"is-style-rounded\"} -->\n<figure class=\"wp-block-image size-large is-style-rounded\"><img src=\"http://www.gravatar.com/avatar/?d=mm\" alt=\"\"/></figure>\n<!-- /wp:image --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"width\":66.66} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:66.66%\"><!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":22}}} -->\n<p style=\"font-size:22px\"><strong>" . __( 'Doris Som' ) . "</strong></p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:group {\"style\":{\"color\":{\"background\":\"#8ed1fd\"}}} -->\n<div class=\"wp-block-group has-background\" style=\"background-color:#8ed1fd\"><div class=\"wp-block-group__inner-container\"><!-- wp:paragraph -->\n<p>" . __( '"Signor Castellano, the least thing in the world suffices me; for arms are the only things I value, and combat is my bed of repose."' ) . "</p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":20} -->\n<div class=\"wp-block-column\" style=\"flex-basis:20%\"><!-- wp:image {\"sizeSlug\":\"large\",\"className\":\"is-style-rounded\"} -->\n<figure class=\"wp-block-image size-large is-style-rounded\"><img src=\"http://www.gravatar.com/avatar/?d=mm\" alt=\"\"/></figure>\n<!-- /wp:image --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"width\":66.66} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:66.66%\"><!-- wp:paragraph {\"style\":{\"typography\":{\"fontSize\":22}}} -->\n<p style=\"font-size:22px\"><strong>" . __( 'Walt Art' ) . "</strong></p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->",
+	'viewportWidth' => 1000,
+	'categories'    => array( 'text' ),
+);

src/wp-includes/block-patterns/text-three-columns-buttons.php

@@ -0,0 +1,13 @@
+<?php
+/**
+ * Three columns of text, each a button at the bottom block pattern.
+ *
+ * @package WordPress
+ */
+
+return array(
+	'title'         => __( 'Three columns of text with buttons' ),
+	'categories'    => array( 'columns' ),
+	'content'       => "<!-- wp:group {\"align\":\"wide\"} -->\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>" . __( 'With that he went and held Don Quixote\'s stirrup, who having ate nothing all that day, dismounted with no small trouble and difficulty.' ) . "</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"borderRadius\":3,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link\" style=\"border-radius:3px\">" . __( 'One' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>" . __( 'In short, let if be what it will, so it comes quickly; for the weight of armour and the fatigue of travel are not to be supported without recruiting food.' ) . "</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"borderRadius\":3,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link\" style=\"border-radius:3px\">" . __( 'Two' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>" . __( 'Thereupon they laid the cloth at the inn-door for the benefit of the fresh air, and the landlord brought him a piece of the salt fish.' ) . "</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"borderRadius\":3,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link\" style=\"border-radius:3px\">" . __( 'Three' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->",
+	'viewportWidth' => 800,
+);

src/wp-includes/block-patterns/text-two-columns-with-images.php

@@ -0,0 +1,12 @@
+<?php
+/**
+ * Two columns of text, each with an image on top block pattern.
+ *
+ * @package WordPress
+ */
+
+return array(
+	'title'      => __( 'Two columns of text with images' ),
+	'categories' => array( 'columns' ),
+	'content'    => "<!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"width\":250,\"height\":188,\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large is-resized\"><img src=\"https://s.w.org/images/core/5.3/Windbuchencom.jpg\" alt=\"\" width=\"250\" height=\"188\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>" . __( 'This language, which they did not understand, and the extraordinary appearance of the knight, increased their laughter, which also increased his displeasure, and he would probably have shown it in a less civil way, but for the timely arrival of the innkeeper.' ) . "</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"width\":250,\"height\":188,\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large is-resized\"><img src=\"https://s.w.org/images/core/5.3/MtBlanc1.jpg\" alt=\"\" width=\"250\" height=\"188\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:paragraph -->\n<p>" . __( 'He was a man whose burden of fat inclined him to peace and quietness, yet when he observed such a strange disguise of human shape in his old armour and equipage, he could hardly forbear laughter; but having the fear of such a warlike appearance before his eyes, he resolved to give him good words, and therefore accosted him civilly.' ) . "</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->",
+);

src/wp-includes/block-patterns/text-two-columns.php

@@ -0,0 +1,12 @@
+<?php
+/**
+ * Two columns of Text block pattern.
+ *
+ * @package WordPress
+ */
+
+return array(
+	'title'      => __( 'Two columns of text' ),
+	'categories' => array( 'columns' ),
+	'content'    => "<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph {\"customFontSize\":21} -->\n<p style=\"font-size:21px\"><strong>" . __( 'CHAPTER 1. Loomings' ) . "</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>" . __( 'Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation.' ) . "</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>" . __( 'Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can.' ) . "</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
+);

src/wp-includes/block-patterns/three-buttons.php

@@ -0,0 +1,13 @@
+<?php
+/**
+ * Three Buttons block pattern.
+ *
+ * @package WordPress
+ */
+
+return array(
+	'title'         => __( 'Three buttons' ),
+	'content'       => "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"style\":{\"color\":{\"background\":\"#fe7983\"}},\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-text-color has-background\" style=\"background-color:#fe7983\">" . __( 'One' ) . "</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"borderRadius\":50,\"style\":{\"color\":{\"background\":\"#ffe77c\"}},\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-text-color has-background\" style=\"border-radius:50px;background-color:#ffe77c\">" . __( 'Two' ) . "</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"borderRadius\":50,\"style\":{\"color\":{\"background\":\"#b2e1c0\"}},\"textColor\":\"black\"} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-text-color has-background\" style=\"border-radius:50px;background-color:#b2e1c0\">" . __( 'Three' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
+	'viewportWidth' => 500,
+	'categories'    => array( 'buttons' ),
+);

src/wp-includes/block-patterns/two-buttons.php

@@ -0,0 +1,13 @@
+<?php
+/**
+ * Two Buttons block pattern.
+ *
+ * @package WordPress
+ */
+
+return array(
+	'title'         => __( 'Two buttons' ),
+	'content'       => "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">" . __( 'Button One' ) . "</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">" . __( 'Button Two' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
+	'viewportWidth' => 500,
+	'categories'    => array( 'buttons' ),
+);

src/wp-includes/block-patterns/two-images.php

@@ -0,0 +1,12 @@
+<?php
+/**
+ * Two images side by side block pattern.
+ *
+ * @package WordPress
+ */
+
+return array(
+	'title'      => __( 'Two images side by side' ),
+	'categories' => array( 'gallery' ),
+	'content'    => "<!-- wp:gallery {\"ids\":[null,null]} -->\n<figure class=\"wp-block-gallery columns-2 is-cropped\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img src=\"https://s.w.org/images/core/5.3/Glacial_lakes,_Bhutan.jpg\" alt=\"\" data-id=\"\"/></figure></li><li class=\"blocks-gallery-item\"><figure><img src=\"https://s.w.org/images/core/5.3/Sediment_off_the_Yucatan_Peninsula.jpg\" alt=\"\" data-id=\"\"/></figure></li></ul></figure>\n<!-- /wp:gallery -->",
+);

src/wp-includes/class-wp-block-patterns-registry.php

@@ -38,7 +38,7 @@ final class WP_Block_Patterns_Registry {
 	 */
 	public function register( $pattern_name, $pattern_properties ) {
 		if ( ! isset( $pattern_name ) || ! is_string( $pattern_name ) ) {
-			_doing_it_wrong( __METHOD__, s__( 'Pattern name must be a string.' ), '5.5.0' );
+			_doing_it_wrong( __METHOD__, __( 'Pattern name must be a string.' ), '5.5.0' );
 			return false;
 		}
 

src/wp-settings.php

@@ -286,6 +286,7 @@ require ABSPATH . WPINC . '/class-wp-block-list.php';
 require ABSPATH . WPINC . '/class-wp-block-parser.php';
 require ABSPATH . WPINC . '/blocks.php';
 require ABSPATH . WPINC . '/blocks/index.php';
+require ABSPATH . WPINC . '/block-patterns.php';
 
 $GLOBALS['wp_embed'] = new WP_Embed();