Wordpress, Gutenberg Templates how to add Lables between blocks? - wordpress

Question

I'm forcing a block template for the editor view of a specific custom post type using basically this example as a guide:
https://developer.wordpress.org/block-editor/reference-guides/block-api/block-templates/#locking
function myplugin_register_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/paragraph', array(
'placeholder' => 'Add Description...',
) ),
);
$post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_template' );
I was able to set multiple input fields and change their default attributes like their placeholder or content.
What I would love is the ability to add a label in the editor above the input field.
The only solution I could find was creating a static block with static text.
Awful.
I would need to create a block for each label.
I would love a way to set its content from the placeholder or content attribute from the above template definition code but, for the life of me, I can't find any documentation on how to go about it.
so the questions are:
is there an easier way to set a static label above each field in a template that I'm missing?
is there a way to implement a label block that takes a content attribute from there?

Answer 1

Yes, using a 3 step approach you can add an extra attribute/s and insert custom content to existing blocks without creating a new block. After the additional attribute is added, you can then set the default value in your custom post template which is then displayed in the Editor, eg:
Step 1: Use Register Block Type Filter to assign a new label attribute to the existing "core/paragraph" block:
plugin.js:
function addLabelAttribute(settings, name) {
if (name !== 'core/paragraph') {
return settings;
}
return lodash.assign({}, settings, {
attributes: lodash.assign({}, settings.attributes, {
label: {
type: 'string',
default: ""
}
})
});
}
wp.hooks.addFilter(
'blocks.registerBlockType',
'core/paragraph',
addLabelAttribute
);
Part 2: Create a Higher Order Component to insert the <label>...<\label> into <BlockEdit> only if a label is set. The value of the label attribute is destructured from the props:
plugin.js
const { createHigherOrderComponent } = wp.compose;
const { useBlockProps } = wp.blockEditor;
const withLabelOutput = createHigherOrderComponent((BlockEdit) => {
return (props) => {
const blockProps = useBlockProps();
const { attributes: { label } } = props;
if (label) {
// Add the custom label within a wrapped <BlockEdit>
return (
<div {...blockProps}>
<label>{label}</label>
<BlockEdit {...props} />
</div>
);
}
// No label set, return default <BlockEdit>
return (<BlockEdit {...props} />)
};
}, 'withLabelOutput');
wp.hooks.addFilter(
'editor.BlockEdit',
'core/paragraph',
withLabelOutput
);
Ref: Block Editor Handbook > Block Filters
Part 3: Set a default value for the new label attribute within the template of the required post/custom post type:
plugin.php:
function myplugin_register_template(){
// N.B. Use a custom post type unless you want this to apply to all posts
$post_type_object = get_post_type_object('post');
$post_type_object->template = array(
array(
'core/paragraph',
array(
'placeholder' => 'Add Description...',
'label' => 'My Custom Label'
)
)
);
$post_type_object->template_lock = 'all';
}
add_action('init', 'myplugin_register_template');
(Optional) Add a your own custom editor style for the <label>, and enqueue it for the editor only, eg:
.wp-block-paragraph label{
font-weight: bold;
border-bottom: 1px solid grey;
padding-bottom: 0.5em;
display:block;
width:100%;
}
All the code example given above can be combined into a plugin, which creates a label in the Editor like: