Standardize block styles cursor on hover

[devfle]

Description

I have unified the cursor of the block styles when hovering. Previously, a text cursor was displayed no matter what content was in there. This leads to confusion in my opinion. Gutenberg also uses pointer cursor for several interactive elements.

How has this been tested?

Builded the newest version of gutenberg with my changes and tested it in several browsers.

Screenshots

Before:

After:

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• 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 (please manually search all *.native.js files for terms that need renaming or removal).

[JustinyAhin]

I've tested this PR, and it looks fine for me.

[devfle]

I've tested this PR, and it looks fine for me.

Hi! Thank you for testing! do we have to wait for an other reviewer? Or do I have any tasks to do?

[JustinyAhin]

I've tested this PR, and it looks fine for me.

Hi! Thank you for testing! do we have to wait for an other reviewer? Or do I have any tasks to do?

Yes, I'd say let's wait for another one.

[carolinan]

Hi
Changing the cursor style here would affect the editors and not only the block styles panel.

I think it would be better to limit the change and increase the specificity of the cursor style that is used in the block styles panel, so that the .editor-styles-wrapper cursor style does not override it.

See https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/block-styles/style.scss#L11)

(Also I am not able to build the files, please refresh it so that it is up to date with changes to trunk)

[devfle]

Hi
Changing the cursor style here would affect the editors and not only the block styles panel.

I think it would be better to limit the change and increase the specificity of the cursor style that is used in the block styles panel, so that the .editor-styles-wrapper cursor style does not override it.

See https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/block-styles/style.scss#L11)

(Also I am not able to build the files, please refresh it so that it is up to date with changes to trunk)

Hi,
thanks for your review. However, weighting the CSS rule more doesn't do anything on its own. As long as the element gets the cursor passed directly, the parent style is not passed to the child element (no matter how many CSS classes are placed in front of the element). In my opinion the block-editor-block-preview__container should not set the cursor to "text" anymore, because the component occurs as you said in several places and therefore the styles from the parent element are overwritten everywhere. So you have to override the cursor everytime, when you are using this component + you want to change the cursor to something other than text.

So if we want to specify the whole thing a bit more, I would have to override this cursor: text; rule (just for the block styles). Are you ok with that? if so, I would do that right now.

I will rebase my branch and add the newest commits of the trunk to it.

[carolinan]

I am not sure we understood each other. My suggestion is to only change the cursor for this component:
/components/block-styles/style.scss and not at .editor-styles-wrapper.

[devfle]

I am not sure we understood each other. My suggestion is to only change the cursor for this component:
/components/block-styles/style.scss and not at .editor-styles-wrapper.

I got that. I just thought it made sense to set the value to inherit in all places and have it be inherited by its parent elements.

Thanks for your suggestion. I have adjusted the whole thing now. However, as I mentioned earlier, I had to define a new rule. We don't get this line: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/block-styles/style.scss#L11
to override the cursor: text from .editor-styles-wrapper.

[jasmussen]

Thanks for the PR! I wasn't able to spin up the PR, and can't add a ton of value over what Carolina already shared. But I'd ask you also test the Patterns tab:

It uses this CSS which I fear might regress if we land this PR as is:

[devfle]

Thanks for the PR! I wasn't able to spin up the PR, and can't add a ton of value over what Carolina already shared. But I'd ask you also test the Patterns tab:

It uses this CSS which I fear might regress if we land this PR as is:

Hi! I will test the Patterns tab. :)

[devfle]

@jasmussen I checked it again. Nothing is overwritten by my fix. Neither for the Block Patterns, Reusable Blocks and the normal blocks. I have also implemented Carolina's recommendation (see last commit) so that it only applies to the Block Styles. So it should be safe.

Title:

Preview:

[jasmussen]

Awesome! I will let Carolina give the green light when she has a moment. Thanks for the work!

[carolinan]

I have a problem with my local environment where git rejects the checkout of this PR, I will need someone else to do a final test and merge.

[jasmussen]

Very nice, thanks for your work. This is before:

This is after:

Feedback has been addressed.

[devfle]

I have rebased the branch and now are all Checks green. Can we merge this :) ?

[jasmussen]

Thank you!