To create a custom block in WordPress Gutenberg that allows for nested containers in the layout, follow these steps:
Create a new directory in your WordPress theme or plugin called "custom_blocks".
Within the custom_blocks directory, create a new file called "nested-container.php" and add the following code:
<?php
/**
* Nested Container
*
* A custom block that allows for nested containers in the layout.
*/
function register_nested_container_block() {
register_block_type(
'custom-blocks/nested-container',
array(
'editor_script' => 'nested-container-editor-script',
'render_callback' => 'render_nested_container_block'
)
);
}
add_action( 'init', 'register_nested_container_block' );
function enqueue_nested_container_editor_assets() {
wp_enqueue_script(
'nested-container-editor-script',
get_template_directory_uri() . '/custom_blocks/nested-container.js',
array( 'wp-blocks', 'wp-editor' ),
filemtime( get_template_directory() . '/custom_blocks/nested-container.js' )
);
}
add_action( 'enqueue_block_editor_assets', 'enqueue_nested_container_editor_assets' );
function render_nested_container_block( $attributes, $content ) {
return '<div class="nested-container">' . do_blocks( $content ) . '</div>';
}
const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.editor;
registerBlockType( 'custom-blocks/nested-container', {
title: 'Nested Container',
icon: 'editor-table',
category: 'layout',
attributes: {},
edit: props => {
return (
<div className="nested-container">
<InnerBlocks allowedBlocks={['core/columns', 'custom-blocks/nested-container']} />
</div>
);
},
save: props => {
return (
<div className="nested-container">
<InnerBlocks.Content />
</div>
);
},
} );
require get_template_directory() . '/custom_blocks/nested-container.php';
With these steps, you have created a custom block in WordPress Gutenberg that allows for nested containers. The block will appear in the "Layout" category of the block editor and can be used to add nested containers to your layout.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2023-05-31 21:22:35 +0000
Seen: 9 times
Last updated: May 31 '23
How can a HTTP header be inserted in WordPress?
How can data be stored in a data attribute and utilized through Ajax?
How can an array be passed using typo3 flexform xml and itemsProcConfig?
Does JSON encode fail to retrieve data from the database?
Can the GS1 128 barcode decoder in PHP or Jquery be utilized?
How can Xdebug be used in conjunction with VSCode for Laravel on Sail and WSL2?
In PHP, what is the method for finding encrypted data using the "like" operator?
What is the method to pass a variable from PHP back to JavaScript?
Why do PHP variable variables display unexpected behavior when used with arrays?