[wp-trac] [WordPress Trac] #60614: Twenty Twenty-Two: The button block border does not appear on the editor side.

[WordPress Trac]

#60614: Twenty Twenty-Two: The button block border does not appear on the editor
side.
---------------------------+----------------------
 Reporter:  viralsampat    |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  6.5
Component:  Bundled Theme  |     Version:  trunk
 Severity:  normal         |  Resolution:
 Keywords:  dev-feedback   |     Focuses:  ui, css
---------------------------+----------------------

Comment (by poena):

 == In 6.5 RC2, with the custom fields panel off, this is the order of the
 CSS:


 {{{
 element.style {
         white-space: pre-wrap;
         min-width: 1px;
 }
 }}}

 block-library/style.css
 {{{
 .wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-
 background),
 .wp-block-button:where(.is-style-outline)>.wp-block-button__link:not(.has-
 background) {
         background-color: initial;
         background-image: none;
 }
 }}}

 block-library/style.css
 {{{
 .wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-
 text-color), .wp-block-button:where(.is-style-outline)>.wp-block-
 button__link:not(.has-text-color) {
         color: currentColor;
 }
 }}}


 <style>

 {{{
 .wp-block-button .wp-block-button__link {
         **THIS LINE IS OVERWRITTEN** background-color: var(--wp--preset--
 color--primary);
         border-radius: 0;
         **THIS LINE IS OVERWRITTEN** color: var(--wp--preset--color--
 background);
         font-size: var(--wp--preset--font-size--medium);
 }

 }}}


 == In 6.5 RC2, with the custom fields panel present, this is the order of
 the CSS:


 {{{
 element.style {
         white-space: pre-wrap;
         min-width: 1px;
 }
 }}}


 <style>
 {{{
 .editor-styles-wrapper .wp-block-button .wp-block-button__link {
         background-color: var(--wp--preset--color--primary);
         border-radius: 0;
         color: var(--wp--preset--color--background);
         font-size: var(--wp--preset--font-size--medium);
 }
 }}}

 block-library/style.css

 {{{
 .wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-
 background),
 .wp-block-button:where(.is-style-outline)>.wp-block-button__link:not(.has-
 background) {
         **THIS LINE IS OVERWRITTEN** background-color: initial;
         background-image: none;
 }
 }}}

 block-library/style.css
 {{{
 .wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-
 text-color), .wp-block-button:where(.is-style-outline)>.wp-block-
 button__link:not(.has-text-color) {
         **THIS LINE IS OVERWRITTEN**color: currentColor;
 }
 }}}

 <style>
 {{{
 .editor-styles-wrapper .wp-element-button,
 .editor-styles-wrapper .wp-block-button__link {
         **THIS LINE IS OVERWRITTEN** background-color: #32373c;
         border-width: 0;
         **THIS LINE IS OVERWRITTEN** color: #fff;
         font-family: inherit;
         **THIS LINE IS OVERWRITTEN** font-size: inherit;
         line-height: inherit;
         padding: calc(0.667em + 2px) calc(1.333em + 2px);
         text-decoration: none;
 }
 }}}

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