Skip to content

Commit

Permalink
Add Block Pattern Categories support (#22164)
Browse files Browse the repository at this point in the history
  • Loading branch information
youknowriad committed May 15, 2020
1 parent e4b6730 commit a105007
Show file tree
Hide file tree
Showing 16 changed files with 405 additions and 84 deletions.
44 changes: 39 additions & 5 deletions docs/designers-developers/developers/block-api/block-patterns.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,19 @@ Patterns are predefined block layouts, ready to insert and tweak.

**Note** Patterns are still under heavy development and the APIs are subject to change.

#### register_block_pattern
## Patterns Registration

### register_block_pattern

The editor comes with a list of built-in patterns. Theme and plugin authors can register addition custom patterns using the `register_block_pattern` function.

The `register_block_pattern` function receives the name of the pattern as the first argument and an array describing properties of the pattern as the second argument.

The properties of the style array must include `name` and `label`:
- `title`: A human-readable title for the pattern.
- `content`: Raw HTML content for the pattern.
The properties of the pattern include:
- `title` (required): A human-readable title for the pattern.
- `content` (required): Raw HTML content for the pattern.
- `categories`: A list of pattern categories used to group patterns. Patterns can be shown on multiple categories.
- `keywords`: Aliases or keywords that help users discover it while searching.

```php
register_block_pattern(
Expand All @@ -24,7 +28,7 @@ register_block_pattern(
);
```

#### unregister_block_pattern
### unregister_block_pattern

`unregister_block_pattern` allows unregistering a pattern previously registered on the server using `register_block_pattern`.

Expand All @@ -35,3 +39,33 @@ The following code sample unregisters the style named 'my-plugin/my-awesome-patt
```php
unregister_block_pattern( 'my-plugin/my-awesome-pattern' );
```

## Pattern Categories

Patterns can be grouped using categories. The block editor comes with bundled categories you can use on your custom patterns. You can also register your own pattern categories.

### register_block_pattern_category

The `register_block_pattern_category` function receives the name of the category as the first argument and an array describing properties of the category as the second argument.

The properties of the pattern categories include:
- `label` (required): A human-readable label for the pattern category.

```php
register_block_pattern_category(
'hero',
array( 'label' => __( 'Hero', 'my-plugin' ) )
);
```

### unregister_block_pattern_category

`unregister_block_pattern_category` allows unregistering a pattern category.

The function's argument is the name of the pattern category to unregister.

The following code sample unregisters the category named 'hero':

```php
unregister_block_pattern_category( 'hero' );
```
139 changes: 139 additions & 0 deletions lib/class-wp-block-pattern-categories-registry.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
<?php
/**
* Blocks API: WP_Block_Pattern_Categories_Registry class
*
* @package Gutenberg
*/

/**
* Class used for interacting with block pattern categories.
*/
final class WP_Block_Pattern_Categories_Registry {
/**
* Registered block pattern categories array.
*
* @var array
*/
private $registered_categories = array();

/**
* Container for the main instance of the class.
*
* @var WP_Block_Pattern_Categories_Registry|null
*/
private static $instance = null;

/**
* Registers a pattern category.
*
* @param string $category_name Pattern category name.
* @param array $category_properties Array containing the properties of the category: label.
* @return boolean True if the pattern was registered with success and false otherwise.
*/
public function register( $category_name, $category_properties ) {
if ( ! isset( $category_name ) || ! is_string( $category_name ) ) {
$message = __( 'Block pattern category name must be a string.', 'gutenberg' );
_doing_it_wrong( __METHOD__, $message, '8.1.0' );
return false;
}

$this->registered_categories[ $category_name ] = array_merge(
array( 'name' => $category_name ),
$category_properties
);

return true;
}

/**
* Unregisters a pattern category.
*
* @param string $category_name Pattern name including namespace.
* @return boolean True if the pattern was unregistered with success and false otherwise.
*/
public function unregister( $category_name ) {
if ( ! $this->is_registered( $category_name ) ) {
/* translators: 1: Block pattern name. */
$message = sprintf( __( 'Block pattern category "%1$s" not found.', 'gutenberg' ), $category_name );
_doing_it_wrong( __METHOD__, $message, '8.1.0' );
return false;
}

unset( $this->registered_categories[ $category_name ] );

return true;
}

/**
* Retrieves an array containing the properties of a registered pattern category.
*
* @param string $category_name Pattern category name.
* @return array Registered pattern properties.
*/
public function get_registered( $category_name ) {
if ( ! $this->is_registered( $category_name ) ) {
return null;
}

return $this->registered_categories[ $category_name ];
}

/**
* Retrieves all registered pattern categories.
*
* @return array Array of arrays containing the registered pattern categories properties.
*/
public function get_all_registered() {
return array_values( $this->registered_categories );
}

/**
* Checks if a pattern category is registered.
*
* @param string $category_name Pattern category name.
* @return bool True if the pattern category is registered, false otherwise.
*/
public function is_registered( $category_name ) {
return isset( $this->registered_categories[ $category_name ] );
}

/**
* Utility method to retrieve the main instance of the class.
*
* The instance will be created if it does not exist yet.
*
* @since 5.3.0
*
* @return WP_Block_Pattern_Categories_Registry The main instance.
*/
public static function get_instance() {
if ( null === self::$instance ) {
self::$instance = new self();
}

return self::$instance;
}
}

/**
* Registers a new pattern category.
*
* @param string $category_name Pattern category name.
* @param array $category_properties Array containing the properties of the category.
*
* @return boolean True if the pattern category was registered with success and false otherwise.
*/
function register_block_pattern_category( $category_name, $category_properties ) {
return WP_Block_Pattern_Categories_Registry::get_instance()->register( $category_name, $category_properties );
}

/**
* Unregisters a pattern category.
*
* @param string $category_name Pattern category name including namespace.
*
* @return boolean True if the pattern category was unregistered with success and false otherwise.
*/
function unregister_block_pattern_category( $category_name ) {
return WP_Block_Pattern_Categories_Registry::get_instance()->unregister( $category_name );
}
22 changes: 22 additions & 0 deletions lib/client-assets.php
Original file line number Diff line number Diff line change
Expand Up @@ -649,6 +649,15 @@ function gutenberg_extend_settings_block_patterns( $settings ) {
$settings['__experimentalBlockPatterns']
);

if ( empty( $settings['__experimentalBlockPatternCategories'] ) ) {
$settings['__experimentalBlockPatternCategories'] = array();
}

$settings['__experimentalBlockPatternCategories'] = array_merge(
WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered(),
$settings['__experimentalBlockPatternCategories']
);

return $settings;
}
add_filter( 'block_editor_settings', 'gutenberg_extend_settings_block_patterns', 0 );
Expand Down Expand Up @@ -695,3 +704,16 @@ function gutenberg_extend_settings_custom_units( $settings ) {
register_block_pattern( 'core/hero-right-column', gutenberg_load_block_pattern( 'hero-right-column' ) );
register_block_pattern( 'core/testimonials', gutenberg_load_block_pattern( 'testimonials' ) );
}

