Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Patterns]: Support the blockTypes prop for patterns fetched from Pattern Directory #47677

Merged
merged 3 commits into from
Feb 2, 2023
Merged

[Patterns]: Support the blockTypes prop for patterns fetched from Pattern Directory #47677

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3e2d823
[Patterns]: Support the `blockTypes` prop for patterns fetched from P…
ntsekouras Feb 2, 2023
06f6b16
update all remote calls
ntsekouras Feb 2, 2023
c52a76c
get registry once
ntsekouras Feb 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 147 additions & 0 deletions lib/compat/wordpress-6.2/block-patterns.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,3 +310,150 @@ 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();

foreach ( $patterns as $pattern ) {
$normalized_pattern = gutenberg_normalize_remote_pattern( $pattern );
$pattern_name = sanitize_title( $normalized_pattern['title'] );
$registry = WP_Block_Patterns_Registry::get_instance();
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
// 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();
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
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 );
}
}
}
6 changes: 3 additions & 3 deletions lib/compat/wordpress-6.2/class-gutenberg-rest-block-patterns-controller-6-2.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
40 changes: 40 additions & 0 deletions lib/compat/wordpress-6.2/rest-api.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved


/**
* 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 );
61 changes: 56 additions & 5 deletions phpunit/class-wp-rest-pattern-directory-controller-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
$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.
}

Expand Down
56 changes: 56 additions & 0 deletions phpunit/fixtures/pattern-directory/browse-all.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 -->"
}
]