The DOM structure output in the "Category" block" is different on the front side and the editor side.

[ddryo]

Thank you for your development.

The structure output in the "Category block" is different on the front side and the editor side.

Problem 1

▼ For example, when used in list type, the structure on the editor is as follows.

<ul class="wp-block-categories__list wp-block-categories__list-level-0">
  <li>
    <a href="...">Lorem</a>
    <span class="wp-block-categories__post-count"> ({count})</span>
  </li>
  <li>...</li>
</ul>

▼ However, what is actually output on the front side is the following structure.

<ul class="wp-block-categories-list wp-block-categories">
  <li class="cat-item cat-item-{id}">
    <a href="...">Lorem</a> ({count})
  </li>
  <li>...</li>
</ul>

• <ul> class is different
• <li> class is different
• "count" <span> is different

The structure has changed from the legacy "Category widget", and it is very difficult to have such a difference.

Problem 2

"wp_list_categories" hook is not working in the editor.

For example, I move the count into <a> with code like this:

add_action( 'wp_list_categories', function( $output, $args ) {
    $output = str_replace( '</a> (', '<span class="cat-post-count">(', $output );
    $output = str_replace( ')', ')</span></a>', $output );
    return $output;
}, 10, 2 );

This is not reflected in the editor.

---

I think these issues are very important.

WordPress information

• WordPress version: 5.6.2 & 5.7 RC2
• Gutenberg version: 10.1.0

[kurudrive]

Oh
I'd like you to output the same class with structure.

[ddryo]

We've confirmed it's fixed in 5.8 beta 1!
Thank you!

[ddryo]

Oh, sorry, it was only Problem 2 that was fixed.

[skorasaurus]

Hi,

I believe this was fixed in #43666 ; please reopen this if this is still an issue on Gutenberg 14.1

[ddryo]

@t-hamano
Thanks!

[ddryo]

@skorasaurus @t-hamano
The DOM structure is aligned with the front. Thank you.
But, "Problem 2" was still not resolved.

As already mentioned, common customizations such as using the wp_list_categories hook to put the count in an <a> look out of place with the editor.

[t-hamano]

@ddryo

"wp_list_categories" hook is not working in the editor.

I think this is expected behavior. This is because the Edit component of this block is not a server-side rendering. This may be true for all dynamic blocks that are not rendered by ServierSideRender component.

If you really want to change the DOM structure on the editor side, I think we can use the blocks.registerBlockType filter to override the Edit component.

[ddryo]

Understood, I'll try!