[wp-trac] [WordPress Trac] #56173: Twenty Twenty-One: Separator block is having issue in editor site with background color for default and thick style.

[WordPress Trac]

#56173: Twenty Twenty-One: Separator block is having issue in editor site with
background color for default and thick style.
-------------------------------------+---------------------
 Reporter:  nidhidhandhukiya         |       Owner:  (none)
     Type:  defect (bug)             |      Status:  new
 Priority:  normal                   |   Milestone:  6.1
Component:  Bundled Theme            |     Version:  6.0
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch needs-testing  |     Focuses:
-------------------------------------+---------------------

Comment (by poena):

 Hi

 Removing {{{var(--separator--border-color); }}} this way will break the
 block for existing sites
 that has added a color to this custom CSS property.

 I agree that selecting a color for the block must replace the CSS custom
 property.
 The property needs to be applied so that the default color shows correctly
 if someone does not select a color.

 When we select a color, the editor adds the {{{.has-text-color}}} CSS
 class to the block.
 -By targeting this class, the CSS property can be removed when the color
 is replaced, and still work when it is needed.

 It looks like the class that the theme used to solve this problem has
 changed. The theme used
 {{{.has-background}}} and now only {{{.has-text-color}}} is used on the
 block.
 What a strange change for a background color option!

 Markup in 5.3:
 {{{
 <hr class="wp-block-separator has-text-color has-alpha-channel-opacity
 has-background is-style-twentytwentyone-separator-thick" style
 ="background-color:#cb0202;color:#cb0202">
 }}}

 Markup in 6.0:
 {{{
 <hr class="block-editor-block-list__block wp-block has-text-color has-
 alpha-channel-opacity is-selected wp-block-separator is-style-
 twentytwentyone-separator-thick" id="block-
 fce4da68-baa3-4ba9-9245-9694975df6be" tabindex="0" role="document" aria-
 label="Block: Separator" data-block="fce4da68-baa3-4ba9-9245-9694975df6be"
 data-type="core/separator" data-title="Separator" style="color: rgb(229,
 0, 103); background-color: rgb(229, 0, 103);">
 }}}


 Please see line 42, {{{.has-text-color}}} should be added to this list:
 https://core.trac.wordpress.org/browser/trunk/src/wp-
 content/themes/twentytwentyone/assets/sass/05-blocks/separator/_editor.scss#L42

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/56173#comment:8>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform