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
There are 2 main issues in your code: What is that restrict in your OptionsPanel component? Where and how you defined it? Both the onUpdateRestrict and onUpdateSubscribe are not functions, so clicking on the toggle controls will result in a JavaScript error. And if you can show your complete code, I can probably help you … 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
Not a real answer alert This sounds like a long term bad idea. You are modifying a core functionality with something which do not inherit any of the generated markup of the original block. Any later processing of the block might make assumption about the markup based on the block name, but the assumptions might … 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
If you have a server side rendered block in the backend, it is rendered via the REST API endpoint /wp/v2/block-renderer/xyz/blockname. This endpoint calls your render function. In the frontend the render function is called directly. The function is_admin() checks if a backend page was requested. In a REST API Request is no backend page, so … 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
Fortunately there is a hook that we can use to customize what component is used to render the taxonomy panels called editor.PostTaxonomyType. Gutenberg renders taxonomy panels with a component called PostTaxonomies, which really just checks whether the taxonomy is heirarchical or not, and passes the props along to either the HierarchicalTermSelector or FlatTermSelector components accordingly. … 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’ );