Hi @julian_wave
Have you created this block from scratch, or are you extending the existing Heading block in some way?
If you can, are you able to share your custom block code? It’s probably possible to edit that icon overlay text, but it would helpful if you could share what you’re currently doing, to better understand where to change it.
Hi @psykro
Thanks for replying.
I’ve been following a tutorial on Udemy and my code is very close to the example code there. I just about understand it…
First, there’s a php file where I set things up. In there I have this code:
class JSXBlock {
function __construct($name, $renderCallback = null) {
$this->name = $name;
$this->renderCallback = $renderCallback;
add_action('init', [$this, 'onInit']);
}
function ourRenderCallback($attributes, $content) {
ob_start();
require get_theme_file_path("/template-parts/blocks/{$this->name}/{$this->name}.php");
return ob_get_clean();
}
function onInit() {
wp_register_script($this->name, get_stylesheet_directory_uri() . "/build/{$this->name}.js", array('wp-blocks', 'wp-editor'));
$ourArgs = array(
'editor_script' => $this->name
);
if ($this->renderCallback) {
$ourArgs['render_callback'] = [$this, 'ourRenderCallback'];
}
register_block_type("ftm-blocks/{$this->name}", $ourArgs);
}
}
//
new JSXBlock('wv-h3', true);
Then I have this js in a separate file: wv-h3.js:
import { ToolbarGroup, ToolbarButton } from "@wordpress/components"
import { RichText, BlockControls } from "@wordpress/block-editor"
import { registerBlockType } from "@wordpress/blocks"
registerBlockType("ftm-blocks/wv-h3", {
title: "Heading level 3",
icon: 'heading',
category: "ftm-blocks",
keywords: ['heading', 'h3'],
attributes: {
text: { type: "string", default: "Type heading here"},
},
edit: EditComponent,
save: SaveComponent
})
function EditComponent(props) {
function handleTextChange(x) {
props.setAttributes({ text: x })
}
return (
<>
<RichText allowedFormats={["core/link"]} tagName="h3" className={<code>headline headline--l3</code>} value={props.attributes.text} onChange={handleTextChange} />
</>
)
}
function SaveComponent(props) {
return props.attributes.text
}
I also have a simple php file for render callback: wv-h3.php
<h3 class="wv-gb-h3">
<?php
echo $attributes['text'];
?>
</h3>
Ok, thanks @julian_wave
In the wv-h3.js file you are returning an instance of the RichText component https://developer.wordpress.org/block-editor/reference-guides/richtext/ which in turn is made up of other block components, that have their own attributes. So to make the change you need, you’re going to have to extend and modify the RichText component, which is not a straightforward task.
However, it might be better to use the experimental heading component instead of RichText.
https://developer.wordpress.org/block-editor/reference-guides/components/heading/
Thanks @psykro
As experimental heading is an “early implementation subject to drastic and breaking changes” I think I’d better not risk it. It’s probably best for now if I stick to the safest option, put up with the unwanted popover text and advise clients not to look for ways to “change block type or style”.
Thanks though for clarifying the situation for me.
Hi @julian_wave I do understand.
The other option is to create a custom block component, not dependant on any existing components, which only supports the functionality you require.
For example, you could create a custom block that only renders the h3 tag, and allows the user to edit the text of the h3 tag.
This is a bit old, but I recorded a workshop on the Learn WordPress platform a few years ago, that discusses building custom blocks like this
https://learn.wordpress.org/workshop/intro-to-gutenberg-block-development/
@psykro Thanks very much, your help is appreciated. I’ll take a look at the workshop.
