block.json selectors support

  • I’m trying to set the CSS selector that is used by the typography block support for a custom block I’m developing. According to the docs that should be possible.

    If I insert my block and change the font-size, the has-small-font-size class always get’s applied to the root element of my block. Allthough I’ve tried the following in the block.json:

    "selectors": {
    "root": ".box",
    "spacing": {
      "blockGap": ".box__content"
    },
    "typography": ".box__title"
  }

"selectors": {
    "root": ".box",
    "spacing": {
      "blockGap": ".box__content"
    },
    "typography": {
      "root": ".box__content",
      "fontSize": ".box__title"
    }
  },

    According to the docs page, it should work from core 6.3. on. I’m using 6.4 and the Gutenberg 17.5.

    If I search the core/Gutenberg code, I can’t find places where those selectors are used in the block-supports apply functions. Could it be, that this is only used for global block styles (= changing the global style of a block via site editor global styles or via theme.json) and not on a block instance level?

    If that is the case, it would be great if that is documented. Also a list of all the block supports that support selectors would be great. The block.json schema lists a lot of properties that the doc page does not.

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

  • You have specified several selectors, but according to the documentation you can only use one. If you only specify one, will it work?

    And: deactivate the Gutenberg plugin. That way you can be sure that it works in the current WordPress (which it should in my opinion).

    Thread Starter Fabian Todt

    (@gaambo)

    You have specified several selectors

    The code block above shows two “selectors” keys, because that were the two variants I tried. The first one directly sets one selector for the whole “typography” block support, the second one sets a root selector for the typography block-support and a special selector for the fontSize “subfeature” (as it’s called in the docs).

    I’ve just tried it with Gutenberg 17.6.0 and also disabled Gutenberg and tried it again. None of the two ways above worked.

    I also don’t see any code inside the block support apply functions that would use the selectors. That’s why I thought, maybe it’s just for global styles but not for single block instances?

    Any word on this? I’ve tried selectors in block.json on static, dynamic and acf blocks, and can’t get it to work anywhere.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘block.json selectors support’ is closed to new replies.

Tags