The problem is that calling wp.data.select triggers a fetch and the data takes some time to be available. Until that happens the value returned is an empty array. My suggestion here is to use wp.data.useSelect, which is a React hook made specifically for this, so the component re-renders when there is a change in the … Read more
If you have the Gutenberg plugin installed and enabled, the css rules are loaded in /plugins/gutenberg/build/block-library/theme.css ; If you’re just using the block-editor that is in core WordPress, the rules will instead be loaded from: wp-includes/css/dist/block-library/theme.css
UrlInput uses LinkControl internally, but neither have been built with the sidebar in mind, they’re to be used inside popover components that appear inline such as when a toolbar button is clicked. They aren’t intended to appear directly in toolbars either. Most if not all input components can’t be shown in the toolbar, with the … Read more
You need to call savePost after calling editPost. Referring to the source’s way of handling it:https://github.com/WordPress/gutenberg/blob/trunk/packages/editor/src/components/post-visibility/index.js it shows savePost being called right after changing the visibility. In practice: import { PluginPostStatusInfo } from ‘@wordpress/edit-post’; import { __ } from ‘@wordpress/i18n’; import { registerPlugin } from ‘@wordpress/plugins’; import { ToggleControl } from ‘@wordpress/components’; import { useSelect, … Read more
add_theme_support(‘gutenberg’, [‘wide-images’ => true ]) is telling gutenberg, hey this sites content area’s CSS is setup to handle wide images. The theme_support wide-images code isn’t a magic fix – instead it’s an aknowledgment from the theme developer to gutenberg, that the themes CSS’s ready for gutenberg wide content. — If you’re just experimenting, and only … Read more
<RichText> has a property, isSelected. When isSelected is true, the controls show. By default isSelected is representative of the current block being selected. from the docs isSelected: Boolean Optional. Whether to show the input is selected or not in order to show the formatting controls. By default it renders the controls when the block is … Read more
This is a known issue. A hack would be to disable to the validation completely for the block. Chris Van Patten provided the following code example: /** * WordPress dependencies */ import { compose } from ‘@wordpress/compose’; import { withDispatch } from ‘@wordpress/data’; import { InnerBlocks } from ‘@wordpress/editor’; /** * Container block * * … Read more
If you wish to do it this way, you need to use the <ServerSideRender /> component in your edit method. Here’s a basic implementation, based on the PHP block registration code you provided. import { ServerSideRender } from ‘@wordpress/components’; registerBlockType( ‘some/block’, { title: ‘Some block’, attributes: { stuff : { } }, edit( { className, … Read more
Although I’m unsure on how to achieve this in php, within javascript you can change the category by hooking into the blocks.registerBlockType hook. Here is a small example how it would work, although I’d recommend using lodash to deepClone the settings object to keep everything immutable. const rearrangeBlockCategories = { ‘core/table’: ‘common’, }; wp.hooks.addFilter(‘blocks.registerBlockType’, ‘[namespace]’, … Read more
All datas seems to be stored in JS objects, and not in HTML-DOM. We can use: wp.data.select(“core”).getXXXXXXXXXXXX() wp.data.select(“core/editor”).getXXXXXXXXXXXX() … There are many areas too, you can list them with: console.log(wp.blocks.getBlockTypes());