Block Pattern: Six-Feature Grid
Adds a pattern with a heading and six short feature descriptions in two rows of three columns, for product and service overviews.
Opens WPIDE on
Code
add_action( 'init', function () {
if ( ! function_exists( 'register_block_pattern' ) ) {
return;
}
if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( 'wpide-sections' ) ) {
register_block_pattern_category( 'wpide-sections', array( 'label' => 'Site Sections' ) );
}
$features = array(
'Fast setup' => 'Be up and running in minutes, not days.',
'Secure by default' => 'Encrypted data and daily off-site backups.',
'Friendly support' => 'Real people answer within one business day.',
'Works everywhere' => 'Looks great on phones, tablets and desktops.',
'Fair pricing' => 'One simple plan, no hidden costs.',
'Easy to leave' => 'Export everything whenever you like.',
);
$rows = '';
foreach ( array_chunk( $features, 3, true ) as $chunk ) {
$rows .= '<!-- wp:columns --><div class="wp-block-columns">';
foreach ( $chunk as $title => $text ) {
$rows .= '<!-- wp:column --><div class="wp-block-column"><!-- wp:heading {"level":3} --><h3 class="wp-block-heading">' . esc_html( $title ) . '</h3><!-- /wp:heading --><!-- wp:paragraph --><p>' . esc_html( $text ) . '</p><!-- /wp:paragraph --></div><!-- /wp:column -->';
}
$rows .= '</div><!-- /wp:columns -->';
}
register_block_pattern( 'wpide/feature-grid', array(
'title' => 'Features: six-item grid',
'description' => 'Two rows of three short features.',
'categories' => array( 'wpide-sections' ),
'keywords' => array( 'features', 'benefits', 'grid' ),
'viewportWidth' => 1200,
'content' => '<!-- wp:group {"layout":{"type":"constrained"}} --><div class="wp-block-group"><!-- wp:heading {"textAlign":"center"} --><h2 class="wp-block-heading has-text-align-center">Why people choose us</h2><!-- /wp:heading -->' . $rows . '</div><!-- /wp:group -->',
) );
} );
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.