[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$ffK-faB1-lyAOXQUIn__bgDLN69Qh07pkhnPLhws-Stc":3},{"slug":4,"display_name":5,"profile_url":6,"plugin_count":7,"total_installs":8,"avg_security_score":9,"avg_patch_time_days":10,"trust_score":9,"computed_at":11,"plugins":12},"mr2p","Phi Phan","https:\u002F\u002Fprofiles.wordpress.org\u002Fmr2p\u002F",8,26600,100,6,"2026-04-04T03:46:28.782Z",[13,39,58,79,96,114,129,143],{"slug":14,"name":15,"version":16,"author":5,"author_profile":6,"description":17,"short_description":18,"active_installs":19,"downloaded":20,"rating":9,"num_ratings":21,"last_updated":22,"tested_up_to":23,"requires_at_least":24,"requires_php":25,"tags":26,"homepage":32,"download_link":33,"security_score":34,"vuln_count":35,"unpatched_count":36,"last_vuln_date":37,"fetched_at":38},"display-a-meta-field-as-block","Meta Field Block","1.5.2","\u003Cp>This single-block plugin allows you to display a meta field or a custom field as a block on the front end. It supports custom fields for posts, terms, and users. It can be nested inside a parent block that has \u003Ccode>postId\u003C\u002Fcode> and \u003Ccode>postType\u003C\u002Fcode> context, such as \u003Ccode>Query Block\u003C\u002Fcode>, \u003Ccode>WooCommerce Product Collection\u003C\u002Fcode>, or used as a stand-alone block.\u003C\u002Fp>\n\u003Cp>You can display any field whose value can be retrieved by the core API (\u003Ca href=\"https:\u002F\u002Fdeveloper.wordpress.org\u002Freference\u002Ffunctions\u002Fget_post_meta\u002F\" rel=\"nofollow ugc\">get_post_meta\u003C\u002Fa>, \u003Ca href=\"https:\u002F\u002Fdeveloper.wordpress.org\u002Freference\u002Ffunctions\u002Fget_term_meta\u002F\" rel=\"nofollow ugc\">get_term_meta\u003C\u002Fa>, \u003Ca href=\"https:\u002F\u002Fdeveloper.wordpress.org\u002Freference\u002Ffunctions\u002Fget_user_meta\u002F\" rel=\"nofollow ugc\">get_user_meta\u003C\u002Fa>) and is a string or can be converted to a string. To display the field value in the Block Editor, it has to be accessible via the REST API or have the field type set to \u003Ccode>dynamic\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>You can also display custom fields created by the \u003Ca href=\"https:\u002F\u002Fwww.advancedcustomfields.com\u002F\" rel=\"nofollow ugc\">Advanced Custom Fields\u003C\u002Fa> or \u003Ca href=\"https:\u002F\u002Fmetabox.io\u002F\" rel=\"nofollow ugc\">Meta Box\u003C\u002Fa> plugin  explicitly. It supports all \u003Ca href=\"https:\u002F\u002Fwww.advancedcustomfields.com\u002Fresources\u002F#field-types\" rel=\"nofollow ugc\">ACF field types\u003C\u002Fa> and \u003Ca href=\"https:\u002F\u002Fdocs.metabox.io\u002Ffields\" rel=\"nofollow ugc\">Meta Box field types\u003C\u002Fa> whose values are strings or can be converted to strings. Some other ACF complex fields such as Image, Link, Page Link, True False, Checkbox, Select, Radio, Button Group, Taxonomy, User, Post Object and Relationship field types as well as Meta Box fields such as Select, Checkbox, Radio, Image, Video, Taxonomy, User, Post field types are also supported in basic formats.\u003C\u002Fp>\n\u003Cp>This plugin also provides developer-friendly hook APIs that allow you to easily customize the output of the block, display complex data type fields, or use the block as a placeholder to display any kind of content with \u003Ccode>object_id\u003C\u002Fcode> and \u003Ccode>object_type\u003C\u002Fcode> as context parameters.\u003C\u002Fp>\n\u003Cp>An edge case where this block is really helpful is when you need to get the correct \u003Ccode>post_id\u003C\u002Fcode> in your shortcode when you use it in a Query Loop. In that case, you can set the field type as \u003Ccode>dynamic\u003C\u002Fcode> and input your shortcode in the field name. The block will display it correctly on both the front end and the editor. Alternatively, if you only want to see the preview of your shortcode in the editor, you can also use this block as a better version of the \u003Ccode>core\u002Fshortcode\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>To quickly learn how this block displays custom fields, watch the short guide (for MFB version 1.3.4) by Paul Charlton from WPTuts. The video focuses on the Advanced Custom Fields plugin, but you can use a similar approach to display fields from other frameworks like Meta Box.\u003C\u002Fp>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002F-WusSXKaNt4?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Ch4>Links\u003C\u002Fh4>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fmetafieldblock.com?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=Website\" rel=\"nofollow ugc\">Website\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fmetafieldblock.com\u002Fhow-to-display-wordpress-custom-fields\u002F?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=Website%20How%20it%20works\" rel=\"nofollow ugc\">How it works & tutorials\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fmetafieldblock.com\u002Fpro?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=MFB%20Pro\" rel=\"nofollow ugc\">MFB PRO\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch4>What is the HTML output of a custom field?\u003C\u002Fh4>\n\u003Cp>The HTML output of a custom field on the front end depends on the context of the field. It uses one of these core API functions to get the field value: \u003Ca href=\"https:\u002F\u002Fdeveloper.wordpress.org\u002Freference\u002Ffunctions\u002Fget_post_meta\u002F\" rel=\"nofollow ugc\">get_post_meta\u003C\u002Fa>, \u003Ca href=\"https:\u002F\u002Fdeveloper.wordpress.org\u002Freference\u002Ffunctions\u002Fget_term_meta\u002F\" rel=\"nofollow ugc\">get_term_meta\u003C\u002Fa>, \u003Ca href=\"https:\u002F\u002Fdeveloper.wordpress.org\u002Freference\u002Ffunctions\u002Fget_user_meta\u002F\" rel=\"nofollow ugc\">get_user_meta\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch4>What is the HTML output of ACF fields?\u003C\u002Fh4>\n\u003Col>\n\u003Cli>\n\u003Cp>All basic field types that return strings or can cast to strings are supported – The HTML output is from the \u003Ccode>get_field\u003C\u002Fcode> function.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Link type – The HTML output is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Ca href={url} target={target} rel=\"noreferrer noopener\">{title}\u003C\u002Fa>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>There is no \u003Ccode>rel\u003C\u002Fcode> attribute if the \u003Ccode>target\u003C\u002Fcode> is not \u003Ccode>_blank\u003C\u002Fcode>\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Image type – The HTML output is from the \u003Ca href=\"https:\u002F\u002Fdeveloper.wordpress.org\u002Freference\u002Ffunctions\u002Fwp_get_attachment_image\u002F\" rel=\"nofollow ugc\">wp_get_attachment_image\u003C\u002Fa> function. The image size is from the Preview Size setting.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>True \u002F False type – The HTML output is \u003Ccode>Yes\u003C\u002Fcode> if the value is \u003Ccode>true\u003C\u002Fcode>, and \u003Ccode>No\u003C\u002Fcode> if the value is \u003Ccode>false\u003C\u002Fcode>. Below is the code snippet to change these text values:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>add_filter( 'meta_field_block_true_false_on_text', function ( $on_text, $field_name, $field, $post_id, $value ) {\n  return 'Yep';\n}, 10, 5 );\n\nadd_filter( 'meta_field_block_true_false_off_text', function ( $off_text, $field_name, $field, $post_id, $value ) {\n  return 'Noop';\n}, 10, 5 );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Checkbox \u002F Select type – The HTML output is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Cspan class=\"value-item\">{item_value}\u003C\u002Fspan>, \u003Cspan class=\"value-item\">{item_value}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>The \u003Ccode>item_value\u003C\u002Fcode> can be either \u003Ccode>value\u003C\u002Fcode> or \u003Ccode>label\u003C\u002Fcode>, depending on the return format of the field. Multiple selected values are separated by \u003Ccode>,\u003C\u002Fcode>. Below is the code snippet to change the separator:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>add_filter( 'meta_field_block_acf_field_choice_item_separator', function ( $separator, $field_name, $field, $post_id, $value ) {\n  return ' | ';\n}, 10, 5 );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Radio button \u002F Button group type – The HTML output can be either \u003Ccode>value\u003C\u002Fcode> or \u003Ccode>label\u003C\u002Fcode>, depending on the return format of the field.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Page link type, Post object type – The HTML output for a single-value field is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Ca class=\"post-link\" href={url} rel=\"bookmark\">{title}\u003C\u002Fa>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>For a multiple-value field is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Cul>\n  \u003Cli>\u003Ca class=\"post-link\" href={url} rel=\"bookmark\">{title}\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli>\u003Ca class=\"post-link\" href={url} rel=\"bookmark\">{title}\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Relationship type – The HTML output is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Cul>\n  \u003Cli>\u003Ca class=\"post-link\" href={url} rel=\"bookmark\">{title}\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli>\u003Ca class=\"post-link\" href={url} rel=\"bookmark\">{title}\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Taxonomy type – The HTML output is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Cul>\n  \u003Cli>\u003Ca class=\"term-link\" href={term_url}>{term_name}\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli>\u003Ca class=\"term-link\" href={term_url}>{term_name}\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>User type – The HTML output for a single-value field is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Ca class=\"user-link\" href={author_url}>{display_name}\u003C\u002Fa>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>For a multiple-value field is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Cul>\n  \u003Cli>\u003Ca class=\"user-link\" href={author_url}>{display_name}\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli>\u003Ca class=\"user-link\" href={author_url}>{display_name}\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>For other complex field types, you can generate a custom HTML output by using the hook:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>apply_filters( 'meta_field_block_get_acf_field', $field_value, $post_id, $field, $raw_value, $object_type )\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Or by using the general hook:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>apply_filters( 'meta_field_block_get_block_content', $content, $attributes, $block, $object_id, $object_type )\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch4>What is the HTML output of Meta Box fields?\u003C\u002Fh4>\n\u003Col>\n\u003Cli>\n\u003Cp>Similar to ACF fields, all basic fields that return strings or can cast to strings using the function \u003Ccode>rwmb_get_value\u003C\u002Fcode> are supported.\u003C\u002Fp>\n\u003Cp>The HTML output of cloneable basic fields is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Cspan class=\"value-repeater-item\">{item_1_value}\u003C\u002Fspan>, \u003Cspan class=\"value-repeater-item\">{item_2_value}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Use the following hooks to change the tag and the separator:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>apply_filters( 'meta_field_block_mb_clone_field_item_separator', ', ', $field, $post_id, $field_value )\napply_filters( 'meta_field_block_mb_clone_field_item_tag', 'span', $field, $post_id, $field_value )\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Single image types – The HTML output is from the \u003Ca href=\"https:\u002F\u002Fdeveloper.wordpress.org\u002Freference\u002Ffunctions\u002Fwp_get_attachment_image\u002F\" rel=\"nofollow ugc\">wp_get_attachment_image\u003C\u002Fa> function. The image size is from the \u003Ccode>image_size\u003C\u002Fcode> setting.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Image list types (Image, Image advanced, Image upload) – The HTML output is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Cfigure class=\"image-list\">\n  \u003Cfigure class=\"image-item\">\u003Cimg \u002F>\u003C\u002Ffigure>\n  \u003Cfigure class=\"image-item\">\u003Cimg \u002F>\u003C\u002Ffigure>\n\u003C\u002Ffigure>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Checkbox \u002F Switch type – Similar to ACF True \u002F False type.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Multi-choice types (Select, Select advanced, Button group, Autocomplete, Image select, Checkbox list) – The HTML output is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Cspan class=\"value-item\">{item_value}\u003C\u002Fspan>, \u003Cspan class=\"value-item\">{item_value}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>To display the label instead of the value, use this hook:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>apply_filters( 'meta_field_block_mb_field_choice_item_display_label', false, $field_name, $field, $post_id, $value )\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>To change the separator, use this hook:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>apply_filters( 'meta_field_block_mb_field_choice_item_separator', ', ', $file_name, $field, $post_id, $value )\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Radio type – The output is the field value by default. To display label or change the separator, use the same hooks as the multi-choice types.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Post type – The HTML output for a single-value field is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Ca class=\"post-link\" href={url} rel=\"bookmark\">{title}\u003C\u002Fa>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>For a multiple-value field is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Cul>\n  \u003Cli>\u003Ca class=\"post-link\" href={url} rel=\"bookmark\">{title}\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli>\u003Ca class=\"post-link\" href={url} rel=\"bookmark\">{title}\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Taxonomy, Taxonomy advanced type – The HTML output for a single-value field is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Ca class=\"term-link\" href={term_url}>{term_name}\u003C\u002Fa>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>For a multiple-value field is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Cul>\n  \u003Cli>\u003Ca class=\"term-link\" href={term_url}>{term_name}\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli>\u003Ca class=\"term-link\" href={term_url}>{term_name}\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>User type – Similar to ACF User type\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Video type – The HTML output for a single-value field is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Cvideo controls preload=\"metadata\" src={video_src} width={video_width} poster={poster} \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>For a multiple-value field is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u003Cfigure class=\"video-list\">\n  \u003Cfigure class=\"video-item\">\u003Cvideo \u002F>\u003C\u002Ffigure>\n  \u003Cfigure class=\"video-item\">\u003Cvideo \u002F>\u003C\u002Ffigure>\n\u003C\u002Ffigure>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>To display complex field types or change the output of a field, use the hook \u003Ccode>meta_field_block_get_mb_field\u003C\u002Fcode> or the general hook \u003Ccode>meta_field_block_get_block_content\u003C\u002Fcode>.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch4>Copy & paste snippets\u003C\u002Fh4>\n\u003Cp>When using the \u003Ccode>meta_field_block_get_block_content\u003C\u002Fcode> hook to customize block content, we recommend selecting \u003Ccode>dynamic\u003C\u002Fcode> as the field type. This way, both the front end and the editor will show the changes. If you are working with ACF Fields, we suggest using the \u003Ccode>meta_field_block_get_acf_field\u003C\u002Fcode> hook to modify the field content. Similarly, Meta Box users should use the \u003Ccode>meta_field_block_get_mb_field\u003C\u002Fcode> hook to modify the content. ACF snippets can also be used with Meta Box fields, but you must use the correct hook name and replace the \u003Ccode>get_field\u003C\u002Fcode> function with the \u003Ccode>rwmb_get_value\u003C\u002Fcode> function.\u003C\u002Fp>\n\u003Col>\n\u003Cli>\n\u003Cp>How to change the HTML output of the block?\u003Cbr \u002F>\nUsing the \u003Ccode>meta_field_block_get_block_content\u003C\u002Fcode> hook:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id, $object_type ) {\n  $field_name = $attributes['fieldName'] ?? '';\n\n  if ( 'your_unique_field_name' === $field_name ) {\n    $block_content = 'new content';\n  }\n\n  return $block_content;\n}, 10, 5);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Using the \u003Ccode>meta_field_block_get_acf_field\u003C\u002Fcode> hook for ACF Fields only:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>add_filter( 'meta_field_block_get_acf_field', function ( $block_content, $post_id, $field, $raw_value, $object_type ) {\n  $field_name = $field['name'] ?? '';\n\n  if ( 'your_unique_field_name' === $field_name ) {\n    $block_content = 'new content';\n  }\n\n  return $block_content;\n}, 10, 5);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>This basic snippet is very powerful. You can use it to display any fields from any posts, terms, users or setting fields. Please see the details in the below use cases.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>How to wrap the block with a link to the post within the Query Loop?\u003Cbr \u002F>\nUsing the \u003Ccode>meta_field_block_get_block_content\u003C\u002Fcode> hook:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {\n  $field_name = $attributes['fieldName'] ?? '';\n\n  if ( 'your_unique_field_name' === $field_name && $block_content !== '' ) {\n    $block_content = sprintf('\u003Ca href=\"%1$s\">%2$s\u003C\u002Fa>', get_permalink($post_id), $block_content);\n  }\n\n  return $block_content;\n}, 10, 4);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Using the \u003Ccode>meta_field_block_get_acf_field\u003C\u002Fcode> hook for ACF Fields only:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>add_filter( 'meta_field_block_get_acf_field', function ( $block_content, $post_id, $field, $raw_value ) {\n  $field_name = $field['name'] ?? '';\n\n  if ( 'your_unique_field_name' === $field_name && $block_content !== '' ) {\n    $block_content = sprintf('\u003Ca href=\"%1$s\">%2$s\u003C\u002Fa>', get_permalink($post_id), $block_content);\n  }\n\n  return $block_content;\n}, 10, 4);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>This snippet only works with the block that has only HTML inline tags or an image.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>How to display an image URL field as an image tag?\u003Cbr \u002F>\nUsing the \u003Ccode>meta_field_block_get_block_content\u003C\u002Fcode> hook:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {\n  $field_name = $attributes['fieldName'] ?? '';\n\n  if ( 'your_image_url_field_name' === $field_name && wp_http_validate_url($block_content) ) {\n    $block_content = sprintf('\u003Cimg src=\"%1$s\" alt=\"your_image_url_field_name\" \u002F>', esc_attr($block_content));\n  }\n\n  return $block_content;\n}, 10, 4);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Using the \u003Ccode>meta_field_block_get_acf_field\u003C\u002Fcode> hook for ACF Fields only:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>add_filter( 'meta_field_block_get_acf_field', function ( $block_content, $post_id, $field, $raw_value ) {\n  $field_name = $field['name'] ?? '';\n\n  if ( 'your_image_url_field_name' === $field_name && wp_http_validate_url($block_content) ) {\n    $block_content = sprintf('\u003Cimg src=\"%1$s\" alt=\"your_image_url_field_name\" \u002F>', esc_attr($block_content));\n  }\n\n  return $block_content;\n}, 10, 4);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>How to display multiple meta fields in a block?\u003Cbr \u002F>\nFor example, we need to display the full name of a user from two meta fields \u003Ccode>first_name\u003C\u002Fcode> and \u003Ccode>last_name\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {\n  $field_name = $attributes['fieldName'] ?? '';\n\n  if ( 'full_name' === $field_name ) {\n    $first_name = get_post_meta( $post_id, 'first_name', true );\n    $last_name  = get_post_meta( $post_id, 'last_name', true );\n\n    \u002F\u002F If the meta fields are ACF Fields. The code will be:\n    \u002F\u002F $first_name = get_field( 'first_name', $post_id );\n    \u002F\u002F $last_name  = get_field( 'last_name', $post_id );\n\n    $block_content = trim(\"$first_name $last_name\");\n  }\n\n  return $block_content;\n}, 10, 4);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Choose the field type as \u003Ccode>dynamic\u003C\u002Fcode> and input the field name as \u003Ccode>full_name\u003C\u002Fcode>.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>How to display a setting field?\u003Cbr \u002F>\nFor example, we need to display a setting field named \u003Ccode>footer_credit\u003C\u002Fcode> on the footer template part of the site.\u003C\u002Fp>\n\u003Cpre>\u003Ccode>add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {\n  $field_name = $attributes['fieldName'] ?? '';\n\n  \u002F\u002F Replace `footer_credit` with your unique name.\n  if ( 'footer_credit' === $field_name ) {\n    $block_content = get_option( 'footer_credit', '' );\n\n    \u002F\u002F If the field is an ACF Field. The code will be:\n    \u002F\u002F $block_content = get_field( 'footer_credit', 'option' );\n  }\n\n  return $block_content;\n}, 10, 4);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fsupport\u002Ftopic\u002Fhow-to-use-mfb-to-display-dynamic-fields\u002F\" rel=\"ugc\">How to use MFB as a placeholder to display any kind of content?\u003C\u002Fa>\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch4>SAVE YOUR TIME WITH MFB PRO\u003C\u002Fh4>\n\u003Cp>To display simple data type fields for posts, terms, and users, you only need the free version of MFB. MFB Pro can save you 90% of development time when working with ACF, or Meta Box complex fields. It achieves this by transforming your ACF complex field types into container blocks, which work similarly to core container blocks. This eliminates the need for creating custom blocks or writing custom code for displaying complex fields.\u003C\u002Fp>\n\u003Cp>Below are some video tutorials that demonstrate how MFB Pro can help you display complex fields:\u003C\u002Fp>\n\u003Ch4>How to build a post template to display dynamic data without coding\u003C\u002Fh4>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002F5VePClgZmlQ?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Ch4>How to display ACF Repeater fields as a list, grid, or carousel\u003C\u002Fh4>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002Fa9ptshyuJLM?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Ch4>How to display ACF Gallery fields as a grid, masonry, or carousel\u003C\u002Fh4>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FmRWIibbcHQ8?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Cp>The main features of MFB PRO are:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fmetafieldblock.com\u002Fhow-to-display-wordpress-custom-fields\u002F?video=display-settings-fields\" rel=\"nofollow ugc\">Display settings fields\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Display ACF advanced layout fields: \u003Ca href=\"https:\u002F\u002Fmetafieldblock.com\u002Fhow-to-display-wordpress-custom-fields\u002F?video=display-acf-group-fields\" rel=\"nofollow ugc\">Group\u003C\u002Fa>, \u003Ca href=\"https:\u002F\u002Fmetafieldblock.com\u002Fhow-to-display-wordpress-custom-fields\u002F?video=display-acf-repeater-fields-as-list-grid-carousel\" rel=\"nofollow ugc\">Repeater\u003C\u002Fa>, and Flexible content.\u003C\u002Fli>\n\u003Cli>Display ACF Repeater fields in a carousel layout, which is useful for \u003Ca href=\"https:\u002F\u002Fmetafieldblock.com\u002Fhow-to-display-wordpress-custom-fields\u002F?video=display-acf-repeater-as-banner-slider\" rel=\"nofollow ugc\">displaying banner sliders\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Display ACF Repeater fields in an accordion layout, which is useful for \u003Ca href=\"https:\u002F\u002Fmetafieldblock.com\u002Fhow-to-display-wordpress-custom-fields\u002F?video=display-acf-repeater-as-accordion\" rel=\"nofollow ugc\">displaying FAQ pages\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fmetafieldblock.com\u002Fhow-to-display-wordpress-custom-fields\u002F?video=display-acf-relationship-fields\" rel=\"nofollow ugc\">Display ACF Relationship and Post Object fields as a Query Loop\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fmetafieldblock.com\u002Fhow-to-display-wordpress-custom-fields\u002F?video=display-acf-image-fields\" rel=\"nofollow ugc\">Display the ACF Image field as a core image block\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Display the ACF Gallery field as an image gallery using \u003Ca href=\"https:\u002F\u002Fmetafieldblock.com\u002Fhow-to-display-wordpress-custom-fields\u002F?video=display-acf-gallery-fields-as-grid-masonry-carousel\" rel=\"nofollow ugc\">grid, masonry, or carousel layouts\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fmetafieldblock.com\u002Fhow-to-display-wordpress-custom-fields\u002F?video=display-acf-file-fields\" rel=\"nofollow ugc\">Display the ACF File field as a video block, an image block, a button block, or a link\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Display the ACF Link field as a button block.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fmetafieldblock.com\u002Fhow-to-display-wordpress-custom-fields\u002F?video=display-acf-url-fields\" rel=\"nofollow ugc\">Display the ACF URL field as an image block, a button block, or a link\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fmetafieldblock.com\u002Fhow-to-display-wordpress-custom-fields\u002F?video=display-acf-email-fields\" rel=\"nofollow ugc\">Display the ACF Email field as a button block or a link\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Display the ACF Google Map field.\u003C\u002Fli>\n\u003Cli>Display the Meta Box Group field, similar to the ACF Group field.\u003C\u002Fli>\n\u003Cli>Display the Meta Box Cloneable Group field as a repeater block, similar to the ACF Repeater field. Supports row, stack, grid or carousel layouts.\u003C\u002Fli>\n\u003Cli>Display the Meta Box Post field as a Query Loop.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fmetafieldblock.com\u002Fhow-to-display-wordpress-custom-fields\u002F?video=display-meta-box-image-fields-as-image-grid-masonry-carousel\" rel=\"nofollow ugc\">Display the Meta Box single image field as an image block, and the image list field as an image gallery using grid, masonry, or carousel layouts\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Display the Meta Box File single input field as a video block, an image block, or a button.\u003C\u002Fli>\n\u003Cli>Display a group field as a details block, and display a repeater or cloned group as an accordion.\u003C\u002Fli>\n\u003Cli>Set a single image sub-field (ACF Image or Meta Box Image) as the background image of a group field.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fmetafieldblock.com\u002Fhow-to-display-wordpress-custom-fields\u002F?video=display-acf-custom-fields-from-other-post\" rel=\"nofollow ugc\">Display custom fields from a specific post, term or user\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Display a taxonomy field as a Terms Query block.\u003C\u002Fli>\n\u003Cli>Display a repeater or cloned group field as an core\u002Faccordion block.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>If this plugin is useful for you, please do a quick review and \u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fsupport\u002Fplugin\u002Fdisplay-a-meta-field-as-block\u002Freviews\u002F#new-post\" rel=\"ugc\">rate it\u003C\u002Fa> on WordPress.org to help us spread the word. I would very much appreciate it.\u003C\u002Fp>\n\u003Cp>Please check out my other plugins if you’re interested:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fcontent-blocks-builder\" rel=\"ugc\">Content Blocks Builder\u003C\u002Fa>\u003C\u002Fstrong> – This plugin turns the Block Editor into a powerful page builder by allowing you to create blocks, variations, and patterns directly in the Block Editor without needing a code editor.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fsvg-block\" rel=\"ugc\">SVG Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display SVG images as blocks. Useful for images, icons, dividers, and buttons. It allows you to upload SVG images and load them into the icon library.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Ficon-separator\" rel=\"ugc\">Icon separator\u003C\u002Fa>\u003C\u002Fstrong> – A tiny block just like the core\u002Fseparator block but with the ability to add an icon.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fbreadcrumb-block\" rel=\"ugc\">Breadcrumb Block\u003C\u002Fa>\u003C\u002Fstrong> – A simple breadcrumb trail block that supports JSON-LD structured data and is compatible with WooCommerce.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fblock-enhancements\" rel=\"ugc\">Block Enhancements\u003C\u002Fa>\u003C\u002Fstrong> – Adds practical features to blocks like icons, box shadows, transforms, etc.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fcounting-number-block\" rel=\"ugc\">Counting Number Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display numbers with a counting effect\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fbetter-youtube-embed-block\" rel=\"ugc\">Better YouTube Embed Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to solve the performance issue with embedded YouTube videos. It can also embed multiple videos and playlists.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>The plugin is built using @wordpress\u002Fcreate-block.\u003Cbr \u002F>\n\u003Cstrong>MFB\u003C\u002Fstrong> is developed using only native Gutenberg features to keep it fast and lightweight.\u003Cbr \u002F>\n\u003Cstrong>MFB Pro\u003C\u002Fstrong> uses \u003Cstrong>\u003Ca href=\"\u002F\u002Fswiperjs.com\u002F\" rel=\"nofollow ugc\">SwiperJS\u003C\u002Fa>\u003C\u002Fstrong> for the carousel layout. However, if you don’t use the carousel layout,  …\u003C\u002Fp>\n","Display a custom field as a block on the frontend. Supports custom fields for posts, terms, and users. Officially supports ACF, Meta Box.",10000,148710,55,"2026-03-02T01:35:00.000Z","7.0","6.9","7.4",[27,28,29,30,31],"acf-block","acf-field","block","custom-field","meta-field","https:\u002F\u002Fmetafieldblock.com?utm_source=MFB&utm_campaign=MFB+visit+site&utm_medium=link&utm_content=Plugin+URI","https:\u002F\u002Fdownloads.wordpress.org\u002Fplugin\u002Fdisplay-a-meta-field-as-block.1.5.2.zip",99,1,0,"2024-08-16 00:00:00","2026-03-15T15:16:48.613Z",{"slug":40,"name":41,"version":42,"author":5,"author_profile":6,"description":43,"short_description":44,"active_installs":45,"downloaded":46,"rating":9,"num_ratings":47,"last_updated":48,"tested_up_to":49,"requires_at_least":24,"requires_php":23,"tags":50,"homepage":55,"download_link":56,"security_score":9,"vuln_count":36,"unpatched_count":36,"last_vuln_date":57,"fetched_at":38},"better-youtube-embed-block","Better YouTube Block – A better way to embed YouTube videos, shorts, playlists","1.1.4","\u003Cp>The default embed block for YouTube videos sucks. It slows down your site. The more videos on the page the more it slow. This single-block plugin fixes that.\u003C\u002Fp>\n\u003Cp>Why this block is better than the default one:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Instead of loading the entire iframe, only the video thumbnail is loaded, resulting in significant performance improvements\u003C\u002Fli>\n\u003Cli>Ability to play multiple different videos as a custom playlist or input a playlist ID to play the whole playlist\u003C\u002Fli>\n\u003Cli>Ability to use a custom image as the video thumbnail\u003C\u002Fli>\n\u003Cli>Ability to set a custom aspect ratio value for displaying any kind of YouTube videos\u003C\u002Fli>\n\u003Cli>Ability to loop continuously once it finishes playing\u003C\u002Fli>\n\u003Cli>Ability to show related videos from the same channel as the initial video\u003C\u002Fli>\n\u003Cli>Automatically load the video title as the caption\u003C\u002Fli>\n\u003Cli>The same UI as the default core\u002Fembed, and you can use the video title as the caption of the block with one click\u003C\u002Fli>\n\u003Cli>It can be transformed from\u002Fto the core embed block.\u003C\u002Fli>\n\u003Cli>Automatically convert all default core embed YouTube blocks to this block with one line of code.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>This plugin also provides a PHP API for developers to render a YouTube video URL as this block; or to automatically transform core\u002Fembed YouTube videos into this block.\u003C\u002Fp>\n\u003Cp>The simplest example is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>    better_youtube_embed_block_render_block( ['url' => 'https:\u002F\u002Fyoutu.be\u002FpaSXmpHU9K4'] );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>The example with all the parameters is:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>    better_youtube_embed_block_render_block(\n      [\n        'url'               => 'https:\u002F\u002Fyoutu.be\u002FpaSXmpHU9K4',\n        'aspectRatio'       => '16\u002F9',\n        'isMaxResThumbnail' => false,\n        'thumbnailFormat'   => 'jpg',\n        'caption'           => 'My awesome video',\n        'customThumbnail'   => 'https:\u002F\u002Fexample.com\u002Fbg.jpg',\n        'settings'          => ['loop' => 1, 'rel' => 0],\n        'echo'              => false,\n      ]\n    );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>To automatically transform all core\u002Fembed YouTube videos on your site to this block, you need to put the following code to the wp-config.php file or your theme\u002Fplugin:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>    define('BYEB_SPEED_UP_YOUTUBE_VIDEOS', true);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>or\u003C\u002Fp>\n\u003Cpre>\u003Ccode>    add_filter( 'byeb_speed_up_youtube_videos', '__return_true' );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>On iOS, browsers like Safari and Chrome require two clicks to play videos. If you want to allow users to play videos with a single click, you need to add the following code to the wp-config.php file or your theme\u002Fplugin:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>    define('BYEB_FORCE_IFRAME_ON_UNSUPPORTED_BROWSERS', true);\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Please check out this \u003Ca href=\"https:\u002F\u002Fcontentblocksbuilder.com\u002Fvideo-tutorials\u002F?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=BYEB\" rel=\"nofollow ugc\">page\u003C\u002Fa> to see how fast it helps. The page contains around 30 embedded YouTube videos but they don’t slow down the page.\u003C\u002Fp>\n\u003Cp>If this plugin is useful for you, please do a quick review and \u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fsupport\u002Fplugin\u002Fbetter-youtube-embed-block\u002Freviews\u002F#new-post\" rel=\"ugc\">rate it\u003C\u002Fa> on WordPress.org to help us spread the word. I would very much appreciate it.\u003C\u002Fp>\n\u003Cp>Please check out my other plugins if you’re interested:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fcontent-blocks-builder\" rel=\"ugc\">Content Blocks Builder\u003C\u002Fa>\u003C\u002Fstrong> – This plugin turns the Block Editor into a powerful page builder by allowing you to create blocks, variations, and patterns directly in the Block Editor without needing a code editor.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fdisplay-a-meta-field-as-block\" rel=\"ugc\">Meta Field Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display custom fields as blocks on the front end. It supports custom fields for posts, terms, users, and setting fields. It can also be used in the Query Loop block.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fsvg-block\" rel=\"ugc\">SVG Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display SVG images as blocks. Useful for images, icons, dividers, and buttons. It allows you to upload SVG images and load them into the icon library.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Ficon-separator\" rel=\"ugc\">Icon separator\u003C\u002Fa>\u003C\u002Fstrong> – A tiny block just like the core\u002Fseparator block but with the ability to add an icon.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fbreadcrumb-block\" rel=\"ugc\">Breadcrumb Block\u003C\u002Fa>\u003C\u002Fstrong> – A simple breadcrumb trail block that supports JSON-LD structured data and is compatible with WooCommerce.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fblock-enhancements\" rel=\"ugc\">Block Enhancements\u003C\u002Fa>\u003C\u002Fstrong> – Adds practical features to blocks like icons, box shadows, transforms, etc.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fcounting-number-block\" rel=\"ugc\">Counting Number Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display numbers with a counting effect\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>The plugin is developed using @wordpress\u002Fcreate-block.\u003C\u002Fp>\n","Embed YouTube videos without slowing down your site. Easily embed one or multiple videos, shorts, and playlists.",6000,44513,16,"2026-01-12T07:45:00.000Z","6.9.4",[29,51,52,53,54],"embed","gutenberg","video","youtube","https:\u002F\u002Fboldblocks.net?utm_source=BYEB&utm_campaign=visit+site&utm_medium=link&utm_content=Plugin+URI","https:\u002F\u002Fdownloads.wordpress.org\u002Fplugin\u002Fbetter-youtube-embed-block.1.1.4.zip",null,{"slug":59,"name":60,"version":61,"author":5,"author_profile":6,"description":62,"short_description":63,"active_installs":64,"downloaded":65,"rating":9,"num_ratings":66,"last_updated":67,"tested_up_to":49,"requires_at_least":68,"requires_php":69,"tags":70,"homepage":75,"download_link":76,"security_score":34,"vuln_count":77,"unpatched_count":36,"last_vuln_date":78,"fetched_at":38},"svg-block","SVG Block","1.2.3","\u003Cp>This SVG block allows you to display SVG images as inline HTML markup. You can either choose an icon from the icon library with more than 3000 icons or you can upload or input your custom SVG images directly in the block’s setting.\u003Cbr \u002F>\nIt also allows you to upload SVG images to the WordPress media library, and load them into the icon library. Only SVG files that have XML declaration at the top like \u003Ccode>\u003C?xml version=\"1.0\" encoding=\"utf-8\"?>\u003C\u002Fcode> can be uploaded to the WordPress media library.\u003C\u002Fp>\n\u003Ch3>Key Features\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Accessibility ready with ‘img’ role, automatically generates title and description from settings.\u003C\u002Fli>\n\u003Cli>Automatically sanitize SVG markup to make it safe and lightweight.\u003C\u002Fli>\n\u003Cli>Include almost all settings to customize the SVG image.\u003C\u002Fli>\n\u003Cli>Include a collection of common non-rectangular dividers.\u003C\u002Fli>\n\u003Cli>An icon library included icons from “Bootstrap Icons”, “Ionicons”, “Dashicons” and new “WordPress Icons”.\u003C\u002Fli>\n\u003Cli>Allow uploading SVG images to the WordPress media library\u003C\u002Fli>\n\u003Cli>Automatically load SVG images from the media library into the icon library\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Video tutorials\u003C\u002Fh3>\n\u003Cp>How to create an icon with custom styles using the icon library:\u003C\u002Fp>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FWJZXLyMXK0c?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Cp>How to create a non-rectangular background section:\u003C\u002Fp>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FnVs4WzKFa7s?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Cp>How to create icon buttons:\u003C\u002Fp>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FNJkJipoDT4g?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Cp>Please take a look at \u003Ca href=\"https:\u002F\u002Fboldpatterns.net\u002Fkeywords\u002Fsvg?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=SVG+Block\" rel=\"nofollow ugc\">these custom block patterns\u003C\u002Fa> that use this block to see how it can be applied to real-world sites.\u003C\u002Fp>\n\u003Cp>If this plugin is useful for you, please do a quick review and \u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fsupport\u002Fplugin\u002Fsvg-block\u002Freviews\u002F#new-post\" rel=\"ugc\">rate it\u003C\u002Fa> on WordPress.org to help us spread the word. I would very much appreciate it.\u003C\u002Fp>\n\u003Cp>Please check out my other plugins if you’re interested:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fcontent-blocks-builder\" rel=\"ugc\">Content Blocks Builder\u003C\u002Fa>\u003C\u002Fstrong> – This plugin turns the Block Editor into a powerful page builder by allowing you to create blocks, variations, and patterns directly in the Block Editor without needing a code editor.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fdisplay-a-meta-field-as-block\" rel=\"ugc\">Meta Field Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display custom fields as blocks on the front end. It supports custom fields for posts, terms, users, and setting fields. It can also be used in the Query Loop block.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Ficon-separator\" rel=\"ugc\">Icon separator\u003C\u002Fa>\u003C\u002Fstrong> – A tiny block just like the core\u002Fseparator block but with the ability to add an icon.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fbreadcrumb-block\" rel=\"ugc\">Breadcrumb Block\u003C\u002Fa>\u003C\u002Fstrong> – A simple breadcrumb trail block that supports JSON-LD structured data and is compatible with WooCommerce.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fblock-enhancements\" rel=\"ugc\">Block Enhancements\u003C\u002Fa>\u003C\u002Fstrong> – Adds practical features to blocks like icons, box shadows, transforms, etc.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fcounting-number-block\" rel=\"ugc\">Counting Number Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display numbers with a counting effect\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fbetter-youtube-embed-block\" rel=\"ugc\">Better YouTube Embed Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to solve the performance issue with embedded YouTube videos. It can also embed multiple videos and playlists.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>The plugin is developed using @wordpress\u002Fcreate-block.\u003C\u002Fp>\n","Display an SVG image as a block, which can be used for displaying images, icons, dividers, buttons",4000,45848,14,"2025-11-19T01:13:00.000Z","6.5","7.1",[29,71,72,73,74],"button","icon","image","svg","https:\u002F\u002Fboldblocks.net?utm_source=SVG+Block&utm_campaign=visit+site&utm_medium=link&utm_content=Plugin+URI","https:\u002F\u002Fdownloads.wordpress.org\u002Fplugin\u002Fsvg-block.1.2.3.zip",2,"2024-11-18 18:51:03",{"slug":80,"name":81,"version":82,"author":5,"author_profile":6,"description":83,"short_description":84,"active_installs":85,"downloaded":86,"rating":9,"num_ratings":87,"last_updated":88,"tested_up_to":49,"requires_at_least":89,"requires_php":23,"tags":90,"homepage":94,"download_link":95,"security_score":9,"vuln_count":36,"unpatched_count":36,"last_vuln_date":57,"fetched_at":38},"breadcrumb-block","Breadcrumb Block","1.1.0","\u003Cp>This is a single-block plugin for the breadcrumb trail. It’s simple, lightweight, SEO-friendly, and WooCommerce compatibility. It also includes some simple separator icons. It works everywhere: Page Editor, Site Editor, and template files.\u003C\u002Fp>\n\u003Ch3>How to customize the breadcrumb\u003C\u002Fh3>\n\u003Col>\n\u003Cli>\n\u003Cp>How to change\u002Fremove an item?\u003C\u002Fp>\n\u003Cpre>\u003Ccode>add_filter( 'breadcrumb_block_get_item', function ( $item_args, $context, $breadcrumbs_instance ) {\n  \u002F\u002F Ignore items without context.\n  if ( ! $context || ! ( $context['object'] ?? false ) ) {\n    return $item_args;\n  }\n\n  \u002F\u002F Eg: remove a term.\n  if ( 'term' === ( $context['type'] ?? '' ) && 'term-slug' === $context['object']->slug ) {\n    return false;\n  }\n\n  \u002F\u002F Eg: Change the title of a page.\n  if ( 'page' === ( $context['type'] ?? '' ) && page_id_to_change === $context['object']->ID ) {\n    $item_args[0] = 'Make it shorter';\n  }\n\n  return $item_args;\n}, 10, 3 );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>$item_args is a 3-item array: \u003Ccode>[$item_label, $item_link, $item_attrs]\u003C\u002Fcode>\u003Cbr \u002F>\n$context is an associative array: \u003Ccode>['type' => 'item type', 'object' => 'item object']\u003C\u002Fcode>. \u003Ccode>type\u003C\u002Fcode> can be one of the following values: \u003Ccode>front_page\u003C\u002Fcode>, \u003Ccode>home\u003C\u002Fcode>, \u003Ccode>shop\u003C\u002Fcode>, \u003Ccode>page\u003C\u002Fcode>, \u003Ccode>post\u003C\u002Fcode>, \u003Ccode>single\u003C\u002Fcode>, \u003Ccode>term\u003C\u002Fcode>, \u003Ccode>taxonomy\u003C\u002Fcode>, \u003Ccode>post_type_archive\u003C\u002Fcode>, \u003Ccode>search\u003C\u002Fcode>, \u003Ccode>404\u003C\u002Fcode>, \u003Ccode>paged\u003C\u002Fcode>, \u003Ccode>author\u003C\u002Fcode>, \u003Ccode>date_year\u003C\u002Fcode>, \u003Ccode>date_month\u003C\u002Fcode>, \u003Ccode>date_day\u003C\u002Fcode>, \u003Ccode>attachment\u003C\u002Fcode>.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>How to change the markup of the block?\u003C\u002Fp>\n\u003Cpre>\u003Ccode>add_filter( 'breadcrumb_block_get_breadcrumb_trail', function ( $markup, $args, $breadcrumbs_instance ) {\n  return $markup;\n}, 10, 3 );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>How to add or remove the items from the breadcrumb trail?\u003C\u002Fp>\n\u003Cpre>\u003Ccode>add_filter( 'breadcrumb_block_get_items', function ( $items, $breadcrumbs_instance ) {\n  return $items;\n}, 10, 2 );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>How to use a custom separator for the breadcrumb trail?\u003C\u002Fp>\n\u003Cpre>\u003Ccode>add_filter( 'breadcrumb_block_get_args', function ( $args ) {\n  \u002F\u002F For example, change separator.\n  $args['separator'] = '\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" fill=\"currentColor\" width=\"1em\" height=\"1em\" viewBox=\"0 0 16 16\">\u003Cpath fill-rule=\"evenodd\" d=\"M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z\"\u002F>\u003Cpath fill-rule=\"evenodd\" d=\"M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z\"\u002F>\u003C\u002Fsvg>';\n  return $args;\n} );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>The custom separator should be an inline SVG. To make sure it displays properly, it should have three attributes: width, height, and fill. The values of these attributes should be as follows: \u003Ccode>fill=\"currentColor\" width=\"1em\" height=\"1em\"\u003C\u002Fcode>.\u003Cbr \u002F>\nUsing this hook, you can customize other attributes such as container, before, after, list_tag, item_tag, item_before, item_after, separator.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>How to prepend the blog page to all single posts?\u003C\u002Fp>\n\u003Cpre>\u003Ccode>add_action( 'breadcrumb_block_single_prepend', function ( $post, $breadcrumbs_instance ) {\n  if ( 'post' === $post->post_type ) {\n    $blog_id = get_option( 'page_for_posts');\n    if ( $blog_id ) {\n      $breadcrumbs_instance->add_item( get_the_title( $blog_id ), get_permalink( $blog_id ) );\n    }\n  }\n}, 10, 2 );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>If this plugin is useful for you, please do a quick review and \u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fsupport\u002Fplugin\u002Fbreadcrumb-block\u002Freviews\u002F#new-post\" rel=\"ugc\">rate it\u003C\u002Fa> on WordPress.org to help us spread the word. I would very much appreciate it.\u003C\u002Fp>\n\u003Cp>Please check out my other plugins if you’re interested:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fcontent-blocks-builder\" rel=\"ugc\">Content Blocks Builder\u003C\u002Fa>\u003C\u002Fstrong> – This plugin turns the Block Editor into a powerful page builder by allowing you to create blocks, variations, and patterns directly in the Block Editor without needing a code editor.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fdisplay-a-meta-field-as-block\" rel=\"ugc\">Meta Field Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display custom fields as blocks on the front end. It supports custom fields for posts, terms, users, and setting fields. It can also be used in the Query Loop block.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fsvg-block\" rel=\"ugc\">SVG Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display SVG images as blocks. Useful for images, icons, dividers, and buttons. It allows you to upload SVG images and load them into the icon library.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Ficon-separator\" rel=\"ugc\">Icon separator\u003C\u002Fa>\u003C\u002Fstrong> – A tiny block just like the core\u002Fseparator block but with the ability to add an icon.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fblock-enhancements\" rel=\"ugc\">Block Enhancements\u003C\u002Fa>\u003C\u002Fstrong> – Adds practical features to blocks like icons, box shadows, transforms, etc.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fcounting-number-block\" rel=\"ugc\">Counting Number Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display numbers with a counting effect\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fbetter-youtube-embed-block\" rel=\"ugc\">Better YouTube Embed Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to solve the performance issue with embedded YouTube videos. It can also embed multiple videos and playlists.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>The plugin is developed using @wordpress\u002Fcreate-block.\u003C\u002Fp>\n","A simple breadcrumb trail block that supports JSON-LD structured data and is compatible with Woocommerce",3000,28662,13,"2025-11-24T03:04:00.000Z","5.9",[29,91,52,92,93],"breadcrumb","menu","navigation","https:\u002F\u002Fboldblocks.net?utm_source=Breadcrumb+Block&utm_campaign=visit+site&utm_medium=link&utm_content=Plugin+URI","https:\u002F\u002Fdownloads.wordpress.org\u002Fplugin\u002Fbreadcrumb-block.1.1.0.zip",{"slug":97,"name":98,"version":99,"author":5,"author_profile":6,"description":100,"short_description":101,"active_installs":102,"downloaded":103,"rating":9,"num_ratings":87,"last_updated":104,"tested_up_to":23,"requires_at_least":105,"requires_php":25,"tags":106,"homepage":111,"download_link":112,"security_score":34,"vuln_count":35,"unpatched_count":36,"last_vuln_date":113,"fetched_at":38},"content-blocks-builder","Content Blocks Builder – Create blocks, repeater blocks with carousel, grid, popup layouts","2.8.10","\u003Cp>Content Blocks Builder (CBB) helps you create \u003Cstrong>custom blocks\u003C\u002Fstrong>, \u003Cstrong>variations\u003C\u002Fstrong>, \u003Cstrong>styles\u003C\u002Fstrong>, and \u003Cstrong>patterns\u003C\u002Fstrong> — directly in the \u003Cstrong>Block Editor\u003C\u002Fstrong> without touching a \u003Cstrong>code editor\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003Cp>The WordPress Block Editor (Gutenberg) is a solid foundation for building websites. But when you need more specific layouts or custom functionality not available in default blocks, you’re often forced to write custom code or rely on bloated third-party plugins.\u003C\u002Fp>\n\u003Cp>CBB solves this by letting you visually group core or third-party blocks into flexible container blocks — right inside the native Block Editor. These container blocks support native features like typography, spacing, colors, borders, plus advanced features from CBB that help you build layouts like \u003Cstrong>responsive grid\u003C\u002Fstrong>, \u003Cstrong>slider\u002Fcarousel\u003C\u002Fstrong>, \u003Cstrong>toggle\u002Faccordion\u003C\u002Fstrong>, \u003Cstrong>modal\u002Foff-canvas\u002Fpopover\u003C\u002Fstrong>, \u003Cstrong>background effects\u003C\u002Fstrong> all without writing a single line of code.\u003C\u002Fp>\n\u003Cp>You can also build repeater blocks to display repeatable content — similar to ACF repeater field type, but entirely block-based and visual.\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fcontentblocksbuilder.com\u002Fdocumentation\u002Fcustom-blocks\u002F?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=CBB+Blocks\" rel=\"nofollow ugc\">👉 Read the detailed guide to CBB blocks\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>The ultimate goal of CBB is to help you build complex layouts — all with core blocks, all visually, and fully compatible with any Gutenberg-ready theme.\u003Cbr \u002F>\n\u003Cstrong>No React. No PHP. No lock-in. No clutter. No bloat. Developer-friendly.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Ch3>Key technical features\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Manage custom blocks\u003C\u002Fstrong>: Create, edit, copy, import, and delete custom blocks.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Create repeater blocks\u003C\u002Fstrong> that work similarly to ACF repeater fields. Supports carousel, grid, accordion and vertical stack layouts.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>[\u003Ca href=\"https:\u002F\u002Fcontentblocksbuilder.com\u002Fpro\u002F?utm_source=wp.org&utm_campaign=CBB+Upgrade&utm_medium=link&utm_content=CBB\" rel=\"nofollow ugc\">CBB Pro\u003C\u002Fa>] Extenral CSS\u002FJS and Custom CSS\u002FJS\u003C\u002Fstrong>: You can enqueue external CSS or JavaScript files and write your own custom code directly for your blocks. This feature makes CBB feel a bit like \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fcodepen.io\" rel=\"nofollow ugc\">CodePen.io\u003C\u002Fa>\u003C\u002Fstrong>—but for Gutenberg blocks. You can create anything you can imagine on the frontend.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Advanced block support features\u003C\u002Fstrong>: Modal, off-canvas, popover, toggle content, sticky, responsive dimensions, spacing, custom attributes, reveal animations, etc.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Manage block variations & block styles\u003C\u002Fstrong>: Create, edit, copy, import, and delete block variations. It works on any block. \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fcontentblocksbuilder.com\u002Fpro\u002F?utm_source=wp.org&utm_campaign=CBB+Upgrade&utm_medium=link&utm_content=CBB\" rel=\"nofollow ugc\">CBB Pro\u003C\u002Fa>\u003C\u002Fstrong> enables you to input custom CSS for variations.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Manage block patterns\u003C\u002Fstrong>: Create, edit, copy, import, and delete custom block patterns.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Enhance the Query Loop block\u003C\u002Fstrong>: Add grid, carousel layouts, and advanced filter and sorting settings. Works with any post types.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Import\u002Fexport\u003C\u002Fstrong> custom blocks, variations, and patterns from\u002Fto other sites\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Pre-built library\u003C\u002Fstrong>: A library of pre-built blocks, variations, styles, and patterns. This library is not bundled with CBB; only items you import appear on your site.\u003C\u002Fli>\n\u003Cli>CBB are built with vanilla JS and CSS. It only depends on \u003Ca href=\"https:\u002F\u002Fswiperjs.com\u002F\" rel=\"nofollow ugc\">SwiperJs\u003C\u002Fa> for the carousel functionality, — and even then, the script and styles are loaded only if the carousel layout is used.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Practical features you can build with CBB\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Carousel layouts\u003C\u002Fstrong>: Ideal for creating banner slider, posts carousel, gallery, carousel of features or other repeating content, etc. CBB provides one of the best way to create a carousel layout in Gutenberg. Built on top of the popular SwiperJs carousel script, it supports extensive customization. \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fcontentblocksbuilder.com\u002Fpro\u002F?utm_source=wp.org&utm_campaign=CBB+Upgrade&utm_medium=link&utm_content=CBB\" rel=\"nofollow ugc\">CBB Pro\u003C\u002Fa>\u003C\u002Fstrong> enables you to create entrance effects, advanced slide effects with effect builder, and further customization like slides per breakpoint, pagination, navigation, and synced carousels.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Responsive grid layouts\u003C\u002Fstrong>: Perfect for creating equal column grid, mosaic grid, bento grid, posts grid, grid of features or other repeating content, etc. CBB provides the easiest but most flexible and robost grid layout based on CSS Grid layout. You can customize template columns, grid gaps, size, and location for each grid item.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Accordion layouts\u003C\u002Fstrong>: Good for creating FAQ page, navigations, long features or specications.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Blog page design, magazine layout, post grid, post carousel\u003C\u002Fstrong>; Work with any post types.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Modal, off-canvas, popover, toggle content\u003C\u002Fstrong>: Great for creating popups, notification bars, toggle menu, toggle search box, hamburger menu, popover, show\u002Fhide content, etc. \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fcontentblocksbuilder.com\u002Fpro\u002F?utm_source=wp.org&utm_campaign=CBB+Upgrade&utm_medium=link&utm_content=CBB\" rel=\"nofollow ugc\">CBB Pro\u003C\u002Fa>\u003C\u002Fstrong> allows you to add a custom entrance animation effect, control when popups appear with delay options, trigger them on scroll to elements or exit intent, and remember when a popup has been closed.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Sticky content\u003C\u002Fstrong>: Great for fixed\u002Fsticky header, footer, floating elements, sticky sidebar. \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fcontentblocksbuilder.com\u002Fpro\u002F?utm_source=wp.org&utm_campaign=CBB+Upgrade&utm_medium=link&utm_content=CBB\" rel=\"nofollow ugc\">CBB Pro\u003C\u002Fa>\u003C\u002Fstrong> enables you to style blocks based on their stuck state and make blocks sticky only when scrolling up.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>[\u003Ca href=\"https:\u002F\u002Fcontentblocksbuilder.com\u002Fpro\u002F?utm_source=wp.org&utm_campaign=CBB+Upgrade&utm_medium=link&utm_content=CBB\" rel=\"nofollow ugc\">CBB Pro\u003C\u002Fa>] Backgound effect\u003C\u002Fstrong>: Add parallax, infinite scrolling, and zooming effect to image easily. Perfect for hero section designs.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>[\u003Ca href=\"https:\u002F\u002Fcontentblocksbuilder.com\u002Fpro\u002F?utm_source=wp.org&utm_campaign=CBB+Upgrade&utm_medium=link&utm_content=CBB\" rel=\"nofollow ugc\">CBB Pro\u003C\u002Fa>] Reveal animations\u003C\u002Fstrong>: Add stunning effects to blocks when they appear on the viewport the first time.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>[\u003Ca href=\"https:\u002F\u002Fcontentblocksbuilder.com\u002Fpro\u002F?utm_source=wp.org&utm_campaign=CBB+Upgrade&utm_medium=link&utm_content=CBB\" rel=\"nofollow ugc\">CBB Pro\u003C\u002Fa>] Custom layout & style\u003C\u002Fstrong>: With the ability to enqueue external JS\u002FCSS and input custom JS\u002FCSS, you can do anything with your blocks on frontend.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>For dynamic data, we recommend using the \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fmetafieldblock.com\" rel=\"nofollow ugc\">Meta Field Block\u003C\u002Fa>\u003C\u002Fstrong> plugin. It’s the best way to display dynamic data.\u003C\u002Fp>\n\u003Ch3>Why choose CBB?\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>It’s \u003Cstrong>fast\u003C\u002Fstrong>, \u003Cstrong>clean\u003C\u002Fstrong>, \u003Cstrong>flexible\u003C\u002Fstrong> and \u003Cstrong>code-free\u003C\u002Fstrong>. It \u003Cstrong>uses core blocks\u003C\u002Fstrong> to build container blocks.\u003C\u002Fli>\n\u003Cli>It’s \u003Cstrong>bloat-free\u003C\u002Fstrong>. It doesn’t come bundled with a ton of specific-use blocks like other multiple-feature plugins.\u003C\u002Fli>\n\u003Cli>It’s \u003Cstrong>easy to use\u003C\u002Fstrong>. It \u003Cstrong>adheres to Gutenberg\u003C\u002Fstrong> and maintain the primary user experience of Gutenberg, so anyone familiar with the Block Editor is already familiar with CBB.\u003C\u002Fli>\n\u003Cli>Sites built with CBB are \u003Cstrong>easier to maintain\u003C\u002Fstrong> as most tasks are accomplished through the Block Editor. You don’t need to know React to create complex blocks or maintain a code repository for them. You can also import\u002Fexport them from\u002Fto other sites.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>How does it help?\u003C\u002Fh3>\n\u003Cp>Below are some video tutorials that demonstrate how you can use this plugin to build your sites:\u003C\u002Fp>\n\u003Ch4>Create a grid repeater block to display a grid of repeating content\u003C\u002Fh4>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FQKIPH5pmEWw?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Ch4>Create a banner slider for your site directly on the Editor\u003C\u002Fh4>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FEEk-kSa59VE?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Ch4>Create a custom blog page\u003C\u002Fh4>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FaHy3spQVBGc?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Ch4>Create a featured posts section\u003C\u002Fh4>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FpaSXmpHU9K4?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Ch4>Create a glow-hover effect button variation\u003C\u002Fh4>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FrAWeQ2XLQJc?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Ch3>More video tutorials\u003C\u002Fh3>\n\u003Ch4>Create custom layouts\u003C\u002Fh4>\n\u003Cp>CBB includes five built-in layout blocks: Advanced Group, Grid, Carousel, Stack and Accordion. You can use them or build your custom layout blocks easily.\u003C\u002Fp>\n\u003Cp>Watch the video tutorial to create a simple responsive grid using the built-in Grid block.\u003C\u002Fp>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FawSC09tTnS8?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FmICLfKkF6tU\" rel=\"nofollow ugc\">Create a similar layout by creating a custom grid block\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>Watch the video tutorial to create a banner slider using the built-in Carousel block.\u003C\u002Fp>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FEh3kX-9_mDg?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Cp>Watch the video tutorial to create a FAQ section using the built-in Accordion block.\u003C\u002Fp>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FYA4-duNF_w4?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Ch4>Create popup, off-canvas, popover, and toggle content\u003C\u002Fh4>\n\u003Cp>With the toggle content feature, you can build a popup, off-canvas, popover, and toggle content easily and you can put anything in there.\u003C\u002Fp>\n\u003Cp>Watch the step-by-step video tutorial to create modal, off-canvas content.\u003C\u002Fp>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002Fy31TAKHZOD0?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FE4usfCydR7U\" rel=\"nofollow ugc\">Create a responsive header with hamburger menu and search bar toggle\u003C\u002Fa>.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002Fg_KOCqvU0Ps\" rel=\"nofollow ugc\">Create a notification bar\u003C\u002Fa>.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002F52jD9eeBJ78\" rel=\"nofollow ugc\">Create a video popup\u003C\u002Fa>.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FUEh_Da9Sozs\" rel=\"nofollow ugc\">Create a cookie popup\u003C\u002Fa>.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FYnUt-zQXnCU\" rel=\"nofollow ugc\">Create an off-canvas content\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch4>Enhance the Query Loop and other blocks\u003C\u002Fh4>\n\u003Cp>CBB provides a bunch of advanced features to add style to custom blocks like responsive width, height, spacing, border, box-shadow, transform, alignments etc. And by wrapping around other blocks, you can add those features to other blocks as well.\u003C\u002Fp>\n\u003Cp>How to build a magazine layout grid with just one Query Loop block\u003C\u002Fp>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FQ4LP68Dh_Pc?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FbcK_k3IfW8g\" rel=\"nofollow ugc\">Create a banner slider using the Query Loop block\u003C\u002Fa>.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=i8d8Pha921c\" rel=\"nofollow ugc\">Create a carousel of posts using the Query Loop block\u003C\u002Fa>.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FYQHrf4xFctg\" rel=\"nofollow ugc\">Create a blog layout with overlay style using the Query Loop block\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch4>Create block variations, block styles, and block patterns\u003C\u002Fh4>\n\u003Cp>CBB helps you create custom variations, styles, and patterns directly in the Block Editor without using a code editor.\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FBAY8_evbyL0\" rel=\"nofollow ugc\">Create variations and styles for the core image block\u003C\u002Fa>.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FcaiY-YZT7ZY\" rel=\"nofollow ugc\">Create variations for any block\u003C\u002Fa>.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FgfSNwcAb-xc\" rel=\"nofollow ugc\">Create patterns\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch4>Google Fonts\u003C\u002Fh4>\n\u003Cp>This feature does a really simple job, it loads a font for headings text and another for the body text from more than 1000+ Google Fonts easily with a few clicks. If you are worried about GDPR compliance, there is an option to load fonts from \u003Ca href=\"https:\u002F\u002Ffonts.bunny.net\u002F\" rel=\"nofollow ugc\">Bunny Fonts\u003C\u002Fa> instead of \u003Ca href=\"https:\u002F\u002Ffonts.google.com\u002F\" rel=\"nofollow ugc\">Google Fonts\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=rhd4SEKUcHU\" rel=\"nofollow ugc\">How to use Google Fonts and be GDPR compliant\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch3>Which theme should I use with this plugin?\u003C\u002Fh3>\n\u003Cp>It is compatible with all Gutenberg-ready themes, but our recommended themes are default themes such as \u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fthemes\u002Ftwentytwentyfour\u002F\" rel=\"ugc\">Twenty Twenty Four\u003C\u002Fa>, \u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fthemes\u002Ftwentytwentyfive\u002F\" rel=\"ugc\">Twenty Twenty Five\u003C\u002Fa>, \u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fthemes\u002Ftwentytwentythree\u002F\" rel=\"ugc\">Twenty Twenty Three\u003C\u002Fa>, \u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fthemes\u002Ftwentytwentytwo\u002F\" rel=\"ugc\">Twenty Twenty Two\u003C\u002Fa>, or \u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fthemes\u002Fastra\u002F\" rel=\"ugc\">Astra\u003C\u002Fa> theme.\u003C\u002Fp>\n\u003Ch3>How does it work with other blocks\u002Fplugins?\u003C\u002Fh3>\n\u003Cp>This plugin works with all third-party blocks but we recommend using single-block plugins for lightweight and performance. We also develop several single block plugins, that work great with this plugin, please see them in the below section.\u003C\u002Fp>\n\u003Ch3>Design library\u003C\u002Fh3>\n\u003Cp>We have already included a library of block patterns for you to quickly use or customize to fit your design. There is a popup inserter in the block editor for you to find and insert patterns with a few clicks.\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FUTrZSBvkzj0\" rel=\"nofollow ugc\">How to use the pattern inserter popup\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>Browse the \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fboldpatterns.net?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=CBB\" rel=\"nofollow ugc\">Design Library\u003C\u002Fa>\u003C\u002Fstrong> to see what the plugin can do for you.\u003C\u002Fp>\n\u003Ch3>Block and Variation library\u003C\u002Fh3>\n\u003Cp>Besides the pattern library, we have built an external library of content blocks and common block variations. All of the blocks\u002Fvariations in this library have been created by CBB directly in the Block Editor. With a few clicks, you can easily import blocks or variations into your site. You use them directly or customize or learn from them.\u003C\u002Fp>\n\u003Cp>Watch some video tutorials to learn how to use the library:\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FBVvImhhZma4\" rel=\"nofollow ugc\">Import the particles background block\u003C\u002Fa>.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FhQBItwIu_90\" rel=\"nofollow ugc\">Import the basic header block\u003C\u002Fa>.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FUpN9bdvs7Rs\" rel=\"nofollow ugc\">Import the Query Loop variations\u003C\u002Fa>.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FU-e6wbFGiYg\" rel=\"nofollow ugc\">Import the arrow buttons\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch3>Learn CBB\u003C\u002Fh3>\n\u003Cp>Check out the documentation at \u003Ca href=\"https:\u002F\u002Fcontentblocksbuilder.com\u002Fdocumentation?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=CBB\" rel=\"nofollow ugc\">contentblocksbuilder.com\u003C\u002Fa>.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002F@boldblocks\u002Fvideos\" rel=\"nofollow ugc\">Watch all tutorials on Youtube\u003C\u002Fa>.\u003Cbr \u002F>\nWe’re still recording video tutorials, so please \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCB7Y3mlCEKHVM-RCZaTkR1g?sub_confirmation=1\" rel=\"nofollow ugc\">subscribe to our YouTube channel\u003C\u002Fa> to get a notification when new videos are released.\u003C\u002Fp>\n\u003Ch3>Pro version\u003C\u002Fh3>\n\u003Cp>In short, the professional version adds following advanced features to your content such as:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Custom CSS\u003C\u002Fstrong>: Adjusts layout and style easily right in the inspector settings.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Enqueue external JS\u002FCSS\u003C\u002Fstrong> and \u003Cstrong>add custom JS\u002FCSS\u003C\u002Fstrong> to blocks. This powerful feature lets you create blocks with any style or interactive effect, just like on CodePen.io. You write the JS\u002FCSS, and CBB takes care of the rest behind the scenes.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Premium background effects\u003C\u002Fstrong>: Includes parallax, infinite scrolling, and zooming effect to background image.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Premium carousel features\u003C\u002Fstrong>: Adds entrance animations, advanced effects, an effect builder, customized pagination, navigation, etc.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Premium toggle content features\u003C\u002Fstrong>: Enhancements for modal, off-canvas, and popover content with custom entrance animations, delay time, trigger on scroll, exit intent, and closed state saving.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Premium sticky content features\u003C\u002Fstrong>: Detects stuck state and adds the ability to make blocks sticky only on scrolling up.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Add custom CSS\u003C\u002Fstrong> to variations.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Reveal\u002Fentrance animations\u003C\u002Fstrong>: Adds stunning effects to blocks when they first appear in the viewport.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Check out this video tutorial to learn how to create a Google Map block and see how Content Blocks Builder (CBB Pro) helps you build powerful, custom Gutenberg blocks — without writing any React or PHP code.\u003C\u002Fp>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FhhH3bHrh_4U?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Cp>Watch more video tutorials to see how the Pro version can help you build advanced features for your sites:\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FKEryi1y1UZ4\" rel=\"nofollow ugc\">Create a sticky header\u003C\u002Fa>.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FWgHuo6jwyN8\" rel=\"nofollow ugc\">Create a custom block for the image zooming effect like Medium using an external script\u003C\u002Fa>.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002F0g1SLTq-lQ4\" rel=\"nofollow ugc\">Create a page title bar with a parallax background effect\u003C\u002Fa>.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FRfPPTg93WcQ\" rel=\"nofollow ugc\">How to create an animated heading block\u003C\u002Fa>.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002F0aTKpeTvgUY\" rel=\"nofollow ugc\">How to create a Back To Top block\u003C\u002Fa>.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002F1tmIWXHv4gE\" rel=\"nofollow ugc\">How to create an image compare block\u003C\u002Fa>.\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FmBleA20caGo\" rel=\"nofollow ugc\">Create the infinite scrolling background effect\u003C\u002Fa>\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FnDpeQbpu50s\" rel=\"nofollow ugc\">Create the parallax background effect\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fcontentblocksbuilder.com\u002Fpro\u002F?utm_source=wp.org&utm_campaign=CBB+Upgrade&utm_medium=link&utm_content=CBB\" rel=\"nofollow ugc\">Go premium\u003C\u002Fa>\u003C\u002Fstrong> to unlock advanced features with CBB Pro.\u003C\u002Fp>\n\u003Cp>If this plugin is useful for you, please do a quick review and \u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fsupport\u002Fplugin\u002Fcontent-blocks-builder\u002Freviews\u002F#new-post\" rel=\"ugc\">rate it\u003C\u002Fa> on WordPress.org to help us spread the word. I would very much appreciate it.\u003C\u002Fp>\n\u003Ch3>Other plugins\u003C\u002Fh3>\n\u003Cp>Please check out my other plugins if you’re interested:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fdisplay-a-meta-field-as-block\" rel=\"ugc\">Meta Field Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display custom fields as blocks on the front end. It supports custom fields for posts, terms, users, and setting fields. It can also be used in the Query Loop block.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fsvg-block\" rel=\"ugc\">SVG Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display SVG images as blocks. Useful for images, icons, dividers, and buttons. It allows you to upload SVG images and load them into the icon library.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Ficon-separator\" rel=\"ugc\">Icon separator\u003C\u002Fa>\u003C\u002Fstrong> – A tiny block just like the core\u002Fseparator block but with the ability to add an icon.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fbreadcrumb-block\" rel=\"ugc\">Breadcrumb Block\u003C\u002Fa>\u003C\u002Fstrong> – A simple breadcrumb trail block that supports JSON-LD structured data and is compatible with WooCommerce.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fblock-enhancements\" rel=\"ugc\">Block Enhancements\u003C\u002Fa>\u003C\u002Fstrong> – Adds practical features to blocks like icons, box shadows, transforms, etc.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fcounting-number-block\" rel=\"ugc\">Counting Number Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display numbers with a counting effect\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fbetter-youtube-embed-block\" rel=\"ugc\">Better YouTube Embed Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to solve the performance issue with embedded YouTube videos. It can also embed multiple videos and playlists.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>The plugin is developed using @wordpress\u002Fscripts. The source code is available in the trunk branch.\u003Cbr \u002F>\nThe pattern, block, and variation library is hosted at \u003Ca href=\"https:\u002F\u002Fboldpatterns.net?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=CBB\" rel=\"nofollow ugc\">https:\u002F\u002Fboldpatterns.net\u003C\u002Fa>.\u003C\u002Fp>\n","Group core blocks into containers or repeaters to create layouts like grid, carousel, popup, accordion all in the Block Editor. Fast. Easy.",1000,43214,"2026-03-09T14:55:00.000Z","6.6",[107,108,109,52,110],"blocks","carousel","grid","popup","https:\u002F\u002Fcontentblocksbuilder.com?utm_source=CBB&utm_campaign=CBB+visit+site&utm_medium=link&utm_content=Plugin+URI","https:\u002F\u002Fdownloads.wordpress.org\u002Fplugin\u002Fcontent-blocks-builder.2.8.10.zip","2025-01-07 00:00:00",{"slug":115,"name":116,"version":117,"author":5,"author_profile":6,"description":118,"short_description":119,"active_installs":102,"downloaded":120,"rating":9,"num_ratings":121,"last_updated":122,"tested_up_to":49,"requires_at_least":89,"requires_php":23,"tags":123,"homepage":127,"download_link":128,"security_score":9,"vuln_count":36,"unpatched_count":36,"last_vuln_date":57,"fetched_at":38},"counting-number-block","Counting Number Block","1.1.2","\u003Cp>This single-block plugin makes your numbers stand out by animating them while still keeping them SEO-friendly, accessibility-ready, and respecting the reduced motion mode. The number can be counted up or down.\u003C\u002Fp>\n\u003Cp>This block performs one simple job: animating numbers. You can combine it with other blocks to fit any design.\u003C\u002Fp>\n\u003Ch3>Key features\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>It can be counted up or down depending on the start value and the real value\u003C\u002Fli>\n\u003Cli>SEO and Accessibility ready – Screen readers will read the actual number value, not the animated one.\u003C\u002Fli>\n\u003Cli>It can be fit in any design\u003C\u002Fli>\n\u003Cli>Highly customizable with a large range of options like duration, separator, decimal, etc.\u003C\u002Fli>\n\u003Cli>You can animate it one time or multiple times whenever the block appears in the viewport\u003C\u002Fli>\n\u003Cli>You can provide a prefix and\u002For a suffix value\u003C\u002Fli>\n\u003Cli>The animated effect will not be shown in the reduced motion mode\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Please take a look at \u003Ca href=\"https:\u002F\u002Fboldpatterns.net\u002Fkeywords\u002Fnumber?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=Counting+Number+Block\" rel=\"nofollow ugc\">these custom block patterns\u003C\u002Fa> that use this block to see how it can be applied to real-world sites.\u003C\u002Fp>\n\u003Cp>If this plugin is useful for you, please do a quick review and \u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fsupport\u002Fplugin\u002Fcounting-number-block\u002Freviews\u002F#new-post\" rel=\"ugc\">rate it\u003C\u002Fa> on WordPress.org to help us spread the word. I would very much appreciate it.\u003C\u002Fp>\n\u003Ch3>Other plugins\u003C\u002Fh3>\n\u003Cp>Please check out my other plugins if you’re interested:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fcontent-blocks-builder\" rel=\"ugc\">Content Blocks Builder\u003C\u002Fa>\u003C\u002Fstrong> – This plugin turns the Block Editor into a powerful page builder by allowing you to create blocks, variations, and patterns directly in the Block Editor without needing a code editor.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fdisplay-a-meta-field-as-block\" rel=\"ugc\">Meta Field Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display custom fields as blocks on the front end. It supports custom fields for posts, terms, users, and setting fields. It can also be used in the Query Loop block.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fsvg-block\" rel=\"ugc\">SVG Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display SVG images as blocks. Useful for images, icons, dividers, and buttons. It allows you to upload SVG images and load them into the icon library.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Ficon-separator\" rel=\"ugc\">Icon separator\u003C\u002Fa>\u003C\u002Fstrong> – A tiny block just like the core\u002Fseparator block but with the ability to add an icon.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fbreadcrumb-block\" rel=\"ugc\">Breadcrumb Block\u003C\u002Fa>\u003C\u002Fstrong> – A simple breadcrumb trail block that supports JSON-LD structured data and is compatible with WooCommerce.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fblock-enhancements\" rel=\"ugc\">Block Enhancements\u003C\u002Fa>\u003C\u002Fstrong> – Adds practical features to blocks like icons, box shadows, transforms, etc.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fbetter-youtube-embed-block\" rel=\"ugc\">Better YouTube Embed Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to solve the performance issue with embedded YouTube videos. It can also embed multiple videos and playlists.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>The plugin is developed using @wordpress\u002Fcreate-block. The source code is in the trunk branch.\u003C\u002Fp>\n","This block provides an animated counter effect for numbers. It’s fast, lightweight, SEO-friendly, accessibility-ready, and fits any design.",13489,9,"2026-02-11T10:10:00.000Z",[124,29,125,52,126],"animation","counter","number","https:\u002F\u002Fboldblocks.net?utm_source=Counting+Number+Block&utm_campaign=visit+site&utm_medium=link&utm_content=Plugin+URI","https:\u002F\u002Fdownloads.wordpress.org\u002Fplugin\u002Fcounting-number-block.1.1.2.zip",{"slug":130,"name":131,"version":132,"author":5,"author_profile":6,"description":133,"short_description":134,"active_installs":102,"downloaded":135,"rating":9,"num_ratings":136,"last_updated":137,"tested_up_to":49,"requires_at_least":68,"requires_php":23,"tags":138,"homepage":141,"download_link":142,"security_score":9,"vuln_count":36,"unpatched_count":36,"last_vuln_date":57,"fetched_at":38},"icon-separator","Icon Separator","1.2.4","\u003Cp>A simple, lightweight, accessibility-ready icon separator block.\u003C\u002Fp>\n\u003Ch3>Key Features\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Customize the icon width, spacing, color and position.\u003C\u002Fli>\n\u003Cli>Customize the separator width, style, color and position.\u003C\u002Fli>\n\u003Cli>Accessibility ready with ‘separator’ role.\u003C\u002Fli>\n\u003Cli>Simple and easy to use but included full settings even with responsive width and responsive vertical margin.\u003C\u002Fli>\n\u003Cli>An icon library included icons from “Bootstrap Icons”, “Ionicons”, “Dashicons” and new “WordPress Icons”.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Please take a look at \u003Ca href=\"https:\u002F\u002Fboldpatterns.net\u002Fkeywords\u002Fseparator?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=Icon+Separator\" rel=\"nofollow ugc\">these custom block patterns\u003C\u002Fa> that use this block to see how it can be applied to real-world sites.\u003C\u002Fp>\n\u003Cp>If this plugin is useful for you, please do a quick review and \u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fsupport\u002Fplugin\u002Ficon-separator\u002Freviews\u002F#new-post\" rel=\"ugc\">rate it\u003C\u002Fa> on WordPress.org to help us spread the word. I would very much appreciate it.\u003C\u002Fp>\n\u003Cp>Please check out my other plugins if you’re interested:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fcontent-blocks-builder\" rel=\"ugc\">Content Blocks Builder\u003C\u002Fa>\u003C\u002Fstrong> – This plugin turns the Block Editor into a powerful page builder by allowing you to create blocks, variations, and patterns directly in the Block Editor without needing a code editor.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fdisplay-a-meta-field-as-block\" rel=\"ugc\">Meta Field Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display custom fields as blocks on the front end. It supports custom fields for posts, terms, users, and setting fields. It can also be used in the Query Loop block.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fsvg-block\" rel=\"ugc\">SVG Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display SVG images as blocks. Useful for images, icons, dividers, and buttons. It allows you to upload SVG images and load them into the icon library.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fbreadcrumb-block\" rel=\"ugc\">Breadcrumb Block\u003C\u002Fa>\u003C\u002Fstrong> – A simple breadcrumb trail block that supports JSON-LD structured data and is compatible with WooCommerce.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fblock-enhancements\" rel=\"ugc\">Block Enhancements\u003C\u002Fa>\u003C\u002Fstrong> – Adds practical features to blocks like icons, box shadows, transforms, etc.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fcounting-number-block\" rel=\"ugc\">Counting Number Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display numbers with a counting effect\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fbetter-youtube-embed-block\" rel=\"ugc\">Better YouTube Embed Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to solve the performance issue with embedded YouTube videos. It can also embed multiple videos and playlists.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>The plugin is developed using @wordpress\u002Fcreate-block.\u003C\u002Fp>\n","A simple, lightweight, accessibility-ready icon separator block.",21328,4,"2025-11-22T13:48:00.000Z",[29,139,72,140,74],"divider","separator","https:\u002F\u002Fboldblocks.net?utm_source=Icon+Separator&utm_campaign=visit+site&utm_medium=link&utm_content=Plugin+URI","https:\u002F\u002Fdownloads.wordpress.org\u002Fplugin\u002Ficon-separator.1.2.4.zip",{"slug":144,"name":145,"version":146,"author":5,"author_profile":6,"description":147,"short_description":148,"active_installs":149,"downloaded":150,"rating":151,"num_ratings":7,"last_updated":152,"tested_up_to":49,"requires_at_least":68,"requires_php":23,"tags":153,"homepage":156,"download_link":157,"security_score":9,"vuln_count":36,"unpatched_count":36,"last_vuln_date":57,"fetched_at":38},"block-enhancements","Block Enhancements – Extended styling for the Block Editor","1.2.11","\u003Cp>\u003Cstrong>Block Enhancements\u003C\u002Fstrong> adds powerful design options to core Gutenberg blocks, so you don’t need to install heavy custom block libraries.\u003Cbr \u002F>\nIt’s the easiest way to make your existing blocks more flexible and responsive while keeping your site fast and clean. All dynamic styles are rendered in the document head instead of inline styles. If you deactivate the plugin, all customized styles are removed, and no leftover styles will affect your site.\u003Cbr \u002F>\nUnlike other similar plugins, this plugin is lightweight. It only loads what you need. You can enable or disable individual features per block type from the plugin’s settings page.\u003C\u002Fp>\n\u003Cp>\u003Cem>It works with all Gutenberg-ready themes, however, the with-icon feature uses the CSS pseudo \u003Ccode>::before\u003C\u002Fcode> to add icons with the \u003Ccode>mask-image\u003C\u002Fcode> CSS property. It may conflict with other plugins or themes that use the same technique.\u003C\u002Fem>\u003C\u002Fp>\n\u003Ch3>Key Features\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Add icons to buttons, headings, lists, navigation blocks (built-in 3000+ icon library or custom SVGs).\u003C\u002Fli>\n\u003Cli>Set responsive dimensions: padding, margin, and block spacing per device.\u003C\u002Fli>\n\u003Cli>Adjust responsive typography: font size, weight, line height, letter spacing per device.\u003C\u002Fli>\n\u003Cli>Apply 2D transforms (translate, rotate, skew, scale) per device with hover styles.\u003C\u002Fli>\n\u003Cli>Add box-shadow and text-shadow with hover state styles.\u003C\u002Fli>\n\u003Cli>Customize text and background colors with hover styles.\u003C\u002Fli>\n\u003Cli>Control responsive text alignment for Group, Columns, and Column blocks.\u003C\u002Fli>\n\u003Cli>Use transitions for smooth hover style changes.\u003C\u002Fli>\n\u003Cli>Define responsive CSS positions (relative, absolute, sticky, static) with custom offsets.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>How responsive styles work\u003C\u002Fh3>\n\u003Cp>Responsive styles are applied per device mode: Desktop, Tablet, and Mobile. When you edit a style for a block for the first time, the current device mode becomes the source, and the other modes will automatically inherit those styles.\u003C\u002Fp>\n\u003Cp>For example, if you set styles in Desktop mode first, Tablet and Mobile will inherit the Desktop styles by default. If you want different styles for Tablet or Mobile, switch to that mode and adjust the settings there. The same behavior applies if you start editing in Tablet or Mobile mode. Each device mode can be customized independently once it has been edited.\u003C\u002Fp>\n\u003Cp>By default, the breakpoints are:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Desktop: 1024px\u003C\u002Fli>\n\u003Cli>Tablet: 768px\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>If your theme or another plugin uses different breakpoints, you can change the defaults using the following filter:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>    apply_filters( 'block_enhancements_get_breakpoints', [\n      'sm' => [\n        'breakpoint' => '576px',\n        'mediaQuery' => '',\n      ],\n      'md' => [\n        'breakpoint' => '768px',\n        'mediaQuery' => '@media (min-width: 768px){##CONTENT##}',\n      ],\n      'lg' => [\n        'breakpoint' => '1024px',\n        'mediaQuery' => '@media (min-width: 1024px){##CONTENT##}',\n      ],\n    ] );\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>This allows you to align responsive behavior with your theme’s breakpoint system.\u003C\u002Fp>\n\u003Ch3>Common use cases\u003C\u002Fh3>\n\u003Col>\n\u003Cli>Add icons to blocks (button, heading, list, navigation).\u003C\u002Fli>\n\u003Cli>Change spacing (padding, margin, block spacing) for button, group, row, grid, columns, gallery blocks per device.\u003C\u002Fli>\n\u003Cli>Change typography (font size, font weight, line-height, letter spacing) per device.\u003C\u002Fli>\n\u003Cli>Change text-alignment for group blocks per device. For example text-align center on mobile but text-align left on the desktop.\u003C\u002Fli>\n\u003Cli>Add 2D transforms with hover styles.\u003C\u002Fli>\n\u003Cli>Add box-shadow, text-shadow with hover styles.\u003C\u002Fli>\n\u003Cli>Change text color, background color on mouse hover.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch3>How to use a feature\u003C\u002Fh3>\n\u003Col>\n\u003Cli>Select the block in the Block Editor.\u003C\u002Fli>\n\u003Cli>Choose the style tab from the inspector settings.\u003C\u002Fli>\n\u003Cli>Click on the plus (+) icon of the Block Enhancements panel to choose the feature and input your settings.\u003C\u002Fli>\n\u003Cli>If the feature does not show up, go to the setting page (Settings \u003Cspan aria-hidden=\"true\" class=\"wp-exclude-emoji\">→\u003C\u002Fspan> Block Enhancements) to add the feature to your block type.\u003C\u002Fli>\n\u003Cli>To input settings for responsive features, you have to switch to between device mode (Desktop\u002FTablet\u002FMobile).\u003C\u002Fli>\n\u003Cli>The responsive text alignment settings is on the block toolbar not in the inspector settings.\u003C\u002Fli>\n\u003Cli>See the video tutorials and the screenshots for more details.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch3>Video tutorials\u003C\u002Fh3>\n\u003Cp>How to customize a core button in Gutenberg:\u003C\u002Fp>\n\u003Cspan class=\"embed-youtube\" style=\"text-align:center; display: block;\">\u003Ciframe loading=\"lazy\" class=\"youtube-player\" width=\"750\" height=\"422\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FuW3xEH6U-C0?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\">\u003C\u002Fiframe>\u003C\u002Fspan>\n\u003Cp>Please help this plugin grow by reporting issues and giving suggestions.\u003C\u002Fp>\n\u003Cp>If this plugin is useful for you, please do a quick review and \u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fsupport\u002Fplugin\u002Fblock-enhancements\u002Freviews\u002F#new-post\" rel=\"ugc\">rate it\u003C\u002Fa> on WordPress.org to help us spread the word. I would very much appreciate it.\u003C\u002Fp>\n\u003Cp>Please check out my other plugins if you’re interested:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fcontent-blocks-builder\" rel=\"ugc\">Content Blocks Builder\u003C\u002Fa>\u003C\u002Fstrong> – Build custom layouts and blocks visually in the Block Editor without needing a code editor, using only core blocks and native Gutenberg features.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fdisplay-a-meta-field-as-block\" rel=\"ugc\">Meta Field Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display custom fields as blocks on the front end. It supports custom fields for posts, terms, users, and setting fields. It can also be used in the Query Loop block.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fsvg-block\" rel=\"ugc\">SVG Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display SVG images as blocks. Useful for images, icons, dividers, and buttons. It allows you to upload SVG images and load them into the icon library.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Ficon-separator\" rel=\"ugc\">Icon separator\u003C\u002Fa>\u003C\u002Fstrong> – A tiny block just like the core\u002Fseparator block but with the ability to add an icon.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fbreadcrumb-block\" rel=\"ugc\">Breadcrumb Block\u003C\u002Fa>\u003C\u002Fstrong> – A simple breadcrumb trail block that supports JSON-LD structured data and is compatible with WooCommerce.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fcounting-number-block\" rel=\"ugc\">Counting Number Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to display numbers with a counting effect\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fbetter-youtube-embed-block\" rel=\"ugc\">Better YouTube Embed Block\u003C\u002Fa>\u003C\u002Fstrong> – A block to solve the performance issue with embedded YouTube videos. It can also embed multiple videos and playlists.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>The plugin is developed using @wordpress\u002Fscripts. The source code is available in the trunk branch.\u003C\u002Fp>\n","Add icon, responsive spacing, typography, alignment, shadow, transform, transition, color, hover style to blocks. Lightweight, fast, and clean.",600,11261,96,"2026-01-20T04:04:00.000Z",[107,71,154,72,155],"hover","responsive","https:\u002F\u002Fboldblocks.net?utm_source=BE&utm_campaign=visit+site&utm_medium=link&utm_content=Plugin+URI","https:\u002F\u002Fdownloads.wordpress.org\u002Fplugin\u002Fblock-enhancements.1.2.11.zip"]