I was able to solve this by wrapping the BlockEdit component in my own markup: <Fragment> <div className=”customClass”> <BlockEdit { …props }/> <div> <BlockControls> <Toolbar> <IconButton { …iconProps } /> </Toolbar> </BlockControls> </Fragment>
As of the end 2020, I have found that the best way to find attributes related to a core block is to inspect it with the react developer tools. Under the components tab, search for [BLOCK_NAME]Edit to find the editing component, where [BLOCK_NAME] is something like “Paragraph”, “Heading” or “Button”. Then on the right side … Read more
I had the same problem and I find out how to solve it: For each “fontFamily” inside “fontFamilies” array, you get a custom variable. From your example You can use both variables on your stylesheet or in theme.json: –wp–preset–font-family–helvetica-arial –wp–preset–font-family–ubuntu-sansserif And then you call the font like this: { “version”:1, “settings”: { “typography”: { “fontFamilies”: … Read more
You need to use Block Filters to modify existing blocks. There are couple of handy hooks you need to use in place of edit and save function to wrap around core blocks into your desirable block structure. For your purpose I guess, you need to use – blocks.getSaveElement and editor.BlockEdit
You can add a custom attribute to any registered block by using the blocks.registerBlockType filter. /** * Filter the attributes for all blocks to add custom ones * * Name can be used to only add the new attribute to a certain block. * * @param settings * @param name * @returns {*} */ function … Read more
Ok, after some research I got the result I needed: // Fetch all posts based on the selected postType. const postsOptions = useSelect((select) => { const { getEntityRecords } = select(‘core’); const { isResolving } = select(‘core/data’); const postTypeSlugs = […postType].map((element) => element.value) ?? []; if (!postTypeSlugs.length) { return [ { label: __(‘No Filter used’, … Read more
Switching Gutenberg to fullscreen mode requires setting to TRUE fullscreenMode from the core/edit-post package. To enqueue appropriate script, you use enqueue_block_editor_assets action hook. function se337302_fullscreen_editor() { $js_code = “jQuery(document).ready(function(){” . ” var isFullScreenMode = wp.data.select(‘core/edit-post’).isFeatureActive(‘fullscreenMode’);” . ” if ( !isFullScreenMode )” . ” wp.data.dispatch(‘core/edit-post’).toggleFeature(‘fullscreenMode’);” . “});”; wp_add_inline_script( ‘wp-blocks’, $js_code ); } add_action( ‘enqueue_block_editor_assets’, ‘se337302_fullscreen_editor’ );
In short, when saving an attribute, make sure its type matches the one that you defined in the block’s attributes option. The docs says: Lastly, make sure that you respect the data’s type when setting attributes, as the framework does not automatically perform type casting of meta. Incorrect typing in block attributes will result in … Read more
Not at the moment, but, you can go to a page with the block editor, open the browser dev tools, go to the console, and run the following: // grab all block types const types = wp.blocks.getBlockTypes(); // filter to just the core blocks const core_blocks = types.filter( type => type.name.startsWith( ‘core/’ ) ); // … Read more
It may be that your theme hasn’t declared support for responsive embeds. Try adding this code to your functions.php // Add support for responsive embedded content. add_theme_support( ‘responsive-embeds’ ); or your theme setup file if there is one.