Separator: Fix block CSS classes in the editor #42769
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +87 B (0%) Total Size: 1.26 MB
ℹ️ View Unchanged
|
carolinan
commented
Jul 28, 2022
| @@ -37,7 +37,7 @@ export default function SeparatorEdit( { attributes, setAttributes } ) { | |||
| 'has-css-opacity': opacity === 'css', | |||
| 'has-alpha-channel-opacity': opacity === 'alpha-channel', | |||
| }, | |||
| colorProps.classname | |||
| colorProps.className | |||
There was a problem hiding this comment.
@glendaviesnz am I onto something here, that this was only a small typo, or am I missing something intentional?
There was a problem hiding this comment.
Definitely a typo, thanks for sorting, tested well for me and this brings it back into line with the save.js method.
glendaviesnz
approved these changes
Jul 28, 2022
| @@ -37,7 +37,7 @@ export default function SeparatorEdit( { attributes, setAttributes } ) { | |||
| 'has-css-opacity': opacity === 'css', | |||
| 'has-alpha-channel-opacity': opacity === 'alpha-channel', | |||
| }, | |||
| colorProps.classname | |||
| colorProps.className | |||
There was a problem hiding this comment.
Definitely a typo, thanks for sorting, tested well for me and this brings it back into line with the save.js method.
|
I pushed a fix for the failing unit tests |
Thank you. I will continue to test to see if there are block validation issues. |
carolinan
added
[Type] Bug
|
Not seeing any block validation errors for the class changes. |
Soean
approved these changes
Jul 29, 2022
|
Thank you very much for a fix. I've just noticed the color inconsistency (WordPress 6.0.1) between the editor and front end when using a color from color options (for example, vivid red). Then I noticed that the editor adds only Looking forward for this fix be included in a core :) |
oandregal
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Partial for #41194
Fixes a typo (?) in the
SeparatorEditfunction whereclassnamewas used instead ofclassName.The problem lead to missing CSS class names, which meant that the separator block did not show the correct colors in the editor.
Why?
The separator block did not show the correct colors in the editor.
How?
Fixes the typo so that the correct classes are output for the block, depending on the selected color.
Before:
block-editor-block-list__block wp-block has-alpha-channel-opacity is-selected wp-block-separatorAfter:
block-editor-block-list__block wp-block has-alpha-channel-opacity has-purple-to-red-gradient-background has-background wp-block-separatorTesting Instructions
Please test with your chosen theme, classic or FSE, which has support for gradients, and with Twenty Twenty-One.
Each variation should have one each of the color options: a color from the palette, a custom color using the color picker, and a gradient.
Screenshots or screencast
Before, the selected color was not visible.
After: It is still difficult to see the color when the block is selected, but it is used:
