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

Feature: Automatically register block patterns located in the patterns directory #85

Closed
wants to merge 2 commits into from
Closed

Feature: Automatically register block patterns located in the patterns directory #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d6ca550
automatically register block patterns located in directory
fabiankaegy Feb 16, 2022
6422a25
update existing example of how to include patterns
fabiankaegy Feb 16, 2022
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
156 changes: 132 additions & 24 deletions themes/10up-theme/includes/blocks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ function setup() {
add_filter( 'block_categories_all', $n( 'blocks_categories' ), 10, 2 );

add_action( 'init', $n( 'register_theme_blocks' ) );

add_action( 'init', $n( 'block_patterns_and_categories' ) );
add_action( 'init', $n( 'register_theme_block_patterns' ) );
add_action( 'init', $n( 'register_block_pattern_categories' ) );

/*
If you are using the block library, remove the blocks you don't need.
Expand Down Expand Up @@ -109,37 +109,145 @@ function blocks_categories( $categories ) {
}

/**
* Manage block patterns and block pattern categories
* Manage block pattern categories
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/
*
* @return void
*/
function block_patterns_and_categories() {
/*
## Examples

// Register block pattern
register_block_pattern(
'tenup/block-pattern',
array(
'title' => __( 'Two buttons', 'tenup' ),
'description' => _x( 'Two horizontal buttons, the left button is filled in, and the right button is outlined.', 'Block pattern description', 'wpdocs-my-plugin' ),
'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\">" . esc_html__( 'Button One', 'wpdocs-my-plugin' ) . "</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\">" . esc_html__( 'Button Two', 'wpdocs-my-plugin' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
)
);

// Unregister a block pattern
unregister_block_pattern( 'tenup/block-pattern' );
function register_block_pattern_categories() {

// Register a block pattern category
register_block_pattern_category(
'client-name',
array( 'label' => __( 'Client Name', 'tenup' ) )
'10up-theme',
array( 'label' => __( '10up Theme', 'tenup' ) )
);
}

// Unregister a block pattern category
unregister_block_pattern('client-name')
/**
* Register theme block patterns
*/
function register_theme_block_patterns() {
$default_headers = array(
'title' => 'Pattern Name',
'description' => 'Description',
'viewportWidth' => 'Viewport Width',
'categories' => 'Categories',
'keywords' => 'Keywords',
'blockTypes' => 'Block Types',
);

*/
// Register patterns for the active theme, for both parent and child theme,
// if applicable.
foreach ( wp_get_active_and_valid_themes() as $theme ) {
$pattern_directory_path = $theme . '/patterns/';
if ( file_exists( $pattern_directory_path ) ) {
$files = glob( $pattern_directory_path . '*.html' );
if ( $files ) {
foreach ( $files as $file ) {
// Parse pattern slug from file name.
if ( ! preg_match( '#/(?P<slug>[A-z0-9_-]+)\.html$#', $file, $matches ) ) {
continue;
}
// Example name: 10up-theme/example-pattern.
$pattern_name = get_stylesheet() . '/' . $matches['slug'];

$pattern_options = get_file_data( $file, $default_headers );

// Title is a required property.
if ( ! $pattern_options['title'] ) {
continue;
}

// For properties of type array, parse data as comma-separated.
foreach ( array( 'categories', 'keywords', 'blockTypes' ) as $property ) {
$pattern_options[ $property ] = array_filter(
preg_split(
'/[\s,]+/',
(string) $pattern_options[ $property ]
)
);
}

// Parse properties of type int.
foreach ( array( 'viewportWidth' ) as $property ) {
$pattern_options[ $property ] = (int) $pattern_options[ $property ];
}

// Remove up empty values, so as not to override defaults.
foreach ( array_keys( $default_headers ) as $property ) {
if ( empty( $pattern_options[ $property ] ) ) {
unset( $pattern_options[ $property ] );
}
}

// The actual pattern is everything following the leading comment.
$raw_content = file_get_contents( $file );
$token = '-->';
$pattern_options['content'] = substr(
$raw_content,
strpos( $raw_content, $token ) + strlen( $token )
);
if ( ! $pattern_options['content'] ) {
continue;
}

register_block_pattern( $pattern_name, $pattern_options );
}
}
}
if ( file_exists( $pattern_directory_path ) ) {
$files = glob( $pattern_directory_path . '*.php' );
if ( $files ) {
foreach ( $files as $file ) {

// Parse pattern slug from file name.
if ( ! preg_match( '#/(?P<slug>[A-z0-9_-]+)\.php$#', $file, $matches ) ) {
continue;
}
// Example name: 10up-theme/example-pattern.
$pattern_name = get_stylesheet() . '/' . $matches['slug'];

$pattern_options = get_file_data( $file, $default_headers );

// Title is a required property.
if ( ! $pattern_options['title'] ) {
continue;
}

// For properties of type array, parse data as comma-separated.
foreach ( array( 'categories', 'keywords', 'blockTypes' ) as $property ) {
$pattern_options[ $property ] = array_filter(
preg_split(
'/[\s,]+/',
(string) $pattern_options[ $property ]
)
);
}

// Parse properties of type int.
foreach ( array( 'viewportWidth' ) as $property ) {
$pattern_options[ $property ] = (int) $pattern_options[ $property ];
}

// Remove up empty values, so as not to override defaults.
foreach ( array_keys( $default_headers ) as $property ) {
if ( empty( $pattern_options[ $property ] ) ) {
unset( $pattern_options[ $property ] );
}
}

// The actual pattern content is the output of the file.
ob_start();
include $file;
$pattern_options['content'] = ob_get_clean();
if ( ! $pattern_options['content'] ) {
continue;
}

register_block_pattern( $pattern_name, $pattern_options );
}
}
}
}
}
7 changes: 7 additions & 0 deletions themes/10up-theme/patterns/example-html-pattern.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<!--
Pattern Name: Example HTML Pattern
Categories: 10up-theme
-->
<!-- wp:heading -->
<h2>Example HTML Pattern</h2>
<!-- /wp:heading -->
12 changes: 12 additions & 0 deletions themes/10up-theme/patterns/example-php-pattern.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<?php
/**
* Pattern Name: Example PHP Pattern
* Categories: 10up-theme
*
* @package TenUpTheme
*/

?>
<!-- wp:heading -->
<h2>Example PHP Pattern</h2>
<!-- /wp:heading -->