How to change Content Title over several lines using Elements 'Block'

Hi there,

there isn't really a good way to do this. And it will require code. As you cannot simply save <br /> tags in the Content Title of your post.
Heres an example where users add a pipe | character with spaces either side. And then some PHP to string replace it for line breaks on the front end.

You can do the same with a the Headline Blocks dynamic text.
Select the Headline block thats displaying the Title, and in Advanced > Additional CSS Class(es) add: dynamic-post-title

Then use this snippet to replace the | with a <br /> on the front end:

add_filter( 'generate_dynamic_element_text', function( $text, $block ) {
    if ( ! empty( $block['attrs']['className'] ) && 'dynamic-post-title' === $block['attrs']['className'] ) {
        $text = str_replace(' | ', '<br />', $text );
    }

    return $text;
}, 10, 2 );

The issue with any method that relies on string replace is that you will be saving that | in the title in your database. So other plugins that may use the title such as SEO meta titles will grab the pipe....

Thank you.
So are you saying that If I Select the Headline block that's displaying the Title, and in Advanced > Additional CSS Class(es) add: dynamic-post-title, and then add the snippet you suggest- that SEO will pick up the pipe character? Or does that snippet sort that SEO problem?

If it affects the SEO I would rather not go ahead.

Is there no other way to have the title evenly spaced? I see lots of websites with it this way. An example would be here;
https://jennakutcherblog.com/gdpr-for-small-biz/

What i am saying is, if you use the method above the | gets saved in the post title in your database eg.

This is my | title with | line breaks

Other plugins that retrieve the title will get exactly that. ie. including the |. That includes SEO plugins, sharing plugins etc.

The snippet i provided simply replaces them on the front end of the site.

Is there no other way to have the title evenly spaced?

That depends, the site you link to isn't using line breaks at all its just been centred and has a maximum width.

You could definitely do that layout with GP.
Can you share a link to a post on your site where you have the issue ?

Thank you David, I see now. I don't know anything about code so was hoping that snippet would solve the SEO issue!

That's great to know that the site I linked to isn't using line breaks :-) as it feels more doable now.

So how would I do that layout, as you say with GP. Is it to do with padding or margin of the Headline (Dynamic Text) block that holds the title?
I am using local host so don't think I can share my site.

This is how the title on one of my posts is getting displayed using the Elements Block:
'Do Animals Have Souls? The Multilayered Consciousness of
Animals.'
I would like to have:
'Do Animals Have Souls?
The Multilayered Consciousness of Animals.'

Is that possible? Maybe not as the first line is shorter than the second. If not then just having it more balanced would be good.
It appears there is around 55 characters per line.

Thank you so much for your help.

Depending on your layout.
If the Headline block used to display the Title is inside a Container Block, then you can set its Inner Container width.

Alternatively select the Headline Block, and in Additional CSS Class(es) add: dynamic-post-title
Then add this CSS:

.dynamic-post-title {
     max-width: 55ch;
}

The only issue with this is if the title is dynamic setting a fixed width for one - may not work so well for another.

Thank you that's great. One last question.

Is the first of the options below better than the second for some hidden reasons my beginner self is unaware? I am trying to understand how all this works - there often seems to be knock-on effects from certain actions :-)

Setting the inner container width of the container block vs adjusting the right and left padding of the Headline block.

Thank you

Padding occupies space within the container.
So if you set Padding in pixels, lets say 100px left and 100px right. Then that gets deducted from the overall container size. If our container is being viewed on a smaller screen that padding can eat up a lot of space. Which then means you have to either:

a. Adjust the Pixel Padding values for Tablet and Mobile devices.
b. Use % units for padding.

Whereas setting a Container Width is actually defining its Maximum Width that will shrink to fit smaller screens.

My general of thumb is:

1. Use Container Width to adjust the containment size.
2. Set the padding to provide the minimum gap between the edge of your Content and the edge of the container/browser.

Thank you that is so helpful. It looks great now :-)

Glad to be of help!