Home Forums General Issues Block support styles added to block preview div interfering with child element


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

  • 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.


      "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%)"


    "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!

  • 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;">

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.