Where do these inline css .wp-container-62… styles come from?

  • Marc Toensing

    (@marcdk)


    2 years, 1 month ago

    Hi,

    I don’t understand where several inline css styles regarding Twenty-Twenty-Two originate from. At the top of all my pages there are many dynamically generated inline styles that influence blocks in Twenty-Twenty-Two. They look like this: 

    <style>.wp-container-62286db5e8703 {display: flex;gap: var( --wp--style--block-gap, 0.5em );flex-wrap: wrap;align-items: center;align-items: center;}.wp-container-62286db5e8703 > * { margin: 0; }</style>
<style>.wp-container-62286db5e9459 {display: flex;gap: var( --wp--style--block-gap, 0.5em );flex-wrap: wrap;align-items: center;align-items: center;justify-content: flex-end;}.wp-container-62286db5e9459 > * { margin: 0; }</style>
<style>.wp-container-62286db5e9643 {display: flex;gap: var( --wp--style--block-gap, 0.5em );flex-wrap: wrap;align-items: center;align-items: center;justify-content: space-between;}.wp-container-62286db5e9643 > * { margin: 0; }</style>
<style>.wp-container-62286db5e9855 > * {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-62286db5e9855 > .alignwide { max-width: 1000px;}.wp-container-62286db5e9855 .alignfull { max-width: none; }.wp-container-62286db5e9855 .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5e9855 .alignright { float: right; margin-left: 2em; }.wp-container-62286db5e9855 > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5e9855 > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db5e9c2a .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5e9c2a .alignright { float: right; margin-left: 2em; }.wp-container-62286db5e9c2a > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5e9c2a > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db5e9e0c .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5e9e0c .alignright { float: right; margin-left: 2em; }.wp-container-62286db5e9e0c > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5e9e0c > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-elements-62286db5e9e40 a{color: var(--wp--preset--color--background);}</style>
<style>.wp-container-62286db5ea05a > * {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-62286db5ea05a > .alignwide { max-width: 1000px;}.wp-container-62286db5ea05a .alignfull { max-width: none; }.wp-container-62286db5ea05a .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5ea05a .alignright { float: right; margin-left: 2em; }.wp-container-62286db5ea05a > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5ea05a > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db5ea97f > * {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-62286db5ea97f > .alignwide { max-width: 1000px;}.wp-container-62286db5ea97f .alignfull { max-width: none; }.wp-container-62286db5ea97f .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5ea97f .alignright { float: right; margin-left: 2em; }.wp-container-62286db5ea97f > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5ea97f > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db5eab77 .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5eab77 .alignright { float: right; margin-left: 2em; }.wp-container-62286db5eab77 > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5eab77 > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db5eb0dd > * {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-62286db5eb0dd > .alignwide { max-width: 1000px;}.wp-container-62286db5eb0dd .alignfull { max-width: none; }.wp-container-62286db5eb0dd .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5eb0dd .alignright { float: right; margin-left: 2em; }.wp-container-62286db5eb0dd > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5eb0dd > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db5eb2c4 .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5eb2c4 .alignright { float: right; margin-left: 2em; }.wp-container-62286db5eb2c4 > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5eb2c4 > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db5eb7ee > * {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-62286db5eb7ee > .alignwide { max-width: 1000px;}.wp-container-62286db5eb7ee .alignfull { max-width: none; }.wp-container-62286db5eb7ee .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5eb7ee .alignright { float: right; margin-left: 2em; }.wp-container-62286db5eb7ee > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5eb7ee > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db5eb9d5 .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5eb9d5 .alignright { float: right; margin-left: 2em; }.wp-container-62286db5eb9d5 > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5eb9d5 > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db5ebf2f > * {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-62286db5ebf2f > .alignwide { max-width: 1000px;}.wp-container-62286db5ebf2f .alignfull { max-width: none; }.wp-container-62286db5ebf2f .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5ebf2f .alignright { float: right; margin-left: 2em; }.wp-container-62286db5ebf2f > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5ebf2f > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db5ec116 .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5ec116 .alignright { float: right; margin-left: 2em; }.wp-container-62286db5ec116 > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5ec116 > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db5ec67a > * {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-62286db5ec67a > .alignwide { max-width: 1000px;}.wp-container-62286db5ec67a .alignfull { max-width: none; }.wp-container-62286db5ec67a .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5ec67a .alignright { float: right; margin-left: 2em; }.wp-container-62286db5ec67a > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5ec67a > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db5ec863 .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5ec863 .alignright { float: right; margin-left: 2em; }.wp-container-62286db5ec863 > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5ec863 > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db5ece3f > * {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-62286db5ece3f > .alignwide { max-width: 1000px;}.wp-container-62286db5ece3f .alignfull { max-width: none; }.wp-container-62286db5ece3f .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5ece3f .alignright { float: right; margin-left: 2em; }.wp-container-62286db5ece3f > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5ece3f > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db5ed078 .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5ed078 .alignright { float: right; margin-left: 2em; }.wp-container-62286db5ed078 > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5ed078 > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db5ed741 > * {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-62286db5ed741 > .alignwide { max-width: 1000px;}.wp-container-62286db5ed741 .alignfull { max-width: none; }.wp-container-62286db5ed741 .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5ed741 .alignright { float: right; margin-left: 2em; }.wp-container-62286db5ed741 > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5ed741 > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db5ed969 .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5ed969 .alignright { float: right; margin-left: 2em; }.wp-container-62286db5ed969 > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5ed969 > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db5edcfd .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5edcfd .alignright { float: right; margin-left: 2em; }.wp-container-62286db5edcfd > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5edcfd > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db5ee1bb {display: flex;gap: var( --wp--style--block-gap, 0.5em );flex-wrap: nowrap;align-items: center;align-items: center;justify-content: space-between;}.wp-container-62286db5ee1bb > * { margin: 0; }</style>
<style>.wp-container-62286db5ee3cd > * {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}.wp-container-62286db5ee3cd > .alignwide { max-width: 1000px;}.wp-container-62286db5ee3cd .alignfull { max-width: none; }.wp-container-62286db5ee3cd .alignleft { float: left; margin-right: 2em; }.wp-container-62286db5ee3cd .alignright { float: right; margin-left: 2em; }.wp-container-62286db5ee3cd > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db5ee3cd > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-elements-62286db61dcf2 a{color: var(--wp--preset--color--background);}</style>
<style>.wp-container-62286db61df74 .alignleft { float: left; margin-right: 2em; }.wp-container-62286db61df74 .alignright { float: right; margin-left: 2em; }.wp-container-62286db61df74 > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db61df74 > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db61e16f .alignleft { float: left; margin-right: 2em; }.wp-container-62286db61e16f .alignright { float: right; margin-left: 2em; }.wp-container-62286db61e16f > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db61e16f > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-container-62286db61e4f4 .alignleft { float: left; margin-right: 2em; }.wp-container-62286db61e4f4 .alignright { float: right; margin-left: 2em; }.wp-container-62286db61e4f4 > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db61e4f4 > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-elements-62286db61e72d a{color: var(--wp--preset--color--background);}</style>
<style>.wp-container-62286db61e969 .alignleft { float: left; margin-right: 2em; }.wp-container-62286db61e969 .alignright { float: right; margin-left: 2em; }.wp-container-62286db61e969 > * { margin-top: 0; margin-bottom: 0; }.wp-container-62286db61e969 > * + * { margin-top: var( --wp--style--block-gap );  margin-bottom: 0; }</style>
<style>.wp-elements-62286db61ea00 a{color: var(--wp--preset--color--background);}</style>
<style>.wp-elements-62286db61ea38 a{color: var(--wp--preset--color--background);}</style>
<style>.wp-container-62286db61ec2d {display: flex;gap: var( --wp--style--block-gap, 0.5em );flex-wrap: wrap;align-items: center;align-items: center;justify-content: space-between;}.wp-container-62286db61ec2d > * { margin: 0; }</style>

    Why is this happening?

    I think there are more of these styles each week. Where do they come from? Why are they appearing? I checked the global style editor and checked single blocks in my content. I did not intentionally change any styles, and they do weird stuff. Can please somebody explain this to me? My only solution is to overwrite these styles with custom css that is really bad practice.

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • saturn3

    (@saturn3)

    2 years, 1 month ago

    I think the block has some kind of customization to it that makes WordPress generate a class that is uniquely identified by the 62XXXXXXXXXXXX number. That way it can target a specific block through this complex hyphenated class with the number attached to it.

    Maybe?

    Azragh

    (@azragh)

    2 years, 1 month ago

    NO. Customization isn’t necessary. I’m just trying to find out what’s happening and why. As far as I know it’s caused by having a theme.json with “Layout” properties set, but in my case i have 

        "layout": {
      "contentSize": "100%",
      "wideSize": "100%"
    },

    "spacing": {
      "customPadding": false,
      "customMargin": false,
      "units": [ "px", "em", "vh", "vw", "%" ]
    },

    from which i’d assume that no customizations to base styles are possible – nevertheless all my columns have now a seperate inline style which sets the gap to .5 em whysoever. My fullwidth-containers now overflow the window again (managed to display them properly in backend with a custom property added to the editor which simulates 100vw) and much more. I’m actually mad af.

    saturn3

    (@saturn3)

    2 years, 1 month ago

    You have made your frustration clear. Sorry for intruding. Good luck.

    Thread Starter Marc Toensing

    (@marcdk)

    2 years, 1 month ago

    Why can’t anybody explain where these inline css styles come from? We are talking about the core Theme TTT and a standard WordPress 5.9. This must affect many people

    Michelle Curran

    (@mecurran)

    2 years ago

    @marcdk, this is also causing major problems for me, I cannot find anything in the documentation to figure out how to deal with this, and cannot proceed with the 5.9 upgrade on my client sites until I can figure this out.

    The automatic wp-container-id class that is adding to all my group blocks is overriding margins that I have already set for the group blocks in my patterns, and is breaking a good number of them all over the site. My custom theme is already dealing with the layout and margins for my group blocks, I need to disable this, it is uncontrollable with the inclusion of the id in the class!!!

    Michelle Curran

    (@mecurran)

    2 years ago

    I don’t know the exact answer to your question, but if anyone finds this helpful, this worked for me for correcting the issues relating to the new container class on block group….

    The wp-container-id class can be removed by adding this code, which will remove it for every block, then add it back in for every block except the group block:

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

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

		return wp_render_layout_support_flag( $block_content, $block );
	}, 10, 2 );

    found that here:
    https://fullsiteediting.com/lessons/how-to-remove-default-block-styles/#h-how-to-remove-the-inline-styles-on-the-front

    sw33t

    (@sw33t)

    1 year, 10 months ago

    Thank you, that worked perfectly! WordPress 6 is messing up my layouts and adding “gaps” everywhere… 

    if ( $block['blockName'] === 'core/columns' ) {
			return $block_content;
		}
		if ( $block['blockName'] === 'core/column' ) {
			return $block_content;
		}
		if ( $block['blockName'] === 'core/group' ) {
			return $block_content;
		}
    raffjones

    (@raffjones)

    1 year, 9 months ago

    This is such a horrible issue to have to try and resolve.

    Injections of inline styles destroyed my site on upgrading to WP 6.1

    I’ve mananged to bin the endless wp-container-* styles using the solutions above, but I still can’t get rid of wp-block-gallery-* inline styles… where are they coming from?

    I find it hard to believe the WP team see this injection of inline CSS as a good path forward.

    Yurii Pavlov

    (@alraen)

    1 year, 8 months ago

    The reason is in the block metadata options. Some default blocks have an __experimentalLayout property. This allows you to generate a layout with different positions of block elements. For example, a Group block can become a row or a column. The position of images in the gallery can be vertical or horizontal. When you change these settings in the blocks in the editor (in the block menu on the right) wordpress adds these damn classes and styles with unique names wp-container-* or wp-block-gallery-* to do on the frontend just like you set up the blocks in the editor. Why such a strange implementation was made, I do not understand.
    But, if you will disable wp_render_layout_support_flag filter (by the way, I removed this – use remove_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );), then you will have a mismatch – in the admin panel in the editor there will be horizontal blocking of the blocks in the group (if you set it up like that) and in the front will be vertical – the styles won’t work, you delete them.

    Therefore, the best solution would be to completely disable __experimentalLayout 

    
add_filter( 'block_type_metadata', 'my_remove_experimental_layout', 10, 1 );
function my_remove_experimental_layout( $metadata ) {
    if ( !empty($metadata['supports']['__experimentalLayout'])) {
        $metadata['supports']['__experimentalLayout'] = false;
    }
    return $metadata;
}

    It completely removes core blocks option to show it in row. But im not sure how it will affect another things…

    I would advise you to use less default blocks, make custom ones, turn off core blocks, leave only the main ones – paragraph, heading, picture, etc.

    polyfade

    (@polyfade)

    1 year, 7 months ago

    Thanks @alraen
    This article also helped: https://fullsiteediting.com/lessons/how-to-remove-default-block-styles/

    I hadn’t used WP in 6 months. The amount of garbage they dump in, out of the box, into a page is outrageous. I’ve spent an hour just undoing all the unjust they’ve caused. However, I never know if it’s really needed down the road.

    Using Sage disables a bunch with remove theme support, but there’s still emojis, gutenberg block css, and now this crap with adding .wp-container-# and its inline styles all over the place. Everytime they update WP, it’s always for the worse.

    Dimitris Arkolakis

    (@meetsos)

    1 year, 6 months ago

    @mecurran you are a life-saver!
    I managed with this code to remove the following 2 lines and pass the W3 validator!

    <style>.wp-container-1 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-1 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-1 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style>
<style>.wp-container-2 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-2 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-2 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style>

    Thanks a lot!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Where do these inline css .wp-container-62… styles come from?’ is closed to new replies.