Remove the figure margin style

  • polyfade

    (@polyfade)


    1 year, 1 month ago

    Now, it appears Gutenberg automatically adds a specific rule to <figure> tags which is difficult to override when using css @layer. It doesn’t matter that their rule is prefixed with :where().

    I tried disabling it in my theme.json file under the core/image block, but it didn’t seem to work.
    How do we get rid of this via filter or theme.json?

    :where(figure) {
    margin: 0 0 1em
    }

    I tried:

    "settings": { "blocks": { "core/image": { "spacing": { "margin": false }}}

    Viewing 5 replies - 1 through 5 (of 5 total)
    • Moderator threadi

      (@threadi)

      1 year, 1 month ago

      You can actually easily overload this with CSS:

      figure {
       margin: 0
      }

      You can also limit it to the images:

      figure.wp-block-image {
       margin: 0
      }

      In the editor, you can influence this via the margins on the block. For example, set it to exact pixel specification and set 0:

      View post on imgur.com

      This could also be influenced by theme.json:

      "core/image": {
      				"spacing": {
      					"margin": {
      						"bottom": "0"
      					}
      				}
      			},
      Thread Starter polyfade

      (@polyfade)

      1 year, 1 month ago

      @threadi No, that will not work because I’m using a design system with @layer. And since WP’s style is placed outside the layer in the cascade, it will always override my styles.

      Adding 0 to the top in the theme.json also won’t work because, again, the cascade.

      I’m using the “owl” selector (.flow > * + *) to address my child element’s margins. So adding 0 is a non-starter.

      Thread Starter polyfade

      (@polyfade)

      1 year, 1 month ago

      I also don’t even know if it’s coming from core/image either. All I know, it’s in wp-block-library stylesheet – which I still need. Otherwise, I’d unregister it.

      Moderator threadi

      (@threadi)

      1 year, 1 month ago

      I can’t think of any other way to solve this. You could contact the Gutenberg team with your request, they may see a way to do this: https://github.com/WordPress/gutenberg/issues

      Thread Starter polyfade

      (@polyfade)

      1 year, 1 month ago

      When using @layer, the only way I’ve found around this is to dequeue the global-styles, and manually add them back into the theme with a lower layer of specificity. This isn’t ideal, but that’s where I’m at.

    Viewing 5 replies - 1 through 5 (of 5 total)

    The topic ‘Remove the figure margin style’ is closed to new replies.