diff --git a/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css b/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css index 4a6768f83b..847ef0b8eb 100644 --- a/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css +++ b/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css @@ -78,11 +78,6 @@ Inter variable font. Usage: max-width: 610px; } -.wp-block[data-align="wide"] .wp-block, -.wp-block[data-align="full"] .wp-block { - max-width: none; -} - .wp-block[data-align="wide"] .wp-block[data-align="wide"], .wp-block[data-align="full"] .wp-block[data-align="wide"] { max-width: 1200px; @@ -106,14 +101,10 @@ Inter variable font. Usage: } .wp-block[data-align="wide"] { - margin-bottom: 30px; - margin-top: 30px; max-width: 1200px; } .wp-block[data-align="full"] { - margin-bottom: 50px; - margin-top: 50px; max-width: none; } @@ -179,6 +170,30 @@ Inter variable font. Usage: background-color: #cd2653; } +.has-secondary-color { + color: #6d6d6d; +} + +.has-secondary-background-color { + background-color: #6d6d6d; +} + +.has-subtle-background-color { + color: #dcd7ca; +} + +.has-subtle-background-background-color { + background-color: #dcd7ca; +} + +.has-background-color { + color: #6d6d6d; +} + +.has-background-background-color { + background-color: #6d6d6d; +} + /* GENERAL COLORS */ .has-black-background-color { @@ -678,15 +693,29 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block-cover-image .wp-block-cover__inner-container, .editor-styles-wrapper .wp-block-cover .wp-block-cover__inner-container { margin: 0 auto; - max-width: 1200px; width: calc(100% - 40px); } -[data-align="left"] .wp-block-cover, -[data-align="left"] .wp-block-cover-image, -[data-align="right"] .wp-block-cover, -[data-align="right"] .wp-block-cover-image { - max-width: 260px; +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"], +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] { + height: auto; + max-height: none; +} + +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover { + text-align: right; +} + +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover { + text-align: left; +} + +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .block-editor-block-list__block-edit, +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .block-editor-block-list__block-edit { + float: none; + margin-right: 0; + margin-left: 0; + max-width: 100%; } .wp-block-cover-image .wp-block-cover-image-text, @@ -1052,6 +1081,33 @@ hr.wp-block-separator.is-style-dots::before { margin: 0; } + /* BLOCK: COVER */ + + .wp-block[data-type="core/cover"][data-align="left"] [data-block], + .wp-block[data-type="core/cover"][data-align="right"] [data-block] { + margin-top: 0; + } + + .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .block-editor-block-list__block-edit { + float: left; + margin-right: 20px; + max-width: 260px; + } + + .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .block-editor-block-list__block-edit { + float: right; + margin-left: 20px; + max-width: 260px; + } + + .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .wp-block-pullquote::before { + margin-left: 0; + } + + .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .wp-block-pullquote::before { + margin-right: 0; + } + /* BLOCK: PULL QUOTE */ .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"], @@ -1131,12 +1187,6 @@ hr.wp-block-separator.is-style-dots::before { font-size: 21px; } - .wp-block[data-align="wide"], - .wp-block[data-align="full"] { - margin-bottom: 60px; - margin-top: 60px; - } - /* TYPOGRAPHY */ .editor-post-title__block .editor-post-title__input, @@ -1208,10 +1258,17 @@ hr.wp-block-separator.is-style-dots::before { /* BLOCK: GROUP */ - .editor-styles-wrapper .wp-block-group.has-background { + .editor-styles-wrapper .wp-block:not([data-align="wide"]):not([data-align="full"]) div:not([class*="__inner-container"]) .wp-block-group.has-background, + .editor-styles-wrapper .wp-block div[class*="__inner-container"] .wp-block[data-align="wide"] .wp-block-group.has-background, + .editor-styles-wrapper .wp-block div[class*="__inner-container"] .wp-block[data-align="full"] .wp-block-group.has-background { padding: 40px; } + .editor-styles-wrapper .wp-block[data-align="wide"] .wp-block-group.has-background, + .editor-styles-wrapper .wp-block[data-align="full"] .wp-block-group.has-background { + padding: 80px; + } + /* BLOCK: LATEST POSTS */ /* BLOCK: PULLQUOTE */ @@ -1283,27 +1340,12 @@ hr.wp-block-separator.is-style-dots::before { @media ( min-width: 1000px ) { - /* STRUCTURE */ - - .wp-block[data-align="wide"], - .wp-block[data-align="full"] { - margin-bottom: 80px; - margin-top: 80px; - } - /* BLOCK: COLUMNS */ .wp-block-column { font-size: 18px; } - /* BLOCK: GROUP */ - - .wp-block[data-align="wide"] .wp-block-group.has-background, - .wp-block[data-align="full"] .wp-block-group.has-background { - padding: 80px 40px; - } - /* BLOCK: SEPARATOR */ hr.wp-block-separator { @@ -1334,14 +1376,6 @@ hr.wp-block-separator.is-style-dots::before { font-size: 18px; } - /* STRUCTURE */ - - .wp-block[data-align="wide"], - .wp-block[data-align="full"] { - margin-bottom: 80px; - margin-top: 80px; - } - /* BLOCK: PULLQUOTE */ .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] .wp-block-pullquote.is-style-solid-color, diff --git a/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css b/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css index 609f642084..6475267258 100644 --- a/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css +++ b/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css @@ -78,11 +78,6 @@ Inter variable font. Usage: max-width: 610px; } -.wp-block[data-align="wide"] .wp-block, -.wp-block[data-align="full"] .wp-block { - max-width: none; -} - .wp-block[data-align="wide"] .wp-block[data-align="wide"], .wp-block[data-align="full"] .wp-block[data-align="wide"] { max-width: 1200px; @@ -106,14 +101,10 @@ Inter variable font. Usage: } .wp-block[data-align="wide"] { - margin-bottom: 30px; - margin-top: 30px; max-width: 1200px; } .wp-block[data-align="full"] { - margin-bottom: 50px; - margin-top: 50px; max-width: none; } @@ -179,6 +170,30 @@ Inter variable font. Usage: background-color: #cd2653; } +.has-secondary-color { + color: #6d6d6d; +} + +.has-secondary-background-color { + background-color: #6d6d6d; +} + +.has-subtle-background-color { + color: #dcd7ca; +} + +.has-subtle-background-background-color { + background-color: #dcd7ca; +} + +.has-background-color { + color: #6d6d6d; +} + +.has-background-background-color { + background-color: #6d6d6d; +} + /* GENERAL COLORS */ .has-black-background-color { @@ -678,15 +693,29 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block-cover-image .wp-block-cover__inner-container, .editor-styles-wrapper .wp-block-cover .wp-block-cover__inner-container { margin: 0 auto; - max-width: 1200px; width: calc(100% - 40px); } -[data-align="left"] .wp-block-cover, -[data-align="left"] .wp-block-cover-image, -[data-align="right"] .wp-block-cover, -[data-align="right"] .wp-block-cover-image { - max-width: 260px; +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"], +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] { + height: auto; + max-height: none; +} + +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover { + text-align: left; +} + +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover { + text-align: right; +} + +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .block-editor-block-list__block-edit, +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .block-editor-block-list__block-edit { + float: none; + margin-left: 0; + margin-right: 0; + max-width: 100%; } .wp-block-cover-image .wp-block-cover-image-text, @@ -1052,6 +1081,33 @@ hr.wp-block-separator.is-style-dots::before { margin: 0; } + /* BLOCK: COVER */ + + .wp-block[data-type="core/cover"][data-align="left"] [data-block], + .wp-block[data-type="core/cover"][data-align="right"] [data-block] { + margin-top: 0; + } + + .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .block-editor-block-list__block-edit { + float: right; + margin-left: 20px; + max-width: 260px; + } + + .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .block-editor-block-list__block-edit { + float: left; + margin-right: 20px; + max-width: 260px; + } + + .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .wp-block-pullquote::before { + margin-right: 0; + } + + .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .wp-block-pullquote::before { + margin-left: 0; + } + /* BLOCK: PULL QUOTE */ .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"], @@ -1131,12 +1187,6 @@ hr.wp-block-separator.is-style-dots::before { font-size: 21px; } - .wp-block[data-align="wide"], - .wp-block[data-align="full"] { - margin-bottom: 60px; - margin-top: 60px; - } - /* TYPOGRAPHY */ .editor-post-title__block .editor-post-title__input, @@ -1208,10 +1258,17 @@ hr.wp-block-separator.is-style-dots::before { /* BLOCK: GROUP */ - .editor-styles-wrapper .wp-block-group.has-background { + .editor-styles-wrapper .wp-block:not([data-align="wide"]):not([data-align="full"]) div:not([class*="__inner-container"]) .wp-block-group.has-background, + .editor-styles-wrapper .wp-block div[class*="__inner-container"] .wp-block[data-align="wide"] .wp-block-group.has-background, + .editor-styles-wrapper .wp-block div[class*="__inner-container"] .wp-block[data-align="full"] .wp-block-group.has-background { padding: 40px; } + .editor-styles-wrapper .wp-block[data-align="wide"] .wp-block-group.has-background, + .editor-styles-wrapper .wp-block[data-align="full"] .wp-block-group.has-background { + padding: 80px; + } + /* BLOCK: LATEST POSTS */ /* BLOCK: PULLQUOTE */ @@ -1283,27 +1340,12 @@ hr.wp-block-separator.is-style-dots::before { @media ( min-width: 1000px ) { - /* STRUCTURE */ - - .wp-block[data-align="wide"], - .wp-block[data-align="full"] { - margin-bottom: 80px; - margin-top: 80px; - } - /* BLOCK: COLUMNS */ .wp-block-column { font-size: 18px; } - /* BLOCK: GROUP */ - - .wp-block[data-align="wide"] .wp-block-group.has-background, - .wp-block[data-align="full"] .wp-block-group.has-background { - padding: 80px 40px; - } - /* BLOCK: SEPARATOR */ hr.wp-block-separator { @@ -1334,14 +1376,6 @@ hr.wp-block-separator.is-style-dots::before { font-size: 18px; } - /* STRUCTURE */ - - .wp-block[data-align="wide"], - .wp-block[data-align="full"] { - margin-bottom: 80px; - margin-top: 80px; - } - /* BLOCK: PULLQUOTE */ .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] .wp-block-pullquote.is-style-solid-color, diff --git a/src/wp-content/themes/twentytwenty/style-rtl.css b/src/wp-content/themes/twentytwenty/style-rtl.css index a4dc8c9e65..6e521a6523 100644 --- a/src/wp-content/themes/twentytwenty/style-rtl.css +++ b/src/wp-content/themes/twentytwenty/style-rtl.css @@ -2372,6 +2372,10 @@ h2.entry-title { .post-meta-wrapper { margin-top: 2rem; + margin-left: auto; + margin-right: auto; + max-width: 58rem; + width: calc(100% - 4rem); } .post-meta { @@ -2532,6 +2536,10 @@ h2.entry-title { .author-bio { margin-top: 4rem; + margin-left: auto; + margin-right: auto; + max-width: 58rem; + width: calc(100% - 4rem); } .hide-avatars .author-bio { @@ -2772,24 +2780,25 @@ h2.entry-title { margin-bottom: 0; } -.wp-block-archives, -.wp-block-categories, +.wp-block-archives:not(.alignwide):not(.alignfull), +.wp-block-categories:not(.alignwide):not(.alignfull), .wp-block-code, -.wp-block-columns, -.wp-block-cover, -.wp-block-embed, -.wp-block-gallery, -.wp-block-group, -.wp-block-latest-comments, -.wp-block-latest-posts, -.wp-block-media-text, +.wp-block-columns:not(.alignwide):not(.alignfull), +.wp-block-cover:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), +.wp-block-embed:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), +.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), +.wp-block-group:not(.has-background):not(.alignwide):not(.alignfull), +.wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), +.wp-block-latest-comments:not(.aligncenter):not(.alignleft):not(.alignright), +.wp-block-latest-posts:not(.aligncenter):not(.alignleft):not(.alignright), +.wp-block-media-text:not(.alignwide):not(.alignfull), .wp-block-preformatted, -.wp-block-pullquote, +.wp-block-pullquote:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .wp-block-quote, .wp-block-quote.is-large, .wp-block-quote.is-style-large, .wp-block-verse, -.wp-block-video { +.wp-block-video:not(.alignwide):not(.alignfull) { margin-bottom: 3rem; margin-top: 3rem; } @@ -3006,10 +3015,6 @@ h2.entry-title { /* Block: Gallery ---------------------------- */ -ul.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignright):not(.alignleft) { - margin-right: 0; -} - .wp-block-gallery ul { list-style: none; margin: 0 0 -1.6rem 0; @@ -3207,8 +3212,7 @@ hr.wp-block-separator { .wp-block-separator.is-style-wide { max-width: calc(100vw - 4rem); position: relative; - right: calc(50% - 50vw + 2rem); - width: calc(100vw - 4rem); + width: 100%; } /* STYLE: DOTS */ @@ -3274,6 +3278,8 @@ figure.wp-block-table.is-style-stripes { .wp-block-quote.is-style-large { border: none; padding: 0; + margin-right: auto; + margin-left: auto; } .wp-block-quote.is-large p, @@ -3296,9 +3302,8 @@ figure.wp-block-table.is-style-stripes { /* Block: Widget Latest Comments ------------- */ -.entry-content .wp-block-latest-comments, .entry-content .wp-block-latest-comments li { - margin-right: 0; + margin: 2rem 0; } .has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt, @@ -3363,7 +3368,12 @@ figure.wp-block-table.is-style-stripes { .entry-content { line-height: 1.5; - max-width: 58rem; +} + +.entry-content > * { + margin-right: auto; + margin-left: auto; + margin-bottom: 1.25em; } .entry-content > *:first-child { @@ -3390,7 +3400,7 @@ figure.wp-block-table.is-style-stripes { .entry-content h4, .entry-content h5, .entry-content h6 { - margin: 3.5rem 0 2rem; + margin: 3.5rem auto 2rem; } .entry-content ul ul, @@ -3401,7 +3411,7 @@ figure.wp-block-table.is-style-stripes { } .entry-content hr { - margin: 4rem 0; + margin: 4rem auto; } /* Font Families ----------------------------- */ @@ -3433,58 +3443,84 @@ figure.wp-block-table.is-style-stripes { /* Alignment Classes ------------------------- */ +.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) { + max-width: 58rem; + width: calc(100% - 4rem); +} + +[class*="__inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) { + max-width: 58rem; + width: 100%; +} + .alignnone, .aligncenter, .alignleft, -.alignright { - margin: 3rem 0; - max-width: 100%; +.alignright, +.alignwide { + margin-top: 4rem; + margin-left: auto; + margin-bottom: 4rem; + margin-right: auto; } -.aligncenter, -.aligncenter img { +[class*="__inner-container"] > *:not(.alignwide):not(.alignfull) { margin-right: auto; margin-left: auto; } -.alignleft, -.alignright { - max-width: 50%; -} +/* Full */ -.alignleft { - float: left; - margin: 0.3rem 0 2rem 2rem; +.alignfull { + margin-top: 5rem; + margin-left: auto; + margin-bottom: 5rem; + margin-right: auto; + max-width: 100vw; + position: relative; + width: 100%; } -.alignright { - float: right; - margin: 0.3rem 2rem 2rem 0; +[class*="__inner-container"] > .alignfull { + max-width: 100%; } +/* Wide */ + .alignwide { - margin: 4rem auto; max-width: 120rem; + position: relative; + width: calc(100% - 4rem); } -.entry-content > .alignwide { - max-width: calc(100vw - 4rem); - position: relative; - right: calc(50% - 50vw + 2rem); - width: calc(100vw - 4rem); +[class*="__inner-container"] > .alignwide { + width: 100%; } -.alignfull { - margin: 5rem 0; +/* Center */ + +.aligncenter, +.aligncenter img { + margin-right: auto; + margin-left: auto; } -.entry-content > .alignfull { - max-width: 100vw; - position: relative; - right: calc(50% - 50vw); - width: 100vw; +/* Left and right */ + +.alignleft, +.alignright { + max-width: 50%; } +.alignleft { + float: left; + margin: 0.3rem 2rem 2rem 2rem; +} + +.alignright { + float: right; + margin: 0.3rem 2rem 2rem 2rem; +} /* Entry Media ------------------------------- */ @@ -3492,7 +3528,7 @@ figure.wp-block-table.is-style-stripes { .alignfull > .wp-caption-text { margin-right: auto; margin-left: auto; - max-width: 120rem; + max-width: 58rem; width: calc(100% - 4rem); } @@ -4441,16 +4477,40 @@ a.to-the-top > * { .entry-content > .alignleft, .entry-content > p .alignleft, - .entry-content > .wp-block-image .alignleft { + .entry-content > .wp-block-image .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft { margin-left: calc(( 100vw - 58rem - 8rem ) / -2); } + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignleft, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignleft, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignleft { + margin-left: 0; + } + .entry-content > .alignright, .entry-content > p .alignright, - .entry-content > .wp-block-image .alignright { + .entry-content > .wp-block-image .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright { margin-right: calc(( 100vw - 58rem - 8rem ) / -2); } + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignright, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignright, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignright { + margin-right: 0; + } + } @media ( min-width: 700px ) { @@ -4467,7 +4527,7 @@ a.to-the-top > * { } hr { - margin: 8rem 0; + margin: 8rem auto; } table { @@ -4516,7 +4576,7 @@ a.to-the-top > * { .heading-size-2, h3, .heading-size-3 { - margin: 6rem 0 3rem; + margin: 6rem auto 3rem; } h4, @@ -4525,7 +4585,7 @@ a.to-the-top > * { .heading-size-5, h6, .heading-size-6 { - margin: 4.5rem 0 2.5rem; + margin: 4.5rem auto 2.5rem; } h1, @@ -4892,26 +4952,27 @@ a.to-the-top > * { /* BLOCK: BASE MARGINS */ - .wp-block-archives, - .wp-block-categories, + .wp-block-archives:not(.alignwide):not(.alignfull), + .wp-block-categories:not(.alignwide):not(.alignfull), .wp-block-code, - .wp-block-columns, - .wp-block-cover, - .wp-block-embed, - .wp-block-gallery, - .wp-block-group, - .wp-block-latest-comments, - .wp-block-latest-posts, - .wp-block-media-text, + .wp-block-columns:not(.alignwide):not(.alignfull), + .wp-block-cover:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), + .wp-block-embed:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), + .wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), + .wp-block-group:not(.has-background):not(.alignwide):not(.alignfull), + .wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), + .wp-block-latest-comments:not(.aligncenter):not(.alignleft):not(.alignright), + .wp-block-latest-posts:not(.aligncenter):not(.alignleft):not(.alignright), + .wp-block-media-text:not(.alignwide):not(.alignfull), .wp-block-preformatted, - .wp-block-pullquote, + .wp-block-pullquote:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .wp-block-quote, .wp-block-quote.is-large, .wp-block-quote.is-style-large, .wp-block-verse, - .wp-block-video { - margin-bottom: 5rem; - margin-top: 5rem; + .wp-block-video:not(.alignwide):not(.alignfull) { + margin-bottom: 4rem; + margin-top: 4rem; } /* BLOCK: COLUMNS */ @@ -5025,13 +5086,11 @@ a.to-the-top > * { /* BLOCK: SEPARATOR */ hr.wp-block-separator { - margin: 6rem 0; + margin: 6rem auto; } .wp-block-separator.is-style-wide { max-width: calc(100vw - 8rem); - right: calc(50% - 50vw + 4rem); - width: calc(100vw - 8rem); } /* Entry Content ------------------------- */ @@ -5048,17 +5107,15 @@ a.to-the-top > * { .entry-content h1, .entry-content h2, .entry-content h3 { - margin: 6rem 0 3rem; + margin: 6rem auto 3rem; } .entry-content h4, .entry-content h5, .entry-content h6 { - margin: 4.5rem 0 2.5rem; + margin: 4.5rem auto 2.5rem; } - /* ALIGNMENT CLASSES */ - .alignnone, .aligncenter { margin-bottom: 4rem; @@ -5073,15 +5130,14 @@ a.to-the-top > * { margin: 0.3rem 0 2rem 2rem; } - .alignwide, - .alignfull { + .entry-content > .alignwide, + .entry-content > .alignfull { margin-bottom: 6rem; margin-top: 6rem; } .entry-content > .alignwide { max-width: calc(100vw - 8rem); - right: calc(50% - 50vw + 4rem); width: calc(100vw - 8rem); } @@ -5562,23 +5618,78 @@ a.to-the-top > * { /* BLOCK: GROUP */ - .wp-block-group.alignwide.has-background, - .wp-block-group.alignfull.has-background { + .entry-content > .wp-block-group.alignwide.has-background, + .entry-content > .wp-block-group.alignfull.has-background { padding: 8rem 4rem; } /* BLOCK: SEPARATOR */ hr.wp-block-separator { - margin: 8rem 0; + margin: 8rem auto; } /* Entry Content ------------------------- */ /* ALIGNMENT CLASSES */ - .alignwide, - .alignfull { + .entry-content > .alignleft, + .entry-content > p .alignleft, + .entry-content > .wp-block-image .alignleft { + position: absolute; + left: calc((100vw - 58rem) / 2 + 58rem); + max-width: calc((100% - 58rem) / 2 - 4rem); + } + + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignleft, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignleft, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignleft { + position: relative; + left: inherit; + max-width: inherit; + } + + [class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft { + position: absolute; + left: calc((100% - 58rem) / 2 + 58rem); + max-width: calc((100% - 58rem) / 2 - 4rem); + } + + .entry-content > .alignright, + .entry-content > p .alignright, + .entry-content > .wp-block-image .alignright, + [class*="__inner-container"] > .alignright { + position: absolute; + right: calc((100vw - 58rem) / 2 + 58rem); + max-width: calc((100% - 58rem) / 2 - 4rem); + } + + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignright, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignright, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignright { + position: relative; + right: inherit; + max-width: inherit; + } + + [class*="wp-block"].alignwide [class*="__inner-container"] > .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright { + position: absolute; + right: calc((100% - 58rem) / 2 + 58rem); + max-width: calc((100% - 58rem) / 2 - 4rem); + } + + .entry-content > .alignwide, + .entry-content > .alignfull { margin-bottom: 8rem; margin-top: 8rem; } @@ -5727,8 +5838,8 @@ a.to-the-top > * { /* BLOCK: GROUP */ - .wp-block-group.alignwide.has-background, - .wp-block-group.alignfull.has-background { + .entry-content > .wp-block-group.alignwide.has-background, + .entry-content > .wp-block-group.alignfull.has-background { padding: 8rem 6rem; } @@ -5748,7 +5859,7 @@ a.to-the-top > * { /* ALIGNMENT CLASSES */ - .alignfull { + .entry-content > .alignfull { margin-bottom: 10rem; margin-top: 10rem; } @@ -5842,7 +5953,6 @@ a.to-the-top > * { .wp-block-separator.is-style-wide { max-width: 120rem; - right: calc(50% - 60rem); width: 120rem; } @@ -5864,10 +5974,14 @@ a.to-the-top > * { .entry-content > .alignwide { max-width: 120rem; - right: calc(50% - 60rem); width: 120rem; } + [class*="__inner-container"] > .alignwide { + max-width: 120rem; + width: 100%; + } + } @media ( min-width: 1330px ) { diff --git a/src/wp-content/themes/twentytwenty/style.css b/src/wp-content/themes/twentytwenty/style.css index 350bf1a80a..4a0b22542e 100644 --- a/src/wp-content/themes/twentytwenty/style.css +++ b/src/wp-content/themes/twentytwenty/style.css @@ -2384,6 +2384,10 @@ h2.entry-title { .post-meta-wrapper { margin-top: 2rem; + margin-right: auto; + margin-left: auto; + max-width: 58rem; + width: calc(100% - 4rem); } .post-meta { @@ -2544,6 +2548,10 @@ h2.entry-title { .author-bio { margin-top: 4rem; + margin-right: auto; + margin-left: auto; + max-width: 58rem; + width: calc(100% - 4rem); } .hide-avatars .author-bio { @@ -2786,24 +2794,25 @@ h2.entry-title { margin-bottom: 0; } -.wp-block-archives, -.wp-block-categories, +.wp-block-archives:not(.alignwide):not(.alignfull), +.wp-block-categories:not(.alignwide):not(.alignfull), .wp-block-code, -.wp-block-columns, -.wp-block-cover, -.wp-block-embed, -.wp-block-gallery, -.wp-block-group, -.wp-block-latest-comments, -.wp-block-latest-posts, -.wp-block-media-text, +.wp-block-columns:not(.alignwide):not(.alignfull), +.wp-block-cover:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), +.wp-block-embed:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), +.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), +.wp-block-group:not(.has-background):not(.alignwide):not(.alignfull), +.wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), +.wp-block-latest-comments:not(.aligncenter):not(.alignleft):not(.alignright), +.wp-block-latest-posts:not(.aligncenter):not(.alignleft):not(.alignright), +.wp-block-media-text:not(.alignwide):not(.alignfull), .wp-block-preformatted, -.wp-block-pullquote, +.wp-block-pullquote:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .wp-block-quote, .wp-block-quote.is-large, .wp-block-quote.is-style-large, .wp-block-verse, -.wp-block-video { +.wp-block-video:not(.alignwide):not(.alignfull) { margin-bottom: 3rem; margin-top: 3rem; } @@ -3020,10 +3029,6 @@ h2.entry-title { /* Block: Gallery ---------------------------- */ -ul.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignright):not(.alignleft) { - margin-left: 0; -} - .wp-block-gallery ul { list-style: none; margin: 0 0 -1.6rem 0; @@ -3221,8 +3226,7 @@ hr.wp-block-separator { .wp-block-separator.is-style-wide { max-width: calc(100vw - 4rem); position: relative; - left: calc(50% - 50vw + 2rem); - width: calc(100vw - 4rem); + width: 100%; } /* STYLE: DOTS */ @@ -3292,6 +3296,8 @@ figure.wp-block-table.is-style-stripes { .wp-block-quote.is-style-large { border: none; padding: 0; + margin-left: auto; + margin-right: auto; } .wp-block-quote.is-large p, @@ -3314,9 +3320,8 @@ figure.wp-block-table.is-style-stripes { /* Block: Widget Latest Comments ------------- */ -.entry-content .wp-block-latest-comments, .entry-content .wp-block-latest-comments li { - margin-left: 0; + margin: 2rem 0; } .has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt, @@ -3381,7 +3386,12 @@ figure.wp-block-table.is-style-stripes { .entry-content { line-height: 1.5; - max-width: 58rem; +} + +.entry-content > * { + margin-left: auto; + margin-right: auto; + margin-bottom: 1.25em; } .entry-content > *:first-child { @@ -3408,7 +3418,7 @@ figure.wp-block-table.is-style-stripes { .entry-content h4, .entry-content h5, .entry-content h6 { - margin: 3.5rem 0 2rem; + margin: 3.5rem auto 2rem; } .entry-content ul ul, @@ -3419,7 +3429,7 @@ figure.wp-block-table.is-style-stripes { } .entry-content hr { - margin: 4rem 0; + margin: 4rem auto; } /* Font Families ----------------------------- */ @@ -3451,20 +3461,70 @@ figure.wp-block-table.is-style-stripes { /* Alignment Classes ------------------------- */ +.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) { + max-width: 58rem; + width: calc(100% - 4rem); +} + +[class*="__inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) { + max-width: 58rem; + width: 100%; +} + .alignnone, .aligncenter, .alignleft, -.alignright { - margin: 3rem 0; +.alignright, +.alignwide { + margin-top: 4rem; + margin-right: auto; + margin-bottom: 4rem; + margin-left: auto; +} + +[class*="__inner-container"] > *:not(.alignwide):not(.alignfull) { + margin-left: auto; + margin-right: auto; +} + +/* Full */ + +.alignfull { + margin-top: 5rem; + margin-right: auto; + margin-bottom: 5rem; + margin-left: auto; + max-width: 100vw; + position: relative; + width: 100%; +} + +[class*="__inner-container"] > .alignfull { max-width: 100%; } +/* Wide */ + +.alignwide { + max-width: 120rem; + position: relative; + width: calc(100% - 4rem); +} + +[class*="__inner-container"] > .alignwide { + width: 100%; +} + +/* Center */ + .aligncenter, .aligncenter img { margin-left: auto; margin-right: auto; } +/* Left and right */ + .alignleft, .alignright { max-width: 50%; @@ -3474,47 +3534,23 @@ figure.wp-block-table.is-style-stripes { /*rtl:ignore*/ float: left; - margin: 0.3rem 2rem 2rem 0; + margin: 0.3rem 2rem 2rem 2rem; } .alignright { /*rtl:ignore*/ float: right; - margin: 0.3rem 0 2rem 2rem; -} - -.alignwide { - margin: 4rem auto; - max-width: 120rem; -} - -.entry-content > .alignwide { - max-width: calc(100vw - 4rem); - position: relative; - left: calc(50% - 50vw + 2rem); - width: calc(100vw - 4rem); + margin: 0.3rem 2rem 2rem 2rem; } -.alignfull { - margin: 5rem 0; -} - -.entry-content > .alignfull { - max-width: 100vw; - position: relative; - left: calc(50% - 50vw); - width: 100vw; -} - - /* Entry Media ------------------------------- */ .alignfull > figcaption, .alignfull > .wp-caption-text { margin-left: auto; margin-right: auto; - max-width: 120rem; + max-width: 58rem; width: calc(100% - 4rem); } @@ -4467,20 +4503,48 @@ a.to-the-top > * { .entry-content > .alignleft, .entry-content > p .alignleft, - .entry-content > .wp-block-image .alignleft { + .entry-content > .wp-block-image .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft { /*rtl:ignore*/ margin-left: calc(( 100vw - 58rem - 8rem ) / -2); } + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignleft, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignleft, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignleft { + + /*rtl:ignore*/ + margin-left: 0; + } + .entry-content > .alignright, .entry-content > p .alignright, - .entry-content > .wp-block-image .alignright { + .entry-content > .wp-block-image .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright { /*rtl:ignore*/ margin-right: calc(( 100vw - 58rem - 8rem ) / -2); } + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignright, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignright, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignright { + + /*rtl:ignore*/ + margin-right: 0; + } + } @media ( min-width: 700px ) { @@ -4497,7 +4561,7 @@ a.to-the-top > * { } hr { - margin: 8rem 0; + margin: 8rem auto; } table { @@ -4546,7 +4610,7 @@ a.to-the-top > * { .heading-size-2, h3, .heading-size-3 { - margin: 6rem 0 3rem; + margin: 6rem auto 3rem; } h4, @@ -4555,7 +4619,7 @@ a.to-the-top > * { .heading-size-5, h6, .heading-size-6 { - margin: 4.5rem 0 2.5rem; + margin: 4.5rem auto 2.5rem; } h1, @@ -4922,26 +4986,27 @@ a.to-the-top > * { /* BLOCK: BASE MARGINS */ - .wp-block-archives, - .wp-block-categories, + .wp-block-archives:not(.alignwide):not(.alignfull), + .wp-block-categories:not(.alignwide):not(.alignfull), .wp-block-code, - .wp-block-columns, - .wp-block-cover, - .wp-block-embed, - .wp-block-gallery, - .wp-block-group, - .wp-block-latest-comments, - .wp-block-latest-posts, - .wp-block-media-text, + .wp-block-columns:not(.alignwide):not(.alignfull), + .wp-block-cover:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), + .wp-block-embed:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), + .wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), + .wp-block-group:not(.has-background):not(.alignwide):not(.alignfull), + .wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), + .wp-block-latest-comments:not(.aligncenter):not(.alignleft):not(.alignright), + .wp-block-latest-posts:not(.aligncenter):not(.alignleft):not(.alignright), + .wp-block-media-text:not(.alignwide):not(.alignfull), .wp-block-preformatted, - .wp-block-pullquote, + .wp-block-pullquote:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .wp-block-quote, .wp-block-quote.is-large, .wp-block-quote.is-style-large, .wp-block-verse, - .wp-block-video { - margin-bottom: 5rem; - margin-top: 5rem; + .wp-block-video:not(.alignwide):not(.alignfull) { + margin-bottom: 4rem; + margin-top: 4rem; } /* BLOCK: COLUMNS */ @@ -5055,13 +5120,11 @@ a.to-the-top > * { /* BLOCK: SEPARATOR */ hr.wp-block-separator { - margin: 6rem 0; + margin: 6rem auto; } .wp-block-separator.is-style-wide { max-width: calc(100vw - 8rem); - left: calc(50% - 50vw + 4rem); - width: calc(100vw - 8rem); } /* Entry Content ------------------------- */ @@ -5078,17 +5141,15 @@ a.to-the-top > * { .entry-content h1, .entry-content h2, .entry-content h3 { - margin: 6rem 0 3rem; + margin: 6rem auto 3rem; } .entry-content h4, .entry-content h5, .entry-content h6 { - margin: 4.5rem 0 2.5rem; + margin: 4.5rem auto 2.5rem; } - /* ALIGNMENT CLASSES */ - .alignnone, .aligncenter { margin-bottom: 4rem; @@ -5107,15 +5168,14 @@ a.to-the-top > * { margin: 0.3rem 0 2rem 2rem; } - .alignwide, - .alignfull { + .entry-content > .alignwide, + .entry-content > .alignfull { margin-bottom: 6rem; margin-top: 6rem; } .entry-content > .alignwide { max-width: calc(100vw - 8rem); - left: calc(50% - 50vw + 4rem); width: calc(100vw - 8rem); } @@ -5596,23 +5656,78 @@ a.to-the-top > * { /* BLOCK: GROUP */ - .wp-block-group.alignwide.has-background, - .wp-block-group.alignfull.has-background { + .entry-content > .wp-block-group.alignwide.has-background, + .entry-content > .wp-block-group.alignfull.has-background { padding: 8rem 4rem; } /* BLOCK: SEPARATOR */ hr.wp-block-separator { - margin: 8rem 0; + margin: 8rem auto; } /* Entry Content ------------------------- */ /* ALIGNMENT CLASSES */ - .alignwide, - .alignfull { + .entry-content > .alignleft, + .entry-content > p .alignleft, + .entry-content > .wp-block-image .alignleft { + position: absolute; + right: calc((100vw - 58rem) / 2 + 58rem); + max-width: calc((100% - 58rem) / 2 - 4rem); + } + + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignleft, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignleft, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignleft { + position: relative; + right: inherit; + max-width: inherit; + } + + [class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft { + position: absolute; + right: calc((100% - 58rem) / 2 + 58rem); + max-width: calc((100% - 58rem) / 2 - 4rem); + } + + .entry-content > .alignright, + .entry-content > p .alignright, + .entry-content > .wp-block-image .alignright, + [class*="__inner-container"] > .alignright { + position: absolute; + left: calc((100vw - 58rem) / 2 + 58rem); + max-width: calc((100% - 58rem) / 2 - 4rem); + } + + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignright, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignright, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignright { + position: relative; + left: inherit; + max-width: inherit; + } + + [class*="wp-block"].alignwide [class*="__inner-container"] > .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright { + position: absolute; + left: calc((100% - 58rem) / 2 + 58rem); + max-width: calc((100% - 58rem) / 2 - 4rem); + } + + .entry-content > .alignwide, + .entry-content > .alignfull { margin-bottom: 8rem; margin-top: 8rem; } @@ -5761,8 +5876,8 @@ a.to-the-top > * { /* BLOCK: GROUP */ - .wp-block-group.alignwide.has-background, - .wp-block-group.alignfull.has-background { + .entry-content > .wp-block-group.alignwide.has-background, + .entry-content > .wp-block-group.alignfull.has-background { padding: 8rem 6rem; } @@ -5782,7 +5897,7 @@ a.to-the-top > * { /* ALIGNMENT CLASSES */ - .alignfull { + .entry-content > .alignfull { margin-bottom: 10rem; margin-top: 10rem; } @@ -5880,7 +5995,6 @@ a.to-the-top > * { .wp-block-separator.is-style-wide { max-width: 120rem; - left: calc(50% - 60rem); width: 120rem; } @@ -5906,10 +6020,14 @@ a.to-the-top > * { .entry-content > .alignwide { max-width: 120rem; - left: calc(50% - 60rem); width: 120rem; } + [class*="__inner-container"] > .alignwide { + max-width: 120rem; + width: 100%; + } + } @media ( min-width: 1330px ) { diff --git a/src/wp-content/themes/twentytwenty/template-parts/content.php b/src/wp-content/themes/twentytwenty/template-parts/content.php index cd8d78ec28..4b745fa9f9 100644 --- a/src/wp-content/themes/twentytwenty/template-parts/content.php +++ b/src/wp-content/themes/twentytwenty/template-parts/content.php @@ -25,7 +25,7 @@ ?> -
+
@@ -39,6 +39,9 @@
+
+ +
-
+