I am assuming you want this value on the front-end as opposed to needing it in the block editor due to the <figure> somehow not displaying correctly when viewed in the block editor. If that is the case then you can use something similar to DOMDocument as per the following example: Assume HTML of: <div> … Read more
I found a solution and thought to post it here as others might need it el(URLInput, { className: props.className, value: attributes.linkURL, placeholder: i18n.__(‘Set the specific url’), onChange: function( url ) { props.setAttributes({ linkURL: url }); } }) Does exactly what I need.
After trial and error, I’ve figured out a way. It may not be perfect but it works for every circumstance I’ve tried. We need to use the wp.data.select function, and select the ‘core/block-editor’, and finally use the getSelectionStart() function. That will tell us if the current block has selectable text, and if so, where our … Read more
Change column width value from string to number, like this array(‘core/column’, array(‘width’ => 33.33)
Your JavaScript code works for me. The metadata do get saved. But perhaps you’d like to try my code which is pretty much completed, i.e. on page load, the checkbox is auto-checked/unchecked (and the text box is also shown/hidden) depending on the current database value. Secondly, I did it just as the Gutenberg team did … Read more
Without the root id the block is looked for at the top-level1. Something like this seems to work: useSelect(select => { const editor = select(‘core/block-editor’) const rootId = editor.getBlockRootClientId(blockId) return editor.getBlockIndex(blockId, rootId) }, [blockId]) [1] https://github.com/WordPress/gutenberg/blob/v9.9.3/packages/block-editor/src/store/selectors.js#L945
This is a known issue in Gutenberg. You can get this working by passing {plugin-slug}/{panel-name} For your example, try: dispatch(‘core/edit-post’).toggleEditorPanelOpened(‘plugin-document-setting-panel-mycustom/mycustom-panel’)
The Preview button and associated functionality is currently undergoing a fair amount of iteration – I would imagine we will see a keyboard shortcut added, along with other options for modifying it’s UI down the road. A Big Hack Interestingly, the old direct-preview button’s component is still rendered, but is hidden on a > 600px … Read more
I ended up implementing my own ColorControl. I’m not satisfied with this solution and I don’t advice you to follow this route blindly. However, if you want to get the job done and don’t want to spend two hours on something that might not exist as I did, here you go. Install two extra packages: … Read more
Yes, you can do this via the classnames() function. import classnames from ‘classnames’; const withClass = createHigherOrderComponent( ( BlockListBlock ) => { return ( props ) => { let wrapperProps = props.wrapperProps; wrapperProps = { …wrapperProps, className={ classnames( ‘my-custom-class’, props.className ) } }; return <BlockListBlock { …props } wrapperProps={ wrapperProps } />; }; }, ‘withClass’ … Read more