Block support styles added to block preview div interfering with child element

• drangel99

• June 13, 2023 at 6:47 pm

Hey everyone!

So, I’ve been beating my head against this trying to find a solution to an issue I’m having. I’m creating a new custom WordPress block using the new ACF Pro v2 method. Right now, I have my block.json and theme.json files enabling the WordPress core text color, background color, and gradient color pickers and setting default values. Everything is working as intended, I can set these appearance options using the color pickers and they are applied in the editor screen and on the front end of the website.

block.json

},
  "attributes": {
    "align": {
      "type": "string",
      "default": "full"
    },
    "style": {
      "type": "object",
      "default": {
        "color": {
          "text": "#1b1b1b",
          "background": "#aabbcc",
          "gradient": "linear-gradient(135deg,rgb(170,187,204) 0%,rgb(17,34,51) 100%)"
        }
      }
    }
  }

theme.json

"settings": {
    "color": {
      "duotone": [
        {
          "colors": ["#000", "#FFF"],
          "slug": "black-and-white",
          "name": "Black and White"
        }
      ],
      "gradients": [
        {
          "slug": "blush-light-purple",
          "gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
          "name": "Blush light purple"
        }
      ],
      "palette": [
        {
          "slug": "strong-magenta",
          "color": "#a156b4",
          "name": "Strong magenta"
        }
      ]
    }
  }

Separately, I’m pulling an ACF image field that is used to set a background image for the <section>. This is combined with the gradient to create an image with a linear gradient over the top.

On the front end, everything looks great. My overall wrapper <section> is getting my image, text color, and custom/default background colors. However, on the backend, I’m getting the styles applied in two areas: to the block preview <div> and then to the <section> that is housed within it. So, what I (or the user) see on the front end page doesn’t match up with what is in the editor preview.

I tried sharing a screenshot of what I’m seeing in the inspector tools from my google drive, but it’s not loading correctly.

I am pretty sure there is a way to keep this from happening, I just can’t for the life of me figure out what it is. Any help in the right direction would be greatly appreciated!

• drangel99

• June 14, 2023 at 11:46 am

Update to what I’m seeing in the inspector:

<div tabindex="0" style="color: rgb(255, 255, 255); background: linear-gradient(135deg, rgba(237, 237, 237, 0.78) 0%, rgba(169, 183, 194, 0.8) 100%);" class="block-editor-block-list__block wp-block acf-block-component acf-block-body acf-block-preview has-text-color has-background is-selected wp-block-acf-content-block fancy-unique-class" id="block-5600e618-7d74-4dcf-a6b6-90622bdd8b14" role="document" aria-label="Block: Content Block" data-block="5600e618-7d74-4dcf-a6b6-90622bdd8b14" data-type="acf/content-block" data-title="Content Block">

<section class="page-section page-section-content-block content-block fancy-unique-class alignfull" style="color: rgb(255, 255, 255); background-image: url("https://strength-20.local/wp-content/uploads/2023/06/topographical-map-background-light-purple.png"); background-size: cover; background-position: center top;">
...
</section>
</div>