Block: rename is-selected class

[ellatrix]

Description

Blocks #19701.

This PR renames the block's is-selected class to the more descriptive is-appearing-selected class. The current class is misleading, as it may not be added even though the block is selected. The class is omitted when a block does not appear selected (when typing).

This change is necessary for blocks to be able to render their own wrapper as RichText also has a is-selected class, which causes a block to continuously look selected. The problem is not really the class duplication, but rather using is-selected to mean different things.

Some more complex block may have CSS rules using this class, but

1. The class is anyway going to change meaning with the new G2 design (blocks will not have the selection border). It may even be removed since it won't be needed anymore.
2. Classes are not an official API.
3. When it is used, blocks are diverging from a consistent block styling.
4. In some cases it seems to be combined with is-typing, which maybe indicates a need for a proper is-selected class. I consider adding a new class out of scope though.

How has this been tested?

Screenshots

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR. .

[youknowriad]

i think we should hold on this PR because in G2 branch, is-selected means isSelected and there's no "selected style" anymore.

[ellatrix]

Sure, though it's blocking some other work. You could even remove the is-selected class in your branch? Is it still used for anything?

[youknowriad]

@ellatrix I think some block still rely on it to show/hide things. what is this blocking?

[ellatrix]

This:

This change is necessary for blocks to be able to render their own wrapper as RichText also has a is-selected class, which causes a block to continuously look selected. The problem is not really the class duplication, but rather using is-selected to mean different things.

It's fine if G2 is going to be merged this release cycle, but otherwise it would be good to fix in the meantime.

[youknowriad]

Why not change the is-selected used in RichText? seems less risky.

[ellatrix]

Because it's misnamed by the block, not by rich text. The block doesn't apply the is-selected class consistently and it's actually using the class for showing the block as selected. That said, maybe is-selected classes should ideally be prefixed, e.g. is-rich-text-selected and is-block-selected. I'm fine with adjusting it for rich text.

[youknowriad]

Because it's misnamed by the block, not by rich text

Right, it won't be misnamed though with G2. The problem here is that two components will impact the same DOM element and this is not that common. Not opposed to rename both but let's start with RichText cause I don't expect any third-party code to rely on this class.

[ellatrix]

Agreed. Plus the class in rich text is only used for one thing (the placeholder).

[youknowriad]

Wondering what does "is-selected" mean for RichText? Does it mean focused? can't we use :focus or something?

[ellatrix]

I tried to use :focus but there seems to be a problem with selector specificity. I'll attempt to rewrite it.