<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[47327] trunk/src/wp-content/themes/twentynineteen: Bundled Themes: Twenty Nineteen Update margins in editor styles to address upcoming block editor margin changes.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/47327">47327</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/47327","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>ianbelanger</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2020-02-20 16:38:38 +0000 (Thu, 20 Feb 2020)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Bundled Themes: Twenty Nineteen Update margins in editor styles to address upcoming block editor margin changes.
Fixes the margins in the block editor to address recent changes in block margins.
Props Joen, SergeyBiryukov, kjellr, jffng, allancole.
Fixes <a href="https://core.trac.wordpress.org/ticket/48526">#48526</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpcontentthemestwentynineteenstyleeditorcss">trunk/src/wp-content/themes/twentynineteen/style-editor.css</a></li>
<li><a href="#trunksrcwpcontentthemestwentynineteenstyleeditorscss">trunk/src/wp-content/themes/twentynineteen/style-editor.scss</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpcontentthemestwentynineteenstyleeditorcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentynineteen/style-editor.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentynineteen/style-editor.css 2020-02-20 00:53:43 UTC (rev 47326)
+++ trunk/src/wp-content/themes/twentynineteen/style-editor.css 2020-02-20 16:38:38 UTC (rev 47327)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -551,13 +551,14 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /** === Editor Frame === */
</span><span class="cx" style="display: block; padding: 0 10px"> body .wp-block[data-align="full"] {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- width: 100%;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ width: calc(100% + 28px);
+ max-width: calc(100% + 28px);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 600px) {
</span><span class="cx" style="display: block; padding: 0 10px"> body .wp-block[data-align="full"] {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- width: calc( 100% + 90px);
- max-width: calc( 100% + 90px);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ width: calc( 100% + 116px);
+ max-width: calc( 100% + 115px);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -566,7 +567,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 80%;
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0 10%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- body .editor-post-title__block,
</del><span class="cx" style="display: block; padding: 0 10px"> body .editor-default-block-appender,
</span><span class="cx" style="display: block; padding: 0 10px"> body .editor-block-list__block {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -575,12 +575,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> body .wp-block[data-align="wide"] {
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- body .wp-block[data-align="full"] {
- position: relative;
- left: calc( -12.5% - 14px);
- width: calc( 125% + 116px);
- max-width: calc( 125% + 115px);
- }
</del><span class="cx" style="display: block; padding: 0 10px"> body .wp-block[data-align="right"] {
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 125%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -588,7 +582,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /** === Content Width === */
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- width: calc(100vw - (2 * 1rem));
</del><span class="cx" style="display: block; padding: 0 10px"> max-width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -779,11 +772,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> width: 2.8125em;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-left: 1em;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-left: 1rem;
</ins><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="cx" style="display: block; padding: 0 10px"> top: 0.5em;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@media only screen and (min-width: 600px) {
+ .editor-post-title__block:before {
+ margin-left: 0;
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .editor-post-title__block .editor-post-title__input {
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 2.8125em;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -791,7 +790,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /** === Default Appender === */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.editor-default-block-appender .editor-default-block-appender__content {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.block-editor-default-block-appender textarea.block-editor-default-block-appender__content {
</ins><span class="cx" style="display: block; padding: 0 10px"> font-family: "NonBreakingSpaceOverride", "Hoefler Text", Garamond, "Times New Roman", serif;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 22px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1314,15 +1313,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /** === Group Block === */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
- left: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block[data-type="core/group"] > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
+ margin-left: 0;
+ margin-right: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group.has-background {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block[data-type="core/group"] > .wp-block-group.has-background {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding: 22px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block[data-type="core/group"] > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-left: -22px;
</span><span class="cx" style="display: block; padding: 0 10px"> width: calc(100% + 44px);
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(100% + 44px);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1329,43 +1329,36 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block[data-type="core/group"][data-align="wide"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
</ins><span class="cx" style="display: block; padding: 0 10px"> width: calc(8 * (100vw / 12));
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 1168px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block[data-type="core/group"][data-align="wide"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
</ins><span class="cx" style="display: block; padding: 0 10px"> width: calc(6 * (100vw / 12 ));
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
+ padding-left: 0;
+ padding-right: 0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block[data-type="core/group"][data-align="wide"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
</ins><span class="cx" style="display: block; padding: 0 10px"> width: calc(8 * (100vw / 12) - 44px);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 1168px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block[data-type="core/group"][data-align="wide"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
</ins><span class="cx" style="display: block; padding: 0 10px"> width: calc(6 * (100vw / 12 ) - 44px);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 600px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block[data-type="core/group"][data-align="full"] {
- max-width: calc(100% + 89px);
- }
-}
-
-@media only screen and (min-width: 768px) {
- .wp-block[data-type="core/group"][data-align="full"] {
- max-width: calc(125% + 114px);
- }
-}
-
-@media only screen and (min-width: 600px) {
- .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding-left: 46px;
</span><span class="cx" style="display: block; padding: 0 10px"> padding-right: 46px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1372,7 +1365,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout {
</ins><span class="cx" style="display: block; padding: 0 10px"> width: 80%;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 10%;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: 10%;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1381,41 +1374,41 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="full"]) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="full"]) {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(100vw - (2 * 1rem));
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="full"]) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="full"]) {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(8 * (100vw / 12));
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 1168px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="full"]) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="full"]) {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(6 * (100vw / 12));
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="right"] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="right"] {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: 125%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="wide"] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="wide"] {
</ins><span class="cx" style="display: block; padding: 0 10px"> width: calc(100% + 4px);
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(100% + 4px);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align=full] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align=full] {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(100vw + (2 * 1rem));
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 600px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align=full] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align=full] {
</ins><span class="cx" style="display: block; padding: 0 10px"> width: calc(100% + 92px);
</span><span class="cx" style="display: block; padding: 0 10px"> left: -46px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1422,7 +1415,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align=full] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align=full] {
</ins><span class="cx" style="display: block; padding: 0 10px"> left: calc(-12.5% - 58px);
</span><span class="cx" style="display: block; padding: 0 10px"> width: calc(125% + 120px);
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(125% + 119px);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1429,30 +1422,30 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding: 22px 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 600px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding-left: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> padding-right: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 600px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
</ins><span class="cx" style="display: block; padding: 0 10px"> width: calc(100% + 92px);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
</ins><span class="cx" style="display: block; padding: 0 10px"> width: calc(125% + 120px);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentynineteenstyleeditorscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentynineteen/style-editor.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentynineteen/style-editor.scss 2020-02-20 00:53:43 UTC (rev 47326)
+++ trunk/src/wp-content/themes/twentynineteen/style-editor.scss 2020-02-20 16:38:38 UTC (rev 47327)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12,14 +12,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> body {
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block[data-align="full"] {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- width: 100%;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ width: calc(100% + 28px);
+ max-width: calc(100% + 28px);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @include media(mobile) {
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block[data-align="full"] {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- width: calc( 100% + 90px );
- max-width: calc( 100% + 90px );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ width: calc( 100% + 116px );
+ max-width: calc( 100% + 115px );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -30,7 +31,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0 10%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .editor-post-title__block,
</del><span class="cx" style="display: block; padding: 0 10px"> .editor-default-block-appender,
</span><span class="cx" style="display: block; padding: 0 10px"> .editor-block-list__block {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -41,13 +41,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block[data-align="full"] {
- position: relative;
- left: calc( -12.5% - 14px );
- width: calc( 125% + 116px );
- max-width: calc( 125% + 115px ); // Subtract 1px here to avoid the rounding errors that happen due to the usage of percentages.
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block[data-align="right"] {
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 125%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -57,7 +50,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /** === Content Width === */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- width: calc(100vw - (2 * #{$size__spacing-unit}));
</del><span class="cx" style="display: block; padding: 0 10px"> max-width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @include media(tablet) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -204,9 +196,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> width: $font__size-xxl;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-left: 1em;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-left: 1rem;
</ins><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="cx" style="display: block; padding: 0 10px"> top: 0.5em;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ @include media(mobile) {
+ margin-left: 0;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .editor-post-title__input {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -218,7 +214,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /** === Default Appender === */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.editor-default-block-appender .editor-default-block-appender__content {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.block-editor-default-block-appender textarea.block-editor-default-block-appender__content {
</ins><span class="cx" style="display: block; padding: 0 10px"> @include font-family( $font__body );
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: $font__size_base;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -780,20 +776,21 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block[data-type="core/group"] {
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Group block base styles
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- > .editor-block-list__block-edit > div > .wp-block-group {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ > .wp-block-group {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Child: Full alignment
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
- left: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
+ margin-left: 0;
+ margin-right: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Group block with background color
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- > .editor-block-list__block-edit > div > .wp-block-group.has-background {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ > .wp-block-group.has-background {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding: $group-block-background__padding;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Child: Full alignment
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-left: -$group-block-background__padding;
</span><span class="cx" style="display: block; padding: 0 10px"> width: calc(100% + #{$group-block-background__padding * 2});
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(100% + #{$group-block-background__padding * 2});
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -801,13 +798,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Wide and full alignments
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- &[data-align="wide"] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ &[data-align="wide"] > .is-block-content {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Group block base styles.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- > .editor-block-list__block-edit > div > .wp-block-group {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ > .wp-block-group {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Child blocks: Default alignments
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
</ins><span class="cx" style="display: block; padding: 0 10px"> @include media(tablet) {
</span><span class="cx" style="display: block; padding: 0 10px"> width: calc(8 * (100vw / 12));
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -816,13 +813,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> width: calc(6 * (100vw / 12 ));
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Child blocks: Full alignment
+ > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
+ padding-left: 0;
+ padding-right: 0;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Group block with background color
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- > .editor-block-list__block-edit > div > .wp-block-group.has-background {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ > .wp-block-group.has-background {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Child blocks: Default alignments
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
</ins><span class="cx" style="display: block; padding: 0 10px"> @include media(tablet) {
</span><span class="cx" style="display: block; padding: 0 10px"> width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2});
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -837,22 +840,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // Full alignment
</span><span class="cx" style="display: block; padding: 0 10px"> &[data-align="full"] {
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Max-width needs to be a pixel narrower than usual to prevent horizontal scrolling.
- @include media(mobile) {
- max-width: calc(100% + 89px);
- }
- @include media(tablet) {
- max-width: calc(125% + 114px);
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> // Group block base styles
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- > .editor-block-list__block-edit > div > .wp-block-group {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ > .is-block-content > .wp-block-group {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Margins & padding are added to this container to mimic
</span><span class="cx" style="display: block; padding: 0 10px"> // the style + spacing of the .editor-writing-flow global
</span><span class="cx" style="display: block; padding: 0 10px"> // container. This way, child items sync up with the placement
</span><span class="cx" style="display: block; padding: 0 10px"> // and size of other top-level blocks.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @include media(mobile) {
</span><span class="cx" style="display: block; padding: 0 10px"> padding-left: 46px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -919,7 +914,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Group block with background color
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- > .editor-block-list__block-edit > div > .wp-block-group.has-background {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ > .is-block-content > .wp-block-group.has-background {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // When the Group block is full width, we can remove the left/right padding
</span><span class="cx" style="display: block; padding: 0 10px"> // and let this inherit the
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -931,7 +926,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Child blocks: Full alignment
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre>
</div>
</div>
</body>
</html>