Extension of core/code: deprecated doesn’t work
-
Hey there,
At first I just wanted to extend one of WordPress Gutenberg blocks by learning purposes. I chose the ‘core/code’ block. I added the h4 tag for a title below the default content, this part worked fine. Then I decided to change the h4 tag to h2 tag. As I understand now I need to add deprecated array to settings object. I did this but I am getting this error:
Block validation: Expected tag nameh2
, instead sawh4
.const { InspectorAdvancedControls } = wp.editor; const { createHigherOrderComponent } = wp.compose; const { Fragment } = wp.element; import { RichText} from "@wordpress/editor"; import deprecated from "./deprecated"; const enableExtendOnBlocks = [ 'core/code', ]; function addAttributes( settings, name ) { if ( ! enableExtendOnBlocks.includes( name ) ) { return settings; } if( typeof settings.attributes !== 'undefined' ){ settings.attributes = { ...settings.attributes, vista:{ type: 'string', default: 'vista', source: 'html', selector: 'h2', } }; settings.title = 'My Code'; settings.supports = { html: false, }; settings.deprecated = deprecated; } return settings; } wp.hooks.addFilter( 'blocks.registerBlockType', 'extend-block-example/custom-attributes', addAttributes ); const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => { return ( props ) => { if ( ! enableExtendOnBlocks.includes( props.name ) ) { return <BlockEdit { ...props } />; } const onChangeVista = (vista) => { props.setAttributes({ vista: vista }); }; return ( <Fragment> <BlockEdit { ...props } /> <RichText tagName="h2" formattingControls={[]} value={props.attributes.vista} onChange={(vista) => onChangeVista(vista)} /> </Fragment> ); }; }, "withInspectorControl" ); wp.hooks.addFilter( 'editor.BlockEdit', 'my-plugin/with-inspector-controls', withInspectorControls ); function codeSaveElement( element, blockType, attributes ) { if ( blockType.name !== 'core/code' ) { return element; } return ( <> <pre className={attributes.className}> <code>{ escape( attributes.content ) }</code> </pre> {/*{element}*/} <RichText.Content tagName="h2" value={attributes.vista} /> </> ); } wp.hooks.addFilter( 'blocks.getSaveElement', 'extend-block-example/custom-save', codeSaveElement );
and the depricated array:
import {RichText} from "@wordpress/editor"; const oldAtt = { vista: { type: 'string', source: 'html', selector: 'h4', default: 'vista', }, content: { type: "string", source: "text", selector: "code", }, className: { type: "string", } }; const oldAtt2 = { content: { type: "string", source: "text", selector: "code", }, className: { type: "string", } }; const deprecated = [ { attributes: oldAtt2, save: function (oldAtt2) { return ( <> <pre className={oldAtt2.className}> <code>{ escape( oldAtt2.content ) }</code> </pre> </> ); }, }, { attributes: oldAtt, save: function (oldAtt) { return ( <> <pre className={oldAtt.className}> <code>{ escape( oldAtt.content ) }</code> </pre> <RichText.Content tagName="h4" value={oldAtt.vista} /> </> ); }, }, ]; export default deprecated;
What I am doing wrong?
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
- The topic ‘Extension of core/code: deprecated doesn’t work’ is closed to new replies.