This happens in serialize_block_attributes, the docblock explains why: /** … * The serialized result is a JSON-encoded string, with unicode escape sequence * substitution for characters which might otherwise interfere with embedding * the result in an HTML comment. … */ So this is done as an encoding measure to avoid attributes accidentally closing a … Read more
In order to modify an attribute, you should use the setAttributes() function as you do elsewhere in your code. This function updates the value in Gutenberg’s data stores, which triggers a re-render for any components depending on it and stages the change to be updated in the database when the post is saved. const { … Read more
Create a theme.json file in the root of your theme, and add this inside: { “version”: 1, “settings”: { “blocks”: { “core/button”: { “border”: { “customRadius”: false } } } } } It will only work from WordPress v5.8 and above, because it requires Gutenberg v10. However Gutenberg v10 can be installed as a plugin … Read more
Your value prop is the wrong format. From <LinkControl>‘s README: value Type: Object Required: No Current link value. A link value is composed of a union between the values of default link properties and any custom link settings. The resulting default properties of value include: url (string): Link URL. title (string, optional): Link title. opensInNewTab … 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
An official tutorial to add custom buttons is now available here.
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
You can find the versions in WordPress here with this recently created document: https://developer.wordpress.org/block-editor/principles/versions-in-wordpress/ You weren’t alone in wanting to have this information 🙂 As mentioned above, it can be tricky to directly line up versions but this is the closest approximation currently. When WordPress 5.5 is launched, this document will be updated.
LinkControl is an experimental component, so it’s declared differently in blockEditor package try this as an import statement, this worked for me: const {__experimentalLinkControl } = wp.blockEditor; const LinkControl = __experimentalLinkControl;
TextControl is from wp.components not wp.blocks. const { registerBlockType, RichText, AlignmentToolbar, BlockControls, InspectorControls, } = wp.blocks; const { TextControl } = wp.components; Changing that I was able to get your block to work fine instead of error in Gutenberg 2.2.0.