Changeset 43909 for branches/5.0/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss

Timestamp:

11/19/2018 09:26:02 PM (6 years ago)

Author:

allancole

Message:

Updating Twenty Nineteen, our new default theme for 2019, set for 5.0.

This update changes the following:

• Fix JS errors in customizer caused by menu scripts
• Fix footer menu spacing
• Fix pullquote block borders to follow Gutenberg’s described style
• Fix editor-only styles so they don't appear on the frontend when not needed
• Fix search field widget width on mobile
• Fix :visited .button link colors
• Fix Block toolbar position in the editor
• Fix off-canvas mobile menu to prevent text from overflowing
• Improve column block formatting for the editor and frontend
• Improve CSS optimization for selectors that add dashes to multi-level lists
• Improve editor font sizes to use pixels over ems
• Improve styles for galleries in the Classic Editor block
• Improve priority+ more-menu threshold to allow more space for menu-items
• Improve logo size on mobile devices
• Improve customizer color options to present a single, unified color option
• Improve print stylesheet for better spacing and colors
• Add more color options to Gutenberg editor

Initial development occurred on GitHub. See: ​https://github.com/WordPress/twentynineteen

Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, jorbin, netweb, b-07, khleomix, audrasjb, nielslange, mmaumio, richsalvucci, littlebigthing, dimadin, joyously, anevins, peterwilsoncc, dannycooper, iCaleb, siriokun, technosiren, travel_girl, azchughtai, ianbelanger, nadim1992, ismailelkorchi, nativeinside, chetan200891, grapplerulrich, ocean90, joshfeck, frankew, AbdulWahab610, mendezcode, eliorivero, melchoyce, joen, laurelfulford, mdawaffe, kraftbj, dsmart, nao, mayukojpn, enodekciw, ketuchetan, atanasangelovdev, poena, sharaz, artisticasad, mukesh27, burhandodhy, crunnells, aprakasa, themeroots, imonly_ik, tlxo, youthkee, brentswisher, smyoon315, mrahmadawais, desideveloper, Kau-Boy, mor10, mikeyarce, dingo_bastard

File:

• branches/5.0/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss (modified) (13 diffs)

branches/5.0/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss

@@ -61 +61 @@
             margin-right: calc(2 * #{$size__spacing-unit});
         }
-
-        @include media(desktop) {
-            max-width: calc(3 * (100vw / 12));
-        }
     }
 
@@ -164 +160 @@
             @include button-transition;
             border: none;
-            background: $color__background-button;
             font-size: $font__size-sm;
             font-family: $font__heading;
@@ -173 +168 @@
             padding: ($size__spacing-unit * .76) $size__spacing-unit;
             outline: none;
-            color: white;
             outline: none;
 
