A save component is intended to save static HTML, and can rely only on the blocks attribute. No interactivity, no local state, no AJAX requests, etc, just block attributes. If you achieve what you’re trying to do you’ll immediately run into a new problem with block validation failure. You cannot use the save component to … Read more
The block validation failed because the editor did not parse the attributes from all images (in the saved post content), and it’s because your save function is returning only one .slider-item div containing multiple img tags, like so: <div class=”slider-item”> <img src=”…” data-id=”123″ /> <img src=”…” data-id=”456″ /> … </div> And what should actually be … Read more
You cannot use wp.select in your save component, a save component can only use the block attributes. If you generate markup from using data from other sources then it will fail block validation. If you want data such as the index of the block, you need to store it in the attributes in the edit … Read more
I’ve managed to pull and get it to run as I would expect. $ npm run start:random-game > [email protected] start:random-game C:\Users\…\game-review-block > wp-scripts start blocks/random-game/src/index.js –output-path=blocks/random-game/build/ <i> [LiveReloadPlugin] Live Reload listening on port 35729 asset index.js 25.4 KiB [emitted] (name: index) 1 related asset asset style-index.css 858 bytes [emitted] (name: style-index) (id hint: style) 1 … Read more
As I said in my comment, your code worked fine for me. But that’s probably because I used the default Twenty Twenty-One theme on a test site running the default WordPress setup (basically, almost no plugins). And the reason I asked you, “is that the actual and entire code in your file“, is because the … Read more
You cannot embed blocks as react components this way, and you should not try to use other blocks as user interface components by setting innerblocks with a locked template. Instead, use 2 filters to modify the core/embed block: Use editor.BlockListBlock on core/embed to modify the edit component, wrapping it in your own component that has … Read more
Solution found: const { __ } = wp.i18n; const { useSelect, useDispatch } = wp.data; const { PluginDocumentSettingPanel } = wp.editPost; const { CheckboxControl, PanelRow } = wp.components; const Sidebar = () => { const { postMeta } = useSelect( ( select ) => { return { postMeta: select( ‘core/editor’ ).getEditedPostAttribute( ‘meta’ ), }; } … Read more
I think the issue you will run into here is that markup from the save function is created at post edit. The attributes like that link.url you reference will be correct at time of save – which is where the JS runs – but not necessarily at render if the post attributes have been changed. … Read more
Ahh — I found it. It is called the PluginDocumentSettingPanel and can be imported from @wordpress/edit-post. import { registerPlugin } from ‘@wordpress/plugins’; import { PluginDocumentSettingPanel } from ‘@wordpress/edit-post’; const PluginDocumentSettingPanelDemo = () => ( <PluginDocumentSettingPanel name=”custom-panel” title=”Custom Panel” className=”custom-panel” > Custom Panel Contents </PluginDocumentSettingPanel> ); registerPlugin( ‘plugin-document-setting-panel-demo’, { render: PluginDocumentSettingPanelDemo, icon: ‘palmtree’, } );
You can click the vertical “…” menu > “Edit as HTML” and add your class there manually. There is currently no other interface field to directly add a class to an inline image tag out of the box. A plugin could overload the toolbox of the inline image, but currently only the width is editable.