Dynamic CSS for custom block

[prajaktagadhave]

How to add CSS for before after pseudo element in Gutenberg block?

As no unique id generated on the frontend, is there another way to write CSS for pseudo-element?

[aduth]

Can you expand on your use-case? Is it possible that CSS variations could be applied either through a customClassName (the "Advanced" > "Additional CSS Class" inspector field) or by saving an attribute for your dynamic block which, on the server, is applied to the generated markup as a class?

Preemptively closing, but let's reopen if the question remains unsettled.

[prajaktagadhave]

We have a custom block where we used some arrow with pseudo-elements. We want to change the color of this arrow as per color selection blockwise.

For eg. For block 1 arrow color should be red. And if I duplicate the block 1 then second block color should be changed to 'green'.

Reference screenshot - https://goo.gl/hZ9YP6

[aduth]

From what I understand then, the color would be user-selected? In which case, I might suggest storing this value as an attribute of the block, which can then be accessed in the server-side implementation of your block.

The components are here, though not documented at the moment (cc @jorgefilipecosta in case I'm missing some):

https://github.com/WordPress/gutenberg/tree/master/packages/editor/src/components/colors

I expect it would work very similarly to the color options for both the Paragraph and Button blocks, in case you want to reference those in the meantime:

• https://github.com/WordPress/gutenberg/blob/57f98b219093a746da6ca3d5a532f106dc238230/packages/block-library/src/paragraph/edit.js
• https://github.com/WordPress/gutenberg/blob/57f98b219093a746da6ca3d5a532f106dc238230/packages/block-library/src/button/edit.js