Need a paragraph-like block but with forced text styling.

• ddesw

• February 20, 2023 at 5:15 pm

Hi,

I am looking for ways to implement a block that basically works as a post’s preamble text which usually and in my case is just a little bigger and bolder text then the normal paragraph.

My main wish is that it behaves the same way as a paragraph block. What i mean by this is that user should be able to edit the text within the block instead of editing the text in a meta field on the right of the editor. I don’t really know if this is possible with ACF, at least from what I’ve seen but do correct me if I’m wrong.

Secondly I’d like it to be forced as the first block and only able to be used once per post. If it is possible, neat! If not then i guess if the first criteria is met i can live with it being used anywhere.

So, would this be possible and if so, what would be the key settings to achieve this?

• wpfieldwork

• February 22, 2023 at 10:41 am

You could create this as a custom ACF block called preamble or similar. When registering the ACF block, within its block.json file, you can put “multiple”: false in the supports section to limit it to only being used once.

Additionally, you can set ‘jsx’ to true to make the block reliant on InnerBlocks. InnerBlocks work like native blocks where you edit like normal, not via ACF fields. I would personally also limit the allowedBlocks for InnerBlocks to just the core/paragraph block, as well.

So your block.json would look something like this:

{
    "name": "preamble",
    "title": "Preamble",
    "description": "A styled post preamble paragraph.",
    "category": "formatting",
    "acf": {
        "mode": "preview",
        "renderTemplate": "blocks/preamble/preamble.php"
    },
    "supports": {
        "multiple": false,
        "jsx": true
    }
}

Then your preamble block code would include something like:

<?php $allowedBlocks = array(
  'core/paragraph'
); ?>
<InnerBlocks allowedBlocks="<?php echo esc_attr(wp_json_encode($allowedBlocks)); ?>" />

It wouldn’t force it to be the first block, but you could probably do that utilizing something like block templates.

• ddesw

• February 22, 2023 at 10:50 am

This is very interesting. Do you know if it would be possible to limit allowed paragraphs inside innerblock to 1?

• ddesw

• February 22, 2023 at 11:02 am

I think i figured it out!

<?php
$template = [
    [ 'core/paragraph', [ 'placeholder' => 'Summary' ] ],
];
?>
<InnerBlocks template="<?php echo esc_attr(wp_json_encode($template)); ?>" templateLock="all" />