Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is there any way to stop the wp-container-{id} class from being output in the Group block? #38127

Closed
ddryo opened this issue Jan 21, 2022 · 6 comments
Labels
[Block] Group Affects the Group Block (and row, stack and grid variants) CSS Styling Related to editor and front end styles, CSS-specific issues. [Type] Question Questions about the design or development of the editor.

Comments

@ddryo
Copy link
Contributor

ddryo commented Jan 21, 2022

For classic themes that are not FSE themes, I don't think wp-container-{id} is necessary.

I would like to have the ability to turn off this class, as I feel this makes the HTML look messy.

On the other hand, as I wrote in #38126, I need a class that can determine that it is a "Row" block.

@karmatosed karmatosed added the [Type] Question Questions about the design or development of the editor. label Jan 21, 2022
@skorasaurus skorasaurus added the [Block] Group Affects the Group Block (and row, stack and grid variants) label Jan 24, 2022
@MatzeKitt
Copy link
Contributor

MatzeKitt commented Jan 27, 2022

This should do the trick:

remove_filter( 'render_block', 'gutenberg_render_layout_support_flag' );

add_filter( 'render_block', function( $block_content, $block ) {
	if ( $block['blockName'] === 'core/group' ) {
		return $block_content;
	}
	
	return gutenberg_render_layout_support_flag( $block_content, $block );
}, 10, 2 );

This will remove the function that creates this class in the first place and then adds it again for every other block type.

@ddryo
Copy link
Contributor Author

ddryo commented May 20, 2022

@MatzeKitt

Thank you. But that didn't work out.
I got an Call to undefined functiongutenberg_render_layout_support_flag() error.

@ddryo
Copy link
Contributor Author

ddryo commented May 20, 2022

However, I was able to remove wp-container-{id} from all blocks with the following code.

remove_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );
remove_filter( 'render_block', 'gutenberg_render_layout_support_flag', 10, 2 );

@nlstm-tm
Copy link

nlstm-tm commented Aug 16, 2022

It took some digging but this is the proper way to do it specifically in the Gutenberg Editor

wp.hooks.removeFilter('editor.BlockListBlock', 'core/editor/layout/with-layout-styles')

Do this in your plain JS file enqueued in the Gutenberg Editor

@ddryo
Copy link
Contributor Author

ddryo commented Nov 4, 2022

As it is used in various blocks, not just groups, I have found this specification necessary.

So I will close.

@jerome-toole
Copy link

In WordPress 6.1, a theme support option was added to opt out of these inlined layout styles and dynamic classes.

// Disable layout styles.

add_theme_support( 'disable-layout-styles' );

https://make.wordpress.org/core/2022/10/10/updated-editor-layout-support-in-6-1-after-refactor/

I found that the previous answer's solution (removing the wp_render_layout_support_flag filter) mostly worked but also removed some classes from the markup that I did want such as alignment classes (e.g. .is-content-justification-center).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Group Affects the Group Block (and row, stack and grid variants) CSS Styling Related to editor and front end styles, CSS-specific issues. [Type] Question Questions about the design or development of the editor.
Projects
None yet
Development

No branches or pull requests

6 participants