+            &:not(.has-background) {
+                background-color: $color__background-button;
+            }
+
+            &:not(.has-text-color) {
+                color: white;
+            }
+
             &:hover {
+                color: white;
                 background: $color__background-button-hover;
                 cursor: pointer;
@@ -182 +185 @@
 
             &:focus {
+                color: white;
                 background: $color__background-button-hover;
                 outline: thin dotted;
@@ -195 +199 @@
         &.is-style-outline .wp-block-button__link:focus,
         &.is-style-outline .wp-block-button__link:active {
-
-            @include button-all-transition;
-            background: transparent;
-            border: 2px solid currentColor;
-            color: $color__background-button;
+            @include button-all-transition; 
+            border-width: 2px;
+            border-style: solid;        
+
+            &:not(.has-background) {
+                background: transparent;
+            }
+
+            &:not(.has-text-color) {
+                color: $color__background-button;
+                border-color: currentColor;
+            }
         }
 
         &.is-style-outline .wp-block-button__link:hover {
-            color: $color__background-button-hover;
+            color: white;
+            border-color: $color__background-button-hover;
         }
     }
@@ -295 +307 @@
     //! Pullquote
     .wp-block-pullquote {
-        border: none;
+        border-color: transparent;
+        border-width: 2px;
         padding: $size__spacing-unit;
 
@@ -384 +397 @@
                 margin-left: $size__spacing-unit;
 
+                &.has-text-color p,
+                &.has-primary-color,
+                &.has-secondary-color,
+                &.has-dark-gray-color,
+                &.has-light-gray-color,
+                &.has-white-color {
+                    color: inherit;
+                }
+
                 @include media(tablet) {
                     margin-left: 0;
                     margin-right: 0;
                 }
-            }
-
-            .has-primary-background-color {
-                background-color: $color__link;
             }
 
@@ -502 +520 @@
             padding: 0;
             color: #fff;
+            -ms-hyphens: auto;
+            -moz-hyphens: auto;
+            -webkit-hyphens: auto;
+            hyphens: auto;
 
             @include media(tablet) {
@@ -509 +531 @@
         }
 
-        &.aligncenter {
-            h2,
-            .wp-block-cover-image-text,
-            .wp-block-cover-text {
-                width: 100%;
-                z-index: 1;
-                left: 50%;
-                position: absolute;
-                transform: translate(-50%, -50%);
-                top: 50%;
-            }
-        }
-
         &.alignleft,
         &.alignright {
             width: 100%;
+
+            @include media(tablet) {
+                padding: $size__spacing-unit;
+            }
         }
 
@@ -682 +695 @@
     .wp-block-columns {
 
+        &.alignfull {
+            padding-left: $size__spacing-unit;
+            padding-right: $size__spacing-unit;
+        }
+
         @include media(tablet) {
             .wp-block-column > * {
@@ -700 +718 @@
                     margin-right: 0;
                 }
+            }
+
+            &.alignfull,
+            &.alignfull .wp-block-column {
+                padding-left: calc(2 * #{$size__spacing-unit});
+                padding-right: calc(2 * #{$size__spacing-unit});
             }
         }
@@ -738 +762 @@
     }
 
-    //! Custom colors
-    .has-primary-background-color {
-        background-color: $color__link;
+    //! Font Sizes
+    .has-small-font-size {
+        font-size: $font__size-sm;
+    }
+
+    .has-normal-font-size {
+        font-size: $font__size-md;
+    }
+
+    .has-large-font-size {
+        font-size: $font__size-lg;
+    }
+
+    .has-huge-font-size {
+        font-size: $font__size-xl;
+    }
+
+    //! Custom background colors
+    .has-primary-background-color,
+    .has-secondary-background-color,
+    .has-dark-gray-background-color,
+    .has-light-gray-background-color {
+        
+        // Use white text against these backgrounds by default.
+        color: $color__background-body;
 
         p,
@@ -753 +799 @@
         }
     }
+
+    .has-white-background-color {
+        color: $color__text-main;
+
+        // Use dark gray text against this background by default.
+        p,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        a {
+            color: $color__text-main;
+        }
+    }
+
+    .has-primary-background-color,
+    .wp-block-pullquote.is-style-solid-color.has-primary-background-color {
+        background-color: $color__link;
+    }
+
+    .has-secondary-background-color,
+    .wp-block-pullquote.is-style-solid-color.has-secondary-background-color {
+        background-color: $color__border-link-hover;
+    }
+
+    .has-dark-gray-background-color,
+    .wp-block-pullquote.is-style-solid-color.has-dark-gray-background-color {
+        background-color: $color__text-main;
+    }
+
+    .has-light-gray-background-color,
+    .wp-block-pullquote.is-style-solid-color.has-light-gray-background-color {
+        background-color: $color__text-light;
+    }
+
+    .has-white-background-color,
+    .wp-block-pullquote.is-style-solid-color.has-white-background-color {
+        background-color: #FFF;
+    }
+
+    //! Custom foreground colors
+    .has-primary-color,
+    .wp-block-pullquote.is-style-solid-color blockquote.has-primary-color,
+    .wp-block-pullquote.is-style-solid-color blockquote.has-primary-color p {
+        color: $color__link;
+    }
+
+    .has-secondary-color,
+    .wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color,
+    .wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color p {
+        color: $color__border-link-hover;
+    }
+
+    .has-dark-gray-color,
+    .wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color,
+    .wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color p {
+        color: $color__text-main;
+    }
+
+    .has-light-gray-color,
+    .wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color,
+    .wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color p {
+        color: $color__text-light;
+    }
+
+    .has-white-color,
+    .wp-block-pullquote.is-style-solid-color blockquote.has-white-color {
+        color: #FFF;
+    }
 }