Changeset 43860 for branches/5.0/src/wp-content/themes/twentynineteen/style-editor.scss

Timestamp:

11/02/2018 11:52:16 PM (7 years ago)

Author:

allancole

Message:

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

Let Gutenberg shine with this simple, fast, and powerful theme. Initial development occurred on GitHub. See: ​https://github.com/WordPress/twentynineteen

Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, aaronjorbin, netweb, b-07, khleomix, blowery, dereksmart, jasmussen, audrasjb, nielslange, mmaumio, dimadin, joyously, anevins12, peterwilsoncc, dannycooper, icaleb, siriokun, technosiren, travel_girl, azchughtai, ianbelanger, nadim1992, ismailelkorchi, nativeinside, chetan200891, icaleb, grapplerulrich, ocean90, joshfeck, frankew, abdulwahab610, mendezcode, eliorivero, melchoyce, joen, laurelfulford, mdawaffe, kraftbj, dsmart, mukeshpanchal27, burhandodhy, crunnells, Ismail-elkorchi, aryaprakasa.

File:

• branches/5.0/src/wp-content/themes/twentynineteen/style-editor.scss (modified) (13 diffs)

branches/5.0/src/wp-content/themes/twentynineteen/style-editor.scss

@@ -1 +1 @@
 /*!
 Twenty Nineteen Editor Styles
-
-NOTE: Styling alignment styles require use of [data-align] selectors.
-This is not ideal, but it works. Styles using those selectors should be refactored
-when Gutenberg supports styling those variations more intuitively.
 */
 
@@ -13 +9 @@
 @import "sass/mixins/mixins-master";
 
+/** === Editor Frame === */
+
+body {
+
+    // Non-standard media query necessary to override a Gutenberg breakpoint style. 
+    @media screen and (min-width: 600px) {
+        .wp-block[data-align="full"] {
+            width: calc( 100% + 90px );
+            max-width: calc( 100% + 90px );
+        }
+    }
+
+    @include media(tablet) {
+        overflow-x: hidden;
+
+        .editor-writing-flow {
+            max-width: 80%;
+            margin: 0 10%;
+        }
+
+        .editor-post-title__block,
+        .editor-default-block-appender,
+        .editor-block-list__block {
+            margin-left: 0;
+            margin-right: 0;
+        }
+
+        .wp-block[data-align="wide"] {
+            width: 100%;
+        }
+
+        .wp-block[data-align="full"] {
+            position: relative;
+            left: calc( -12.5% - 14px );
+            width: calc( 125% + 116px );
+            max-width: calc( 125% + 116px );
+        }
+
+        .wp-block[data-align="right"] {
+            max-width: 125%;
+        }
+    }
+}
+
 /** === Content Width === */
 
 .wp-block {
     width: calc(100vw - (2 * #{$size__spacing-unit}));
+    max-width: 100%;
 
     @include media(tablet) {
@@ -24 +65 @@
     @include media(desktop) {
         width: calc(6 * (100vw / 12 ));
+    }
+
+    .wp-block {
+        width: 100%;
     }
 }
@@ -126 +171 @@
 }
 
+/** === Post Title === */
+
+.editor-post-title__block {
+    @include post-section-dash;
+
+    &:before {
+        width: $font__size-xxl;
+        margin-top: 0;
+        margin-bottom: 0;
+        margin-left: 1em;
+        position: relative;
+        top: 0.5em;
+    }
+
+    .editor-post-title__input {
+        font-family: $font__heading;
+        font-size: $font__size-xxl;
+    }
+}
+
+/** === Default Appender === */
+
+.editor-default-block-appender input[type="text"].editor-default-block-appender__content {
+    font-family: $font__body;
+    font-size: $font__size_base;
+}
+
 /** === Paragraph === */
 
@@ -152 +224 @@
 
     &.has-left-content {
-        justify-content: center;
 
         h2,
@@ -161 +232 @@
 
     &.has-right-content {
-        justify-content: center;
 
         h2,
@@ -170 +240 @@
 }
 
-body[data-type="core/cover"][data-align="left"],
-body[data-type="core/cover"][data-align="right"] {
+.wp-block[data-type="core/cover"][data-align="left"],
+.wp-block[data-type="core/cover"][data-align="right"] {
 
     h2,
@@ -180 +250 @@
 }
 
-body[data-type="core/cover"][data-align="wide"],
-body[data-type="core/cover"][data-align="full"] {
+.wp-block[data-type="core/cover"][data-align="wide"],
+.wp-block[data-type="core/cover"][data-align="full"] {
 
     @include media(desktop) {
@@ -308 +378 @@
 }
 
-body[data-type="core/pullquote"],
-body[data-type="core/pullquote"][data-align="left"],
-body[data-type="core/pullquote"][data-align="right"] {
+.wp-block[data-type="core/pullquote"],
+.wp-block[data-type="core/pullquote"][data-align="left"],
+.wp-block[data-type="core/pullquote"][data-align="right"] {
 
     blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
@@ -338 +408 @@
 }
 
-body[data-type="core/pullquote"][data-align="left"],
-body[data-type="core/pullquote"][data-align="right"] {
+.wp-block[data-type="core/pullquote"][data-align="left"],
+.wp-block[data-type="core/pullquote"][data-align="right"] {
 
     .editor-block-list__block-edit {
@@ -413 +483 @@
         color: $color__text-light;
         font-size: $font__size-lg;
-        letter-spacing: $font__size-sm;
+        letter-spacing: calc(2 * #{$size__spacing-unit});
+        padding-left: calc(2 * #{$size__spacing-unit});
     }
 }
@@ -432 +503 @@
     li {
         font-family: $font__heading;
-        font-size: $font__size-lg;
+        font-size: calc(#{$font__size_base} * #{$font__size-ratio});
         font-weight: bold;
         line-height: $font__line-height-heading;
@@ -499 +570 @@
 .wp-caption {
     dd {
+        color: $color__text-light;
+        font-size: $font__size-xs;
+        font-family: $font__heading;
+        line-height: $font__line-height-pre;
+        margin: 0;
+        padding: ( $size__spacing-unit * .5 );
+        text-align: left;
         text-align: center;
         -webkit-margin-start: 0px;