Gutenberg InnerBlocks predefined block supports

Your template for InnerBlocks has a small typo in supports: { classname: false } (it’s case-sensitive) and should be className: const MY_TEMPLATE = [ [ ‘my-block/icon’, { supports: { className: false } } ], … ]; The supports definition is correct in your my-block/icon block registration. Assuming your save() function handles <InnerBlocks.Content>correctly, with the className typo fixed, it should work. When in the Editor view … Read more

Integrating slick.js into wordpress

Adjusted some of your code. This should work: [php]<?php /** * Block Name: Testimonials * * This is the template that displays the testimonials loop block. */ $argType = get_field(‘loop_argument_type’); if ($argType == "count") : $args = array( ‘orderby’ => ‘title’, ‘post_type’ => ‘testimonials’, ‘posts_per_page’ => get_field(‘testimonial_count’) ); else : $testimonials = get_field(‘select_testimonials’); $args = … Read more

Media library style not loading correctly when selecting a page featured image – WordPress

After some search, the problem was in the pages which contains ACF blocks ACF plugin is not compatible with the latest WP 5.9.1 temporary fixes until the update has been released : 1- In your functions.php file add these lines: [php]function acf_fix_preload_path( $preload_paths ) { global $post; $rest_path = rest_get_route_for_post( $post ); $remove_path = add_query_arg( ‘context’, ‘edit’, … Read more

Restrict Gutenberg Blocks to Single Use

For anyone who needs this too, here is how you restrict a block for single use only: [php]// A Sample Block acf_register_block(array( ‘name’ => ‘blockname’, ‘title’ => __(‘Block Name’,’slug’), ‘description’ => __(‘A translatable description’,’slug’), ‘render_callback’ => ‘theme_block_render’, ‘category’ => ’embed’, //the block category (optional) ‘align’ => ‘wide’, // default value for width ‘mode’ => ‘auto’, … Read more

How to make a dropdown list control that fetches names of custom posts types

If creating a dropdown list (select) for the edit() function of a Gutenberg block, registered post types can be retrieved with getPostTypes() via useSelect() in JavaScript. An example of this is the dropdown in the Query Block to select a Post Type. Below is a simplified example that uses a <SelectControl/> to display a list of all viewable post types, and enables a selected postType … Read more

Render WooCommerce Block ‘Product Filter – Attributes’ in code rather than via backend

Block content (including woocommerce blocks) can be rendered in a template via the do_blocks() function. The easiest way to generate the block code is to create a new post/page, insert the block you want, configure the attributes/settings as needed, then switch from the Visual editor to the Code editor (shortcut: Ctrl+Shift+Alt+M) to get the code required. Here is an example of the … Read more

How to Add Container Div to Every Gutenberg-Block in WordPress

If someone also need this nowadays WordPress already has another filter that is easier to implement called render_block render_block Here is an example [php]function wporg_block_wrapper( $block_content, $block ) { if ( $block[‘blockName’] === ‘core/paragraph’ ) { $content = ‘<div class="wp-block-paragraph">’; $content .= $block_content; $content .= ‘</div>’; return $content; } elseif ( $block[‘blockName’] === ‘core/heading’ ) { … Read more

How do I use a Font Awesome icon for a custom Gutenberg block?

Success! I had to pass the viewBox attribute from the Font Awesome SVG file. The code below worked for me: [php]const iconEl = el(‘svg’, { width: 20, height: 20, viewBox: ‘0 0 512 512’ }, el(‘path’, { d: "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 … Read more