Yes you can use the index.asset.php file in the ‘enqueue_block_editor_assets’ action. I guess you missed to npm install the dependencies you want to use and import them in your script. That’s how @wordpress/scripts generates your asset.php file. If you do not import the dependencies in your JavaScript files the dependency management of asset.php wont work. … Read more
It can be done through inputProps prop. Check below example: <BoxControl label={ __(‘Margin’, ‘text-domain’) } onChange={ (margins) => setAttributes({margins}) } inputProps={{ min: -300 }} />
Explanation of the issues in your code: The main one which causes the block editor to crash, is because you used InnerBlocks in the save function. You should instead use InnerBlocks.Content. See this and this for more details on InnerBlocks usage, accepted props, etc. As for the getAttribute error, it’s because you did not use … Read more
You can use the admin_body_class hook to add your own CSS classes. For example (if you’re using Gutenberg): function pb_admin_body_class($classes) { $screen = get_current_screen(); if (!$screen->is_block_editor()) { return $classes; } $post_id = isset($_GET[‘post’]) ? intval($_GET[‘post’]) : false; $post_type = get_post_type($post_id); if ($post_type) { $classes .= $post_type; } return $classes; } add_filter(‘admin_body_class’, ‘pb_admin_body_class’);
You can eliminate the wrapping containers abandoning InnerBlocks and instead using the useInnerBlocksProps hook which is how the blocks that come with core do it. This will allow your block markup to match the frontend without the editor wrapping things in additional tags. If we look at the official buttons block: import { BlockControls, useBlockProps, … Read more
The group block comes to mind as an out of the box pattern wrapper with a custom class mywrapper: <!– wp:group {“className”:”mywrapper”} –> <div class=”wp-block-group mywrapper”><div class=”wp-block-group__inner-container”> …pattern… </div></div> <!– /wp:group –> Theoretically one can use the custom html block as a pattern, like: <!– wp:html –> <div class=”mywrappper”> <h1 class=”has-text-align-center”>Block 1</h1> <h2 class=”has-text-align-center”>Block 2</h2> … Read more
This is fairly easy to achieve with two custom blocks: (1) for the wrapper <ul>…</ul> element and (2) another for the <li>…</li> items. Each would use InnerBlocks to allow you to place any blocks within the <li> items. Basic example to get you started: import { __ } from ‘@wordpress/i18n’; import { registerBlockType } from … Read more
In the functions.php file I added add_filter( ‘allowed_block_types_all’, ‘func_allowed_block_types’ ); function func_allowed_block_types( $allowed_blocks ) { return array( ‘core/embed’ ); } Then in my plugin I added this JS to the javascript file to enable only the embed blocks I wanted (Twitter, youTube and Vimeo) wp.domReady( function() { const allowedEmbedBlocks = [ ‘twitter’,’youtube’, ‘vimeo’ ]; wp.blocks.getBlockType( … Read more
I’d recommend looking at how the existing Button component works to get a sense of how Gutenberg does things. Specifically it uses a <RichText/> component (instead of a native <input>) which allows you to specify the tag name while also supporting user input. Generally I’d advice against using <input> elements whenever possible. WordPress makes available … Read more
I found the solution… must use getEntityRecord not getEntityRecods: select(“core”).getEntityRecord(“postType”, “attachment”, post.featured_media);