/*
* Register default pattern categories if not registered in Core already.
*/
if ( class_exists( 'WP_Block_Pattern_Categories_Registry' ) ) {
register_block_pattern_category( 'text', array( 'label' => __( 'Text', 'gutenberg' ) ) );
register_block_pattern_category( 'hero', array( 'label' => __( 'Hero', 'gutenberg' ) ) );
register_block_pattern_category( 'columns', array( 'label' => __( 'Columns', 'gutenberg' ) ) );
register_block_pattern_category( 'buttons', array( 'label' => __( 'Buttons', 'gutenberg' ) ) );
register_block_pattern_category( 'gallery', array( 'label' => __( 'Gallery', 'gutenberg' ) ) );
register_block_pattern_category( 'features', array( 'label' => __( 'Features', 'gutenberg' ) ) );
register_block_pattern_category( 'testimonials', array( 'label' => __( 'Testimonials', 'gutenberg' ) ) );
}
4 changes: 4 additions & 0 deletions lib/load.php
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,10 @@ function gutenberg_is_experiment_enabled( $name ) {
require dirname( __FILE__ ) . '/class-wp-block-patterns-registry.php';
}

if ( ! class_exists( 'WP_Block_Pattern_Categories_Registry' ) ) {
require dirname( __FILE__ ) . '/class-wp-block-pattern-categories-registry.php';
}

if ( ! class_exists( 'WP_Block' ) ) {
require dirname( __FILE__ ) . '/class-wp-block.php';
}
Expand Down
5 changes: 3 additions & 2 deletions lib/patterns/cover-abc.php
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
*/

return array(
'title' => __( 'Cover', 'gutenberg' ),
'content' => "<!-- wp:cover {\"minHeight\":470,\"gradient\":\"pale-ocean\",\"align\":\"wide\"} -->\n<div class=\"wp-block-cover alignwide has-background-dim has-pale-ocean-gradient-background\" style=\"min-height:470px\"><div class=\"wp-block-cover__inner-container\"><!-- wp:paragraph {\"align\":\"center\",\"placeholder\":\"Write title…\",\"customTextColor\":\"#114050\",\"customFontSize\":220} -->\n<p style=\"color:#114050;font-size:220px\" class=\"has-text-color has-text-align-center\">" . _x( 'abc!', 'pattern', 'gutenberg' ) . "</p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:cover -->",
'title' => __( 'Cover', 'gutenberg' ),
'categories' => array( 'hero' ),
'content' => "<!-- wp:cover {\"minHeight\":470,\"gradient\":\"pale-ocean\",\"align\":\"wide\"} -->\n<div class=\"wp-block-cover alignwide has-background-dim has-pale-ocean-gradient-background\" style=\"min-height:470px\"><div class=\"wp-block-cover__inner-container\"><!-- wp:paragraph {\"align\":\"center\",\"placeholder\":\"Write title…\",\"customTextColor\":\"#114050\",\"customFontSize\":220} -->\n<p style=\"color:#114050;font-size:220px\" class=\"has-text-color has-text-align-center\">" . _x( 'abc!', 'pattern', 'gutenberg' ) . "</p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:cover -->",
);
5 changes: 3 additions & 2 deletions lib/patterns/hero-right-column.php
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
*/

return array(
'title' => __( 'Hero Right Column', 'gutenberg' ),
'content' => "<!-- wp:group {\"align\":\"wide\"} -->\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container\"><!-- wp:group {\"align\":\"wide\"} -->\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container\"><!-- wp:cover {\"gradient\":\"blush-light-purple\",\"align\":\"wide\"} -->\n<div class=\"wp-block-cover alignwide has-background-dim has-background-gradient has-blush-light-purple-gradient-background\"><div class=\"wp-block-cover__inner-container\"><!-- wp:paragraph {\"align\":\"center\",\"placeholder\":\"Write title…\",\"style\":{\"color\":{\"text\":\"#13394a\"},\"typography\":{\"fontSize\":60}}} -->\n<p class=\"has-text-align-center has-text-color\" style=\"font-size:60px;color:#13394a\"><strong>Easy &amp; Accessible</strong></p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:cover --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:columns {\"align\":\"full\"} -->\n<div class=\"wp-block-columns alignfull\"><!-- wp:column -->\n<div class=\"wp-block-column\"></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:spacer {\"height\":30} -->\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:paragraph -->\n<p>Extend it with over 54,000 plugins to help your website meet your needs. Hundreds of thousands of developers and site owners trust it worldwide. Add an online store, galleries, mailing lists, forums, analytics, and much more. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Hundreds of thousands of developers and site owners trust it worldwide. Add an online store, galleries, mailing lists, forums, analytics, and much more.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:spacer {\"height\":20} -->\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"borderRadius\":50,\"style\":{\"color\":{\"text\":\"#ffffff\",\"background\":\"#13394a\"}},\"className\":\"is-style-fill\"} -->\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:50px;background-color:#13394a;color:#ffffff\">Learn more</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->",
'title' => __( 'Hero Right Column', 'gutenberg' ),
'categories' => array( 'hero', 'columns' ),
'content' => "<!-- wp:group {\"align\":\"wide\"} -->\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container\"><!-- wp:group {\"align\":\"wide\"} -->\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container\"><!-- wp:cover {\"gradient\":\"blush-light-purple\",\"align\":\"wide\"} -->\n<div class=\"wp-block-cover alignwide has-background-dim has-background-gradient has-blush-light-purple-gradient-background\"><div class=\"wp-block-cover__inner-container\"><!-- wp:paragraph {\"align\":\"center\",\"placeholder\":\"Write title…\",\"style\":{\"color\":{\"text\":\"#13394a\"},\"typography\":{\"fontSize\":60}}} -->\n<p class=\"has-text-align-center has-text-color\" style=\"font-size:60px;color:#13394a\"><strong>Easy &amp; Accessible</strong></p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:cover --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:columns {\"align\":\"full\"} -->\n<div class=\"wp-block-columns alignfull\"><!-- wp:column -->\n<div class=\"wp-block-column\"></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:spacer {\"height\":30} -->\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:paragraph -->\n<p>Extend it with over 54,000 plugins to help your website meet your needs. Hundreds of thousands of developers and site owners trust it worldwide. Add an online store, galleries, mailing lists, forums, analytics, and much more. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Hundreds of thousands of developers and site owners trust it worldwide. Add an online store, galleries, mailing lists, forums, analytics, and much more.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:spacer {\"height\":20} -->\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"borderRadius\":50,\"style\":{\"color\":{\"text\":\"#ffffff\",\"background\":\"#13394a\"}},\"className\":\"is-style-fill\"} -->\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:50px;background-color:#13394a;color:#ffffff\">Learn more</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->",
);
5 changes: 3 additions & 2 deletions lib/patterns/hero-two-columns.php
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
*/

return array(
'title' => __( 'Hero Two Columns', 'gutenberg' ),
'content' => "<!-- wp:group {\"customBackgroundColor\":\"#d1cfcb\",\"align\":\"wide\"} -->\n<div class=\"wp-block-group alignwide has-background\" style=\"background-color:#d1cfcb\"><div class=\"wp-block-group__inner-container\"><!-- wp:paragraph {\"align\":\"center\",\"customTextColor\":\"#3c0c0f\"} -->\n<p style=\"color:#3c0c0f\" class=\"has-text-color has-text-align-center\"><em>Enjoy a wide variety of</em></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"customTextColor\":\"#830c08\",\"customFontSize\":60} -->\n<p style=\"color:#830c08;font-size:60px\" class=\"has-text-color has-text-align-center\"><strong>Custom Designs</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:columns {\"align\":\"full\"} -->\n<div class=\"wp-block-columns alignfull\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph {\"customTextColor\":\"#000000\"} -->\n<p style=\"color:#000000\" class=\"has-text-color\">Extend it with over 54,000 plugins to help your website meet your needs. Add an online store, galleries, mailing lists, forums, analytics, and much more. Hundreds of thousands of developers and site owners trust it worldwide.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Hundreds of thousands of developers and site owners trust it worldwide. Extend it with over 54,000 plugins to help your website meet your needs. Add an online store, galleries, mailing lists, forums, analytics, and much more.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->",
'title' => __( 'Hero Two Columns', 'gutenberg' ),
'categories' => array( 'columns' ),
'content' => "<!-- wp:group {\"customBackgroundColor\":\"#d1cfcb\",\"align\":\"wide\"} -->\n<div class=\"wp-block-group alignwide has-background\" style=\"background-color:#d1cfcb\"><div class=\"wp-block-group__inner-container\"><!-- wp:paragraph {\"align\":\"center\",\"customTextColor\":\"#3c0c0f\"} -->\n<p style=\"color:#3c0c0f\" class=\"has-text-color has-text-align-center\"><em>Enjoy a wide variety of</em></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"customTextColor\":\"#830c08\",\"customFontSize\":60} -->\n<p style=\"color:#830c08;font-size:60px\" class=\"has-text-color has-text-align-center\"><strong>Custom Designs</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:columns {\"align\":\"full\"} -->\n<div class=\"wp-block-columns alignfull\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph {\"customTextColor\":\"#000000\"} -->\n<p style=\"color:#000000\" class=\"has-text-color\">Extend it with over 54,000 plugins to help your website meet your needs. Add an online store, galleries, mailing lists, forums, analytics, and much more. Hundreds of thousands of developers and site owners trust it worldwide.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph -->\n<p>Hundreds of thousands of developers and site owners trust it worldwide. Extend it with over 54,000 plugins to help your website meet your needs. Add an online store, galleries, mailing lists, forums, analytics, and much more.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->",
);
Loading

0 comments on commit a105007

Please sign in to comment.