[wp-trac] [WordPress Trac] #60885: Twenty Nineteen: Button block size is not changing when we trying to change using block setting.

[WordPress Trac]

#60885: Twenty Nineteen: Button block size is not changing when we trying to change
using block setting.
---------------------------+--------------------------------------
 Reporter:  viralsampat    |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Bundled Theme  |     Version:
 Severity:  normal         |  Resolution:
 Keywords:  dev-feedback   |     Focuses:  ui, css, administration
---------------------------+--------------------------------------

Comment (by poena):

 Thank you for the report.

 I can reproduce this on 6.6 alpha, 6.5.0, and 6.4.3. Theme version: 2.8.
 No plugins active.
 I can only reproduce it when the custom fields UI is enabled/opened, so
 when the editor is not iframed.

 The 100% width button shows correctly in the editor and front, but the 25,
 50 and 75 are using the wrong width in the block editor.


 The CSS for the button widths is overwritten.
 I am using the 75% wide button in the example:

 {{{
 .editor-styles-wrapper .wp-block .wp-block {
     width: initial;
 }

 .wp-block-buttons>.wp-block-button.wp-block-button__width-75 {
     width: calc(75% - var(--wp--style--block-gap, .5em)* .25);
 }
 }}}

 [https://core.trac.wordpress.org/browser/branches/6.5/src/wp-
 content/themes/twentynineteen/style-editor.scss#L78 From the themes
 editor.scss file:]

 {{{

 /** === Content Width === */

 .wp-block {
         max-width: 100%;

         @include media(tablet) {
                 width: calc(8 * (100vw / 12));
         }

         @include media(desktop) {
                 width: calc(6 * (100vw / 12 ));
         }

         // Only the top level blocks need specific widths, therefore
 override for every nested block.
         .wp-block {
                 width: initial;
         }
 }
 }}}

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