Load Block Patterns From a Folder of HTML Files
Registers every .html file in wp-content/patterns/ as a block pattern, using the file name as its title, so designers can add patterns by dropping in markup copied from the editor.
Opens WPIDE on
Code
// Folder with pattern files.
$wpide_pattern_dir = WP_CONTENT_DIR . '/patterns';
add_action( 'init', function () use ( $wpide_pattern_dir ) {
$files = glob( trailingslashit( $wpide_pattern_dir ) . '*.html' );
if ( ! $files ) {
return;
}
register_block_pattern_category( 'wpide-site', array( 'label' => 'Site patterns' ) );
foreach ( $files as $file ) {
$slug = sanitize_title( basename( $file, '.html' ) );
$content = (string) file_get_contents( $file );
if ( '' === trim( $content ) ) {
continue;
}
register_block_pattern( 'wpide-site/' . $slug, array(
'title' => ucwords( str_replace( '-', ' ', $slug ) ),
'content' => $content,
'categories' => array( 'wpide-site' ),
) );
}
} );Notes
Copy blocks in the editor (Options > Copy), paste them into a file such as hero-banner.html, and it appears under "Site patterns" in the inserter.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.