Block Styles: Fix block style variation selector generation

[aaronrobertshaw]

This ticket tracks the backporting of PHP files for the following Gutenberg changes:

​https://github.com/WordPress/gutenberg/pull/58051

These changes fix the generation of selectors for block style variations which could previously invalid CSS selectors e.g. .is-style-darkp instead of p.is-style-dark if the block with the variation used an element tag as it's base selector.

Syncs the changes from ​https://github.com/WordPress/gutenberg/pull/58051.

These changes fix the generation of selectors for block style variations. Previously, an incorrect CSS selector could be generated if the block's base selector used an element tag etc.

To test:

Run: npm run test:php -- --filter Tests_Theme_wpThemeJson

If you want to go further and test manually:

1. Add a block style to the paragraph block in its block.json file
2. Within Global Styles, set a text color or something for the block style variation you just added
3. Apply the variation to a block instance and view it on the frontend
4. Inspect paragraph and confirm the variation's selector e.g. is-style-dark is appended to the p tag rather than prefixing it

Trac ticket: https://core.trac.wordpress.org/ticket/60453

Thanks for the comprehensive tests.

[youknowriad]

In 57547:

Editor: Fix block style variation selector generation.

These changes fix the generation of selectors for block style variations. Previously, an incorrect CSS selector could be generated if the block's base selector used an element tag etc.

Props aaronrobertshaw, youknowriad, mukesh27.
Fixes #60453.

commit https://core.trac.wordpress.org/changeset/57547