Convert FAQ titles to headings

[moorscode]

Currently the FAQ titles are rendered with <strong> tags.
These need to be converted to headings.

Todo:

• Convert FAQ entry title from strong to H{x} heading
• Determine the heading level based on the highest heading block preceding the FAQ block

This issue is the quickest step to improving the rendering and results from our SEO analysis on pages which use an FAQ block.
Related: #11801

[IreneStr]

@Dieterrr
I've discussed the possible issues with @moorscode. The plan is to implement it with the automatically chosen heading levels for now. Based on this 'prototype', we'll decide if it's the way to go or if the UX needs to be finetuned.

More concrete:

• The questions should automatically get the heading level that is 1 level lower than the heading level that is directly preceding it. So if the preceding heading is an H2, the FAQ questions should be an H3.
• When the FAQ block is moved, the heading level should be 'recalculated'.
• When a new heading is added above the FAQ block, the heading level should be 'recalculated'.

[afercia]

Related: #10891

I'm afraid in the Edit view we'll have to keep the <p> or use a <div>.

[Dieterrr]

Issue moved to blocked as we're going to implement inner blocks in the same release. When that happens the headers in the FAQ block will be replaced by (inner) header blocks. Issue can be picked up again as soon as inner blocks are implemented, milestone is still aimed at 9.7.

The current implementation has a small bug as it uses plain tags and it seems TinyMCE doesn't allow inline tagNames. This bug will not be fixed for now as it will be irrelevant when the innerblocks are introduced.

[michaelbriantina]

Please inform the customer of conversation # 466418 when this conversation has been closed.

[advancedperiodontics]

Did this get addressed? We're on version 10.

As a workaround, we've been replacing the strong tags with our desired header tag, which works, but it breaks the Gutenberg FAQ block and makes it no longer editable.

[Djennez]

Hi @advancedperiodontics, no, this has not yet been addressed. Unfortunately there is is no ETA available.

[mariusghitulescu]

Please inform the customer of conversation # 503324 when this conversation has been closed.

[mikalehmann]

Using headings also makes styling easier. I'm using the same CSS for <h2> and Yoast's <strong> elements, but since it's an inline element, the margin-top and margin-bottom CSS is useless. On top of that they are not recognized by plugins that automatically generate a table of contents.

[Jab2870]

This would indeed be very helpful. As an interim measure, is there a hook / filter that we could use to change it to a heading on the front end at least?

[mmikhan]

Please inform the customer of conversation # 614659 when this conversation has been closed.

[KatyW333]

Is there ANY update to this? It's an incredibly frustrating issue.

[gmmedia]

Please!

[Jab2870]

I've been including the following in my recent sites:

<?php
function overdide_yoast_faqs($block_content, $block){
	if ( 'yoast/faq-block' == $block['blockName'] ){
		// This turns strong tags into h2 tags
		return preg_replace('/<strong([^>]+)>(.*?)<\/strong>/','<h2\1>\2</h2>',$block_content);
	}
}
add_filter( 'render_block', 'overdide_yoast_faqs', 10, 2 );

Hopefully soon this won't be necessary but it might help any of you in the short term.

[SirLouen]

I've been including the following in my recent sites:

<?php
function overdide_yoast_faqs($block_content, $block){
	if ( 'yoast/faq-block' == $block['blockName'] ){
		// This turns strong tags into h2 tags
		return preg_replace('/<strong([^>]+)>(.*?)<\/strong>/','<h2\1>\2</h2>',$block_content);
	}
}
add_filter( 'render_block', 'overdide_yoast_faqs', 10, 2 );

Hopefully soon this won't be necessary but it might help any of you in the short term.

Not working for me 😱 Is this still valid? (I've introduced it in one of my functionality plugins not in the functions.php)

[mmikhan]

+1 for https://wordpress.org/support/topic/yoast-not-recognizing-my-json-ld-content/

[Jab2870]

Not working for me scream Is this still valid? (I've introduced it in one of my functionality plugins not in the functions.php)

@SirLouen, it's still working for me.

If you post an example of the resulting html on your website (or a link) I might
be able to help

[brodiebrodie]

I'm looking to convert the FAQ titles to h3. I tried to add this coode:

<?php function overdide_yoast_faqs($block_content, $block){ if ( 'yoast/faq-block' == $block['blockName'] ){ // This turns strong tags into h2 tags return preg_replace('/<strong([^>]+)>(.*?)<\/strong>/','<h2\1>\2</h2>',$block_content); } } add_filter( 'render_block', 'overdide_yoast_faqs', 10, 2 );

but it's not working for my website. It breaks the website. I can only see the header of my website without the content.

I placed the code in functions.php. Should I place it somewhere else?

Is Yoast still working on this update?

you need to use this,

function overdide_yoast_faqs($block_content, $block){
if ( 'yoast/faq-block' == $block['blockName'] ){
// This turns strong tags into h2 tags
return preg_replace('/<strong([^>]+)>(.*?)</strong>/','<h2\1>\2',$block_content);
}
return $block_content;
}
add_filter( 'render_block', 'overdide_yoast_faqs', 10, 2

[promarketer-it]

I'm looking to convert the FAQ titles to h3. I tried to add this coode:
<?php function overdide_yoast_faqs($block_content, $block){ if ( 'yoast/faq-block' == $block['blockName'] ){ // This turns strong tags into h2 tags return preg_replace('/<strong([^>]+)>(.*?)<\/strong>/','<h2\1>\2</h2>',$block_content); } } add_filter( 'render_block', 'overdide_yoast_faqs', 10, 2 );
but it's not working for my website. It breaks the website. I can only see the header of my website without the content.
I placed the code in functions.php. Should I place it somewhere else?
Is Yoast still working on this update?

you need to use this,

function overdide_yoast_faqs($block_content, $block){
if ( 'yoast/faq-block' == $block['blockName'] ){
// This turns strong tags into h2 tags
return preg_replace('/<strong([^>]+)>(.*?)/','<h2\1>\2',$block_content);
}
return $block_content;
}
add_filter( 'render_block', 'overdide_yoast_faqs', 10, 2

Hello, thanks a lot for your reply.

I tried to place your code but it can't save the functions.php file due to this error:

syntax error, unexpected end of file, expecting ')'

Here what I see when I save: https://gyazo.com/043ae9d383ab9a6303e82e6be621fbf0

[brodiebrodie]

hi, sorry, my mistake, last line should be

add_filter( 'render_block', 'overdide_yoast_faqs', 10, 2 );

[promarketer-it]

hi, sorry, my mistake, last line should be

add_filter( 'render_block', 'overdide_yoast_faqs', 10, 2 );

No problem! :)

Now it's saved now. Unfortunately the function breaks the code and the FAQ don't show up anymore: https://gyazo.com/05a369a5d55d0f6c5e3248d0ee775bb9

[brodiebrodie]

interesting, it work for me.

Is your code exactly this;

// add h2 to yoast faq block

function overdide_yoast_faqs($block_content, $block){
if ( 'yoast/faq-block' == $block['blockName'] ){
// This turns strong tags into h2 tags
return preg_replace('/<strong([^>]+)>(.*?)</strong>/','<h2\1>\2',$block_content);
}
return $block_content;
}
add_filter( 'render_block', 'overdide_yoast_faqs', 10, 2 );

[promarketer-it]

Yeah, it looks the same: https://gyazo.com/a6a2107e355920779b4a3261f4d2e0de

You can have a look here.

Strange yeah...

[brodiebrodie]

try removing this line

// This turns strong tags into h2 tags

[promarketer-it]

Done. Still nothing...

[brodiebrodie]

no , I see it now,

return preg_replace('/<strong([^>]+)>(.*?)</strong>/','<h2\1>\2',$block_content);

this line is not the same in yours, you are missing the final

[brodiebrodie]

some tags are being stripped out on paste here

[brodiebrodie]

[promarketer-it]

Added: https://gyazo.com/3bae4d2e3d8352adb68ec34162aba60c

But still not showing up...

[brodiebrodie]

compare that with yours

[promarketer-it]

it looks the same

[brodiebrodie]

Its not, you re missing a tag towards the end of line 884

[promarketer-it]

I copied and pasted it close each other to see what it's missing but they look the same to me:

[brodiebrodie]

compare line 7 on the image I posted, line 884 that you posted. </h2>is missing

it should be this

return preg_replace('/<strong([^>]+)>(.*?)<\/strong>/','<h2\1>\2</h2>',$block_content);

[promarketer-it]

Great! It's working now 🥳 Thanks a lot for your time!

[brodiebrodie]

hurrah!

[michaelbriantina]

Please inform the customer of conversation # 767130 when this conversation has been closed.

[James-S-F]

This is still a problem in the current version of Yoast (17.0). What's the ETA for a fix now?

[monbauza]

+1 https://wordpress.org/support/topic/how-to-put-h2-or-h3-in-question-of-faq-yoast-gutenberd/

[michaelbriantina]

+1 https://wordpress.org/support/topic/yoast-blocks-are-not-popular-for-this/

[Yvonne-Palanca]

Please inform the customer of conversation #4409031 when this conversation has been closed.

[michaelbriantina]

Please inform the customer of conversation # 908187 when this conversation has been closed.

[monbauza]

+1 https://twitter.com/stkjj/status/1575361916612001793

[rumejan]

Please inform the customer of conversation # 969618 when this conversation has been closed.

[TheShah]

Maybe the following example helps someone:

`function overdide_yoast_faqs($block_content, $block){
if ( 'yoast/faq-block' == $block['blockName'] ){

    $markup = "some html markup";

    //need to split the block to answers each
    $questions = explode('</div>', $block_content);

    foreach ($questions as $key => $question) {
        // do any replacements here $question is equal to a Question-Block

        // count the words in this question
        $wordcount = shahin_gs_count_words($question); 
        
        if($wordcount >= '50'){
            $questions[$key] = $question . $markup;
        }
    }
   // gluing the array together with 'div' will add the tags back 
    $block_content = implode('</div>', $questions);
}
return $block_content;

}
add_filter( 'render_block', 'overdide_yoast_faqs', 10, 2 );`

Needed to add a Button to each FAQ.