Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Selectors API] Does not affect block styles, global styles works.. but only on the frontend #50416

Closed
slpy9 opened this issue May 6, 2023 · 5 comments
Labels
[Feature] Block API API that allows to express the block paradigm. [Type] Bug An existing feature does not function as intended

Comments

@slpy9
Copy link

slpy9 commented May 6, 2023

Description

I am using the Selectors API to apply color properties to an inner div instead of the block div, but it does not appear to be using the selector when I change the blocks properties.

If I change the block colors in global styles it works, but only on the frontend. If I use the former __experimentalSelector, it affects global styles in the editor too.

Step-by-step reproduction instructions

  1. Create a block
  2. Use the Selectors API
  3. Test if the selector is affecting block properties, global styles, backend and frontend.

Screenshots, screen recording, code snippet

  1. Selectors not affecting block styles in the editor,
    block-style-editor
    nor on the frontend.
    block-style-frontend

  2. Selectors not affecting global styles in the editor,
    global-style-editor
    but works on the frontend.
    global-style-frontend

  3. Old Selectors API ("__experimentalSelector") works for global styles in the editor,
    old-api--global-style-editor
    and on the frontend.
    old-api--global-style-frontend

My block code

block.json

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "dev/test-block",
    "title": "Test Block",
    "supports": {
        "color": true
    },
    "selectors": {
        "root": ".inner-div"
    },
    "editorScript": "file:./index.js"
}

index.js

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';

import metadata from './block.json';

const style = {
	border: '4px solid red',
	padding: '1em',
};

const blockProps = { className: 'block-div', style };

const Test = ({ blockProps }) => (
	<div { ...blockProps }>
		<h3>Block div</h3>
		<div className={ 'inner-div' } style={ style }>
			<h3>Inner div</h3>
		</div>
	</div>
);

registerBlockType( metadata.name, { 
	edit: () => ( <Test blockProps={ useBlockProps( blockProps ) } /> ),
	save: () => ( <Test blockProps={ useBlockProps.save( blockProps ) } /> ),
} );

Environment info

  • WordPress 6.2, Gutenberg 15.7.0, Twenty Twenty-Three
  • Chrome
  • Desktop with Windows 10

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@gziolo gziolo added [Type] Bug An existing feature does not function as intended [Feature] Block API API that allows to express the block paradigm. labels May 7, 2023
@gziolo
Copy link
Member

gziolo commented May 9, 2023

@aaronrobertshaw, is it something on your radar?

@slpy9
Copy link
Author

slpy9 commented May 9, 2023

I've spent some time trying to debug this myself, although I'm somewhat out of my depth here..

There's a couple of issues with my code:-

  • registerBlockType( metadata.name, ... ) this is generated by create-block, though I noticed the Selectors metadata was not being picked up unless I passed the whole metadata object to registerBlockType.
  • My selector usage is not quite right, and should start from the block's classname? e.g. ".block-div .inner-div"

Color changes on the block are still applied to the block div, but changing color under global styles is correctly applying to the inner div.

I've also tried testing other block supports, and was able to get duotone filters correctly applied to the inner div, on both backend and frontend.

@aaronrobertshaw
Copy link
Contributor

👍 Thanks for the ping, it looks like there are two separate issues here.

The first is there was a regression in the Gutenberg plugin caused by #50079 which resulted in the theme.json classes bundled in it not being used. A fix for this is up in #50310 and should land soon. This bug causes the custom selectors not to be used in the generated stylesheet.

After checking out #50310 and adding global styles for the test block, it correctly applies them to the inner div.

Screenshot 2023-05-11 at 10 18 41 am

The second issue is more of a misunderstanding. The selectors API is used to apply global styles to specific block elements via CSS rules. If your block needs to apply block support styles, for individual blocks, to inner elements, it needs to skip the default serialization of the block support styles on the outer block wrapper, and then manually apply them where required. This needs to occur in both the block's edit and save functions.

There are several core blocks that do this using __experimentalSkipSerialization and would serve as a guide to follow.

  • Calendar
  • Separator
  • Gallery
  • Image
  • Search
  • Navigation
  • Table
  • Button
  • Avatar
  • Post Featured Image

There are also a few utility hooks that you might leverage to save doing the leg work of generating classes and styles when relocating them to inner blocks e.g. useColorProps.

Once #50310 lands, we should be able to close out this issue 🤞

I hope that helps.

@slpy9
Copy link
Author

slpy9 commented May 11, 2023

Thanks for the update @aaronrobertshaw.

I had previously been using useColorProps and __experimentalSkipSerialization to apply props to a wrapped div, but reading through the Selectors docs gave me the impression it would simplify this process.

That's quite the bummer if it's only intended for global styles use.

@tellthemachines
Copy link
Contributor

Closing this issue since #50310 is merged. Thanks everyone!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block API API that allows to express the block paradigm. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

4 participants