[Patterns]: Support the blockTypes prop for patterns fetched from P…

…attern Directory (#47677) * [Patterns]: Support the `blockTypes` prop for patterns fetched from Pattern Directory * update all remote calls * get registry once
WordPress · Feb 3, 2023 · f0c0581 · f0c0581
1 parent 34ccbd3
commit f0c0581
Show file tree

Hide file tree

Showing 5 changed files with 301 additions and 8 deletions.
diff --git a/lib/compat/wordpress-6.2/block-patterns.php b/lib/compat/wordpress-6.2/block-patterns.php
@@ -310,3 +310,149 @@ function gutenberg_register_theme_block_patterns() {
 }
 remove_action( 'init', '_register_theme_block_patterns' );
 add_action( 'init', 'gutenberg_register_theme_block_patterns' );
+
+/**
+ * Normalize the pattern from the API (snake_case) to the format expected by `register_block_pattern` (camelCase).
+ *
+ * @since 6.2.0
+ *
+ * @param array $pattern Pattern as returned from the Pattern Directory API.
+ */
+function gutenberg_normalize_remote_pattern( $pattern ) {
+	if ( isset( $pattern['block_types'] ) ) {
+		$pattern['blockTypes'] = $pattern['block_types'];
+		unset( $pattern['block_types'] );
+	}
+
+	if ( isset( $pattern['viewport_width'] ) ) {
+		$pattern['viewportWidth'] = $pattern['viewport_width'];
+		unset( $pattern['viewport_width'] );
+	}
+
+	return (array) $pattern;
+}
+
+/**
+ * Register Core's official patterns from wordpress.org/patterns.
+ *
+ * @since 5.8.0
+ * @since 5.9.0 The $current_screen argument was removed.
+ * @since 6.2.0 Normalize the pattern from the API (snake_case) to the format expected by `register_block_pattern` (camelCase).
+ *
+ * @param WP_Screen $deprecated Unused. Formerly the screen that the current request was triggered from.
+ */
+function gutenberg_load_remote_block_patterns( $deprecated = null ) {
+	if ( ! empty( $deprecated ) ) {
+		_deprecated_argument( __FUNCTION__, '5.9.0' );
+		$current_screen = $deprecated;
+		if ( ! $current_screen->is_block_editor ) {
+			return;
+		}
+	}
+
+	$supports_core_patterns = get_theme_support( 'core-block-patterns' );
+
+	/**
+	 * Filter to disable remote block patterns.
+	 *
+	 * @since 5.8.0
+	 *
+	 * @param bool $should_load_remote
+	 */
+	$should_load_remote = apply_filters( 'should_load_remote_block_patterns', true );
+
+	if ( $supports_core_patterns && $should_load_remote ) {
+		$request         = new WP_REST_Request( 'GET', '/wp/v2/pattern-directory/patterns' );
+		$core_keyword_id = 11; // 11 is the ID for "core".
+		$request->set_param( 'keyword', $core_keyword_id );
+		$response = rest_do_request( $request );
+		if ( $response->is_error() ) {
+			return;
+		}
+		$patterns = $response->get_data();
+
+		foreach ( $patterns as $pattern ) {
+			$normalized_pattern = gutenberg_normalize_remote_pattern( $pattern );
+			$pattern_name       = 'core/' . sanitize_title( $normalized_pattern['title'] );
+			register_block_pattern( $pattern_name, (array) $normalized_pattern );
+		}
+	}
+}
+
+/**
+ * Register `Featured` (category) patterns from wordpress.org/patterns.
+ *
+ * @since 5.9.0
+ * @since 6.2.0 Normalize the pattern from the API (snake_case) to the format expected by `register_block_pattern` (camelCase).
+ */
+function gutenberg_load_remote_featured_patterns() {
+	$supports_core_patterns = get_theme_support( 'core-block-patterns' );
+
+	/** This filter is documented in wp-includes/block-patterns.php */
+	$should_load_remote = apply_filters( 'should_load_remote_block_patterns', true );
+
+	if ( ! $should_load_remote || ! $supports_core_patterns ) {
+		return;
+	}
+
+	$request         = new WP_REST_Request( 'GET', '/wp/v2/pattern-directory/patterns' );
+	$featured_cat_id = 26; // This is the `Featured` category id from pattern directory.
+	$request->set_param( 'category', $featured_cat_id );
+	$response = rest_do_request( $request );
+	if ( $response->is_error() ) {
+		return;
+	}
+	$patterns = $response->get_data();
+	$registry = WP_Block_Patterns_Registry::get_instance();
+	foreach ( $patterns as $pattern ) {
+		$normalized_pattern = gutenberg_normalize_remote_pattern( $pattern );
+		$pattern_name       = sanitize_title( $normalized_pattern['title'] );
+		// Some patterns might be already registered as core patterns with the `core` prefix.
+		$is_registered = $registry->is_registered( $pattern_name ) || $registry->is_registered( "core/$pattern_name" );
+		if ( ! $is_registered ) {
+			register_block_pattern( $pattern_name, (array) $normalized_pattern );
+		}
+	}
+}
+
+/**
+ * Registers patterns from Pattern Directory provided by a theme's
+ * `theme.json` file.
+ *
+ * @since 6.0.0
+ * @since 6.2.0 Normalize the pattern from the API (snake_case) to the format expected by `register_block_pattern` (camelCase).
+ * @access private
+ */
+function gutenberg_register_remote_theme_patterns() {
+	/** This filter is documented in wp-includes/block-patterns.php */
+	if ( ! apply_filters( 'should_load_remote_block_patterns', true ) ) {
+		return;
+	}
+
+	if ( ! wp_theme_has_theme_json() ) {
+		return;
+	}
+
+	$pattern_settings = WP_Theme_JSON_Resolver::get_theme_data()->get_patterns();
+	if ( empty( $pattern_settings ) ) {
+		return;
+	}
+
+	$request         = new WP_REST_Request( 'GET', '/wp/v2/pattern-directory/patterns' );
+	$request['slug'] = $pattern_settings;
+	$response        = rest_do_request( $request );
+	if ( $response->is_error() ) {
+		return;
+	}
+	$patterns          = $response->get_data();
+	$patterns_registry = WP_Block_Patterns_Registry::get_instance();
+	foreach ( $patterns as $pattern ) {
+		$normalized_pattern = gutenberg_normalize_remote_pattern( $pattern );
+		$pattern_name       = sanitize_title( $normalized_pattern['title'] );
+		// Some patterns might be already registered as core patterns with the `core` prefix.
+		$is_registered = $patterns_registry->is_registered( $pattern_name ) || $patterns_registry->is_registered( "core/$pattern_name" );
+		if ( ! $is_registered ) {
+			register_block_pattern( $pattern_name, (array) $normalized_pattern );
+		}
+	}
+}
diff --git a/lib/compat/wordpress-6.2/class-gutenberg-rest-block-patterns-controller-6-2.php b/lib/compat/wordpress-6.2/class-gutenberg-rest-block-patterns-controller-6-2.php
@@ -188,9 +188,9 @@ public function register_routes() {
 	public function get_items( $request ) {
 		if ( ! $this->remote_patterns_loaded ) {
 			// Load block patterns from w.org.
-			_load_remote_block_patterns(); // Patterns with the `core` keyword.
-			_load_remote_featured_patterns(); // Patterns in the `featured` category.
-			_register_remote_theme_patterns(); // Patterns requested by current theme.
+			gutenberg_load_remote_block_patterns(); // Patterns with the `core` keyword.
+			gutenberg_load_remote_featured_patterns(); // Patterns in the `featured` category.
+			gutenberg_register_remote_theme_patterns(); // Patterns requested by current theme.
 
 			$this->remote_patterns_loaded = true;
 		}

diff --git a/lib/compat/wordpress-6.2/rest-api.php b/lib/compat/wordpress-6.2/rest-api.php
@@ -108,3 +108,43 @@ function gutenberg_modify_rest_sidebars_response( $response ) {
 	return $response;
 }
 add_filter( 'rest_prepare_sidebar', 'gutenberg_modify_rest_sidebars_response' );
+
+
+/**
+ * Add the `block_types` value to the `pattern-directory-item` schema.
+ *
+ * @since 6.2.0 Added 'block_types' property.
+ */
+function add_block_pattern_block_types_schema() {
+	register_rest_field(
+		'pattern-directory-item',
+		'block_types',
+		array(
+			'schema' => array(
+				'description' => __( 'The block types which can use this pattern.', 'gutenberg' ),
+				'type'        => 'array',
+				'uniqueItems' => true,
+				'items'       => array( 'type' => 'string' ),
+				'context'     => array( 'view', 'embed' ),
+			),
+		)
+	);
+}
+add_filter( 'rest_api_init', 'add_block_pattern_block_types_schema' );
+
+
+/**
+ * Add the `block_types` value into the API response.
+ *
+ * @since 6.2.0 Added 'block_types' property.
+ *
+ * @param WP_REST_Response $response    The response object.
+ * @param object           $raw_pattern The unprepared pattern.
+ */
+function filter_block_pattern_response( $response, $raw_pattern ) {
+	$data                = $response->get_data();
+	$data['block_types'] = array_map( 'sanitize_text_field', $raw_pattern->meta->wpop_block_types );
+	$response->set_data( $data );
+	return $response;
+}
+add_filter( 'rest_prepare_block_pattern', 'filter_block_pattern_response', 10, 2 );
diff --git a/phpunit/class-wp-rest-pattern-directory-controller-test.php b/phpunit/class-wp-rest-pattern-directory-controller-test.php
@@ -212,23 +212,74 @@ function ( $preempt, $args, $url ) {
 	}
 
 	/**
-	 * @doesNotPerformAssertions
+	 * @covers WP_REST_Pattern_Directory_Controller::prepare_item_for_response
+	 *
+	 * @since 5.8.0
+	 * @since 6.2.0 Added `block_types` property.
 	 */
-	public function test_context_param() {
-		// Covered by the core test.
+	public function test_prepare_item() {
+		$raw_patterns                 = json_decode( self::get_raw_response( 'browse-all' ) );
+		$raw_patterns[0]->extra_field = 'this should be removed';
+
+		$prepared_pattern = static::$controller->prepare_response_for_collection(
+			static::$controller->prepare_item_for_response( $raw_patterns[0], new WP_REST_Request() )
+		);
+
+		$this->assertPatternMatchesSchema( $prepared_pattern );
+		$this->assertArrayNotHasKey( 'extra_field', $prepared_pattern );
+	}
+
+	/**
+	 * Asserts that the pattern matches the expected response schema.
+	 *
+	 * @param WP_REST_Response[] $pattern An individual pattern from the REST API response.
+	 */
+	public function assertPatternMatchesSchema( $pattern ) {
+		$schema     = static::$controller->get_item_schema();
+		$pattern_id = isset( $pattern->id ) ? $pattern->id : '{pattern ID is missing}';
+
+		$this->assertTrue(
+			rest_validate_value_from_schema( $pattern, $schema ),
+			"Pattern ID `$pattern_id` doesn't match the response schema."
+		);
+
+		$this->assertSame(
+			array_keys( $schema['properties'] ),
+			array_keys( $pattern ),
+			"Pattern ID `$pattern_id` doesn't contain all of the fields expected from the schema."
+		);
+	}
+
+	/**
+	 * Get a mocked raw response from api.wordpress.org.
+	 *
+	 * @return string
+	 */
+	private static function get_raw_response( $action ) {
+		$fixtures_dir = __DIR__ . '/fixtures/pattern-directory';
+
+		switch ( $action ) {
+			default:
+			case 'browse-all':
+				// Response from https://api.wordpress.org/patterns/1.0/.
+				$response = file_get_contents( $fixtures_dir . '/browse-all.json' );
+				break;
+		}
+
+		return $response;
 	}
 
 	/**
 	 * @doesNotPerformAssertions
 	 */
-	public function test_get_items() {
+	public function test_context_param() {
 		// Covered by the core test.
 	}
 
 	/**
 	 * @doesNotPerformAssertions
 	 */
-	public function test_prepare_item() {
+	public function test_get_items() {
 		// Covered by the core test.
 	}
 

diff --git a/phpunit/fixtures/pattern-directory/browse-all.json b/phpunit/fixtures/pattern-directory/browse-all.json
@@ -0,0 +1,56 @@
+[
+	{
+		"id": 31,
+		"title": { "rendered": "Heading and paragraph" },
+		"content": {
+			"rendered": "\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"has-large-font-size\"><span style=\"color:#ba0c49\" class=\"has-inline-color\"><strong>2</strong>.</span><br>Which treats of the first sally the ingenious Don Quixote made from home</h2>\n\n\n\n<p>These preliminaries settled, he did not care to put off any longer the execution of his design, urged on to it by the thought of all the world was losing by his delay, seeing what wrongs he intended to right, grievances to redress, injustices to repair, abuses to remove, and duties to discharge.</p>\n</div></div>\n",
+			"protected": false
+		},
+		"meta": {
+			"spay_email": "",
+			"wpop_description": "A heading preceded by a chapter number, and followed by a paragraph.",
+			"wpop_keywords": "blog post",
+			"wpop_viewport_width": 1000,
+			"wpop_block_types": [ "core/heading" ]
+		},
+		"category_slugs": [ "text" ],
+		"keyword_slugs": [ "core" ],
+		"pattern_content": "<!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"fontSize\":\"large\"} -->\n<h2 class=\"has-large-font-size\"><span style=\"color:#ba0c49\" class=\"has-inline-color\"><strong>2</strong>.</span><br>Which treats of the first sally the ingenious Don Quixote made from home</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>These preliminaries settled, he did not care to put off any longer the execution of his design, urged on to it by the thought of all the world was losing by his delay, seeing what wrongs he intended to right, grievances to redress, injustices to repair, abuses to remove, and duties to discharge.</p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:group -->"
+	},
+	{
+		"id": 25,
+		"title": { "rendered": "Large header with a heading" },
+		"content": {
+			"rendered": "\n<div class=\"wp-block-cover alignwide has-background-dim-20 has-background-dim is-position-center-center\" style=\"background-image:url(https://s.w.org/images/core/5.5/don-quixote-06.jpg);min-height:375px;background-position:40% 26%\"><div class=\"wp-block-cover__inner-container\">\n<p class=\"has-text-align-center has-text-color\" style=\"color:#fffffa;font-size:74px;line-height:1.1\"><strong>Don Quixote</strong></p>\n</div></div>\n",
+			"protected": false
+		},
+		"meta": {
+			"spay_email": "",
+			"wpop_description": "A large hero section with an example background image and a heading in the center.",
+			"wpop_keywords": "header, hero",
+			"wpop_viewport_width": 1000,
+			"wpop_block_types": []
+		},
+		"category_slugs": [ "header" ],
+		"keyword_slugs": [ "core" ],
+		"pattern_content": "<!-- wp:cover {\"url\":\"https:\\/\\/s.w.org\\/images\\/core\\/5.5\\/don-quixote-06.jpg\",\"id\":165,\"dimRatio\":15,\"focalPoint\":{\"x\":\"0.40\",\"y\":\"0.26\"},\"minHeight\":375,\"minHeightUnit\":\"px\",\"contentPosition\":\"center center\",\"align\":\"wide\",\"className\":\"is-position-center-center\"} -->\n<div class=\"wp-block-cover alignwide has-background-dim-20 has-background-dim is-position-center-center\" style=\"background-image:url(https://s.w.org/images/core/5.5/don-quixote-06.jpg);min-height:375px;background-position:40% 26%\"><div class=\"wp-block-cover__inner-container\"><!-- wp:paragraph {\"align\":\"center\",\"placeholder\":\"Write title\\u2026\",\"style\":{\"typography\":{\"fontSize\":74,\"lineHeight\":\"1.1\"},\"color\":{\"text\":\"#fffffa\"}}} -->\n<p class=\"has-text-align-center has-text-color\" style=\"color:#fffffa;font-size:74px;line-height:1.1\"><strong>Don Quixote</strong></p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:cover -->"
+	},
+	{
+		"id": 26,
+		"title": { "rendered": "Large header with a heading and a button" },
+		"content": {
+			"rendered": "\n<div class=\"wp-block-cover alignwide has-background-dim has-background-gradient is-position-center-center\" style=\"background:linear-gradient(135deg,rgb(249,72,72) 1%,rgb(179,22,22) 100%);min-height:575px\"><div class=\"wp-block-cover__inner-container\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\" style=\"flex-basis:12%\">\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n</div>\n\n\n\n<div class=\"wp-block-column\">\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#fffffa;font-size:68px;line-height:1.2\"><strong>Thou hast seen</strong><br><strong>nothing yet</strong></p>\n\n\n\n<div class=\"wp-block-buttons\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:3px;background-color:#fffffa;color:#00000a\">Read now</a></div>\n</div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n</div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:12%\">\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n</div>\n</div>\n</div></div>\n",
+			"protected": false
+		},
+		"meta": {
+			"spay_email": "",
+			"wpop_description": "A large hero section with a bright gradient background, a big heading and a filled button.",
+			"wpop_keywords": "call to action, hero section",
+			"wpop_viewport_width": 1000,
+			"wpop_block_types": []
+		},
+		"category_slugs": [ "header" ],
+		"keyword_slugs": [ "core" ],
+		"pattern_content": "<!-- wp:cover {\"minHeight\":575,\"minHeightUnit\":\"px\",\"customGradient\":\"linear-gradient(135deg,rgb(249,72,72) 1%,rgb(179,22,22) 100%)\",\"contentPosition\":\"center center\",\"align\":\"wide\",\"className\":\"is-position-center-center\"} -->\n<div class=\"wp-block-cover alignwide has-background-dim has-background-gradient is-position-center-center\" style=\"background:linear-gradient(135deg,rgb(249,72,72) 1%,rgb(179,22,22) 100%);min-height:575px\"><div class=\"wp-block-cover__inner-container\"><!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column {\"width\":\"12%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:12%\"><!-- wp:spacer -->\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:spacer -->\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:paragraph {\"align\":\"left\",\"placeholder\":\"Write title\\u2026\",\"style\":{\"typography\":{\"fontSize\":68,\"lineHeight\":\"1.2\"},\"color\":{\"text\":\"#fffffa\"}}} -->\n<p class=\"has-text-align-left has-text-color\" style=\"color:#fffffa;font-size:68px;line-height:1.2\"><strong>Thou hast seen</strong><br><strong>nothing yet</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"borderRadius\":3,\"style\":{\"color\":{\"background\":\"#fffffa\",\"text\":\"#00000a\"}}} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:3px;background-color:#fffffa;color:#00000a\">Read now</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:spacer -->\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":\"12%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:12%\"><!-- wp:spacer -->\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:cover -->"
+	}
+]