I want to create a block with HowTo microdata markup and automatically assign ID to child blocks. I have created a holder as the parent block, and I want to give the first child block id="step1", second block id="step2" etc…
I wonder how can I use getBlockIndex. Based on the block editor handbook, the first parameter is Object: Editor state. What is editor state? Where can I find this object? Should I use getBlockIndex for this purpose?
Gutenberg is really fun, but the documentation is really thin right now.
Parent block js (The microdata markup is not correct at the moment)
(() => {
const __ = wp.i18n.__; // The __() for internationalization.
const el = wp.element.createElement; // The wp.element.createElement() function to create elements.
const registerBlockType = wp.blocks.registerBlockType; // The registerBlockType() to register blocks.
const ServerSideRender = wp.components.ServerSideRender;
const TextControl = wp.components.TextControl;
const TextareaControl = wp.components.TextareaControl;
const InspectorControls = wp.editor.InspectorControls;
const { RichText } = wp.blockEditor;
const { InnerBlocks } = wp.blockEditor;
//Custom variable
const allowedBlocks = [ 'custom-blocks/how-to-do' ] ;
const blockTemplate = [ [ 'custom-blocks/how-to-do', {} ], [ 'core/image' ] ];
registerBlockType( 'custom-blocks/how-to-do-holder', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __( 'How to do holder', 'custom-blocks' ), // Block title.
category: 'custom_block',
keywords: [ __() ],
attributes: {
},
supports: {
customClassName: false,
className: false,
},
edit(props) {
return el(
'div', { className: 'how-to-do-block-holder', itemscope: 'itemscope', itemtype: "http://schema.org/HowTo" },
el('h2', {}, 'How to do'),
el ( InnerBlocks,
{
allowedBlocks: allowedBlocks,
template: blockTemplate
} )
);
},
save(props) {
return el(
'div', { className: 'how-to-do-block-holder', itemscope: 'itemscope', itemtype: "http://schema.org/HowTo" },
el('h2', {}, 'How to do'),
el ( InnerBlocks.Content,
{
allowedBlocks: allowedBlocks,
template: blockTemplate
} )
);
},
} );
})();
Child block js
(() => {
const __ = wp.i18n.__; // The __() for internationalization.
const el = wp.element.createElement; // The wp.element.createElement() function to create elements.
const registerBlockType = wp.blocks.registerBlockType; // The registerBlockType() to register blocks.
const ServerSideRender = wp.components.ServerSideRender;
const TextControl = wp.components.TextControl;
const TextareaControl = wp.components.TextareaControl;
const InspectorControls = wp.editor.InspectorControls;
const { RichText } = wp.blockEditor;
const { InnerBlocks } = wp.blockEditor;
//Custom varaible
const pageLink = window.location.href;
let newPageLink = pageLink;
//If pagelink contains #
if( newPageLink.includes('#') ){
//remove all text after #
newPageLink = newPageLink.split('#')[0];
}
registerBlockType( 'custom-blocks/how-to-do', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __( 'How To Do', 'custom-blocks' ), // Block title.
category: 'custom_block',
keywords: [ __()],
parent: [ 'custom-blocks/how-to-do-holder' ],
attributes: {
steps: {
source: 'children',
selector: '.steps',
},
stepsname: {
source: 'children',
selector: '.stepsname',
},
},
supports: {
customClassName: false,
className: false,
},
edit(props) {
const steps = props.attributes.steps;
const stepsname = props.attributes.stepsname;
function onChangeSteps( newContent ) {
props.setAttributes( { steps: newContent } );
}
function onChangeStepsname( newContent ) {
props.setAttributes( { stepsname: newContent } );
}
const editSteps = el(
RichText,
{
tagName: 'p',
onChange: onChangeSteps,
value: steps,
placeholder: __( 'Step...' ),
itemprop: 'text'
}
);
const editStepsname = el(
RichText,
{
tagName: 'p',
onChange: onChangeStepsname,
value: stepsname,
placeholder: __( 'Name of this step' ),
}
);
/*const linkMeta = el(
'meta',
{
value: stepsname,
itemprop: "url",
content: newPageLink
}
);*/
return el('div', {
className: 'steps-wrapper',
itemprop: 'step',
itemscope: 'itemscope',
itemtype: "http://schema.org/HowToStep"
},
editStepsname,
//linkMeta,
el ( 'div',
{
className: 'steps-wrapper',
itemprop: 'itemListElement',
itemscope: 'itemscope',
itemtype: "http://schema.org/HowToDirection"
},
editSteps
)
);
},
// The "save" property must be specified and must be a valid function.
save(props) {
const steps = props.attributes.steps;
const stepsname = props.attributes.stepsname;
const StepsOutput = el ( RichText.Content,
{
tagName: 'p',
className: 'steps',
value: steps,
itemprop: 'text',
}
);
const StepsnameOutput = el ( RichText.Content,
{
tagName: 'p',
className: 'stepsname',
value: stepsname,
itemprop: 'name',
}
);
return el('div', {
className: 'steps-wrapper',
itemprop: 'step',
itemscope: 'itemscope',
itemtype: "http://schema.org/HowToStep"
},
StepsnameOutput,
el ( 'div',
{
className: 'steps-wrapper',
itemprop: 'itemListElement',
itemscope: 'itemscope',
itemtype: "http://schema.org/HowToDirection"
},
StepsOutput
)
);
},
} );
})();