Block Pattern: Pros and Cons
Adds a two-column "Pros and cons" pattern with checkmark and cross lists, for reviews, comparisons and buying guides.
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' ) );
}
$list = function ( $items, $mark ) {
$html = '';
foreach ( $items as $item ) {
$html .= '<!-- wp:list-item --><li>' . $mark . ' ' . esc_html( $item ) . '</li><!-- /wp:list-item -->';
}
return '<!-- wp:list --><ul class="wp-block-list">' . $html . '</ul><!-- /wp:list -->';
};
$content = '<!-- wp:columns --><div class="wp-block-columns">'
. '<!-- wp:column --><div class="wp-block-column"><!-- wp:heading {"level":3} --><h3 class="wp-block-heading">Pros</h3><!-- /wp:heading -->' . $list( array( 'Easy to set up', 'Great value for money', 'Excellent support' ), '✔' ) . '</div><!-- /wp:column -->'
. '<!-- wp:column --><div class="wp-block-column"><!-- wp:heading {"level":3} --><h3 class="wp-block-heading">Cons</h3><!-- /wp:heading -->' . $list( array( 'No mobile app yet', 'Limited integrations' ), '✖' ) . '</div><!-- /wp:column -->'
. '</div><!-- /wp:columns -->';
register_block_pattern( 'wpide/pros-cons', array(
'title' => 'Pros and cons',
'description' => 'Two lists comparing advantages and drawbacks.',
'categories' => array( 'wpide-sections' ),
'keywords' => array( 'pros', 'cons', 'review', 'comparison' ),
'content' => $content,
) );
} );
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.