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: https://github.com/Yoast/wordpress-seo/issues/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: https://github.com/Yoast/wordpress-seo/pull/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

[ozidrice]

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)

I'm just adding that to make it working properly you need to add a return after the condition, otherwise others block are deleted 🤔 But thanks ! It's just what I was looking for 🥰

For people who are looking for the same thing with the how-to block, you just have to change the if to "yoast/how-to-block" (or put it in a OR condition) 🥳

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);
	}
        return $block_content;
}
add_filter( 'render_block', 'overdide_yoast_faqs', 10, 2 );

[monbauza]

+1 https://www.youtube.com/watch?v=y8WwW44L1Qk&lc=Ugx1Nn86mILBVCk5yNh4AaABAg

[RojaBella]

Yes please!!! It's the most basic of requirements to be able to set the Question as a heading. Is this going to be addressed since it's been asked for since 2018?

[michaelbriantina]

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

[advancedperiodontics]

Yes please!!! It's the most basic of requirements to be able to set the Question as a heading. Is this going to be addressed since it's been asked for since 2018?

It seems like Yoast is so big, that a simple & practical improvement has taken over two years. As someone who posted in this thread two years ago, I've since moved off of the Yoast platform.

[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?

[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...