Block Switcher: Add 'Transform into:' to top of the list #2846
Conversation
- Add padding - Add color - Rephrase to remove the s
|
Nice! Thank you for working on this. I took the liberty of pushing a little fix to the visual styles:
What do you think? If you're cool with the changes then 👍 👍 from me. |
editor/block-switcher/index.js
Outdated
| @@ -90,6 +90,7 @@ class BlockSwitcher extends Component { | |||
| tabIndex="0" | |||
| aria-label={ __( 'Block types' ) } | |||
| > | |||
| <span>{ __( 'Transform into:' ) }</span> | |||
There was a problem hiding this comment.
Should we use a classname to avoid targeting elements in styling? something like editor-block-switcher__menu-title
editor/block-switcher/style.scss
Outdated
| @@ -34,6 +34,12 @@ | |||
| input { | |||
There was a problem hiding this comment.
Unrelated but this style is probably useless, I can't see any input inside the block switcher menu
|
Thanks for reviewing and improving. |
I personally feel like for this particular help text it's okay that it's lower than usual. However I also would never object to increasing the contrast. You can see the color variables here: https://github.com/WordPress/gutenberg/blob/master/editor/assets/stylesheets/_variables.scss and use this contrast checker: https://www.joedolson.com/tools/color-contrast.php In my test it seems like If you address Riads feedback, I think this PR is good to merge 👍 👍 Thanks again! |
|
Thanks for your help! |
Codecov Report
@@ Coverage Diff @@
## master #2846 +/- ##
=========================================
+ Coverage 33.74% 33.9% +0.15%
=========================================
Files 191 191
Lines 5695 5699 +4
Branches 997 999 +2
=========================================
+ Hits 1922 1932 +10
+ Misses 3192 3187 -5
+ Partials 581 580 -1
Continue to review full report at Codecov.
|
Description
Adds the text "Transform into" wrapped in span tags to the top of the list in the Block Switcher.
Related issue: #493
How Has This Been Tested?
Visually on my local machine.
Screenshots (jpeg or gifs if applicable):
Before: https://cloudup.com/cPWwpVWU7b5
After: https://cloudup.com/cOKNmDJeu_8
Types of changes
It's labelled as an enhancement.
Checklist: