Presenting Notices Gutenberg provides a mechanism for displaying notices in the form of the Notices Data package. In Gutenberg’s editors, the package’s selectors and action creators are exposed on the core/notices store, and can be accessed by any standard means therein, e.g.: useDispatch( ‘core/notices’ ) hook in functional components (including the edit() function of a … Read more
You’re pretty close. Specifying layout details in block.json should nest inside a “default” property. Doing so will have the Layout panel display accordingly but there’s more to it than that. If you want the default layout for the block, there is no need to add contentSize or wideSize. Here is the layout config I’d recommend … Read more
Editable has been replaced with RichText in 2.2. Here’s a example of two RichText components being edit/saved together: const { __ } = wp.i18n; const { registerBlockType, RichText, } = wp.blocks; registerBlockType( ‘wtv/wtv’, { title: __( ‘wtv’, ‘wtv’ ), icon: ‘id’, category: ‘widgets’, keywords: [ __( ‘wtv’ ), __( ‘wtv’ ), __( ‘wtv’ ) ], … Read more
An official tutorial to add custom buttons is now available here.
After banging my head over that horizontal scroll bar issue, I think going the other way and adding a max width to blocks without the alignfull classes. If you just remove your page templates wrapper and assume it as 100%. Here is a pen with the WP markup as closely emulated as I could https://codepen.io/nickfmc/pen/vvbWQa … Read more
This got me started. Set up the block with create-guten-block Gitub Update block.js to something like: import ‘./style.scss’; import ‘./editor.scss’; var PluginPrePublishPanel = wp.editPost.PluginPrePublishPanel; var registerPlugin = wp.plugins.registerPlugin; function Component() { wp.data.dispatch(‘core/editor’).lockPostSaving() //do stuff //wp.data.dispatch(‘core/editor’).unlockPostSaving() return wp.element.createElement( PluginPrePublishPanel, { className: ‘my-plugin-publish-panel’, title: ‘Panel title’, initialOpen: true, }, ‘Panel content’ ); } registerPlugin( ‘my-plugin’, { render: … Read more
Block editor blocks are dynamically constructed by parsing the HTML of post_content. Blocks are delimited by HTML comments that looks like these: <!– wp:image –> <figure class=”wp-block-image”><img src=”https://wordpress.stackexchange.com/questions/359758/source.jpg” alt=”” /></figure> <!– /wp:image –> The way the actual data of blocks is stored depends entirely on the block. Blocks can either store their attributes inside the … Read more
To do so you need to use a redux store. To register your own you can follow the steps in the documentation. Here is the minimum that should achieve what you are looking for. First, lets give the “shape” of the store in the initial state object: const initial_state = { my_control: { value: “” … Read more
General block name search One can e.g. use the general search in the /wp-admin backend to find some text within the post’s content that stores the blocks: We can search for a prefixed block name wp:my-plugin/my-block within the posts: example.com/wp-admin/edit.php ?s=wp:my-plugin%2Fmy-block%20&post_type=post where we have an extra space (url encoded as %20and / as %2F) after … Read more
Many wp.blocks.* controls have been moved to wp.editor.* (see release notes). Specifically wp.blocks.InspectorControls is now wp.editor.InspectorControls – you’ll need to change the first line of your code. Note: registerBlockType is still imported from wp.blocks.* iirc. As a side note, I’ve also found that the focus && trick no longer required as GB automatically displays the … Read more