From 431bc58a48f2a8333a4768da52878f8e98b6dee9 Mon Sep 17 00:00:00 2001 From: laurelfulford Date: Sun, 7 Jul 2019 20:48:03 +0000 Subject: [PATCH] Twenty Thirteen: Add styles for the new Group block. Add styles for the new Group block to the theme, to make sure nested blocks display correctly when using the wide and full alignments. Props @kjellr. Fixes #46778. git-svn-id: https://develop.svn.wordpress.org/trunk@45606 602fd350-edb4-49c9-b593-d223f7449a82 --- .../themes/twentythirteen/css/blocks.css | 107 ++++++++++++++++++ .../twentythirteen/css/editor-blocks.css | 19 ++++ 2 files changed, 126 insertions(+) diff --git a/src/wp-content/themes/twentythirteen/css/blocks.css b/src/wp-content/themes/twentythirteen/css/blocks.css index e6c07e2ee8..a08ddfd1a5 100644 --- a/src/wp-content/themes/twentythirteen/css/blocks.css +++ b/src/wp-content/themes/twentythirteen/css/blocks.css @@ -404,6 +404,113 @@ body:not(.sidebar) .wp-block-table.alignfull { max-width: 100%; } +/* Group Block: Default Alignment */ + +.wp-block-group, +.wp-block-group.has-background { + margin-bottom: 24px; +} + +.wp-block-group:not(.alignfull):not(.alignwide) > .wp-block-group__inner-container > * { + width: 604px; + max-width: 100%; + margin-left: 0; + margin-right: 0; +} + +.wp-block-group.has-background:not(.alignfull):not(.alignwide) > .wp-block-group__inner-container > .alignfull { + width: calc(100% + 60px); + max-width: calc(100% + 60px); + margin-left: -30px; +} + +.wp-block-group:not(.alignfull) .wp-block-columns.alignfull { + margin-left: auto; + margin-right: auto; +} + +/* Group Block: Wide Alignment */ + +.wp-block-group.alignwide > .wp-block-group__inner-container > *, +.wp-block-group.alignwide > .wp-block-group__inner-container > .alignwide, +.wp-block-group.alignwide > .wp-block-group__inner-container > .alignfull { + max-width: 604px; + margin-left: auto; + margin-right: auto; +} + +.wp-block-group.alignwide > .wp-block-group__inner-container > .alignwide, +.wp-block-group.alignwide > .wp-block-group__inner-container > .alignfull { + width: 100%; + max-width: 100%; +} + +.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignfull { + width: calc(100% + 60px); + max-width: calc(100% + 60px); + margin-left: -30px; +} + +@media (max-width: 664px) { + .wp-block-group:not(.has-background).alignwide { + margin-left: 0; + margin-right: 0; + } + + .wp-block-group:not(.has-background).alignwide > .wp-block-group__inner-container > .alignwide, + .wp-block-group:not(.has-background).alignwide > .wp-block-group__inner-container > .alignfull { + width: auto; + max-width: 1600px; + margin-left: calc(25% - 25vw); + margin-right: calc(25% - 25vw); + } +} + +/* Group Block: Full Alignment */ + +@media (max-width: 664px) { + .wp-block-group:not(.has-background).alignfull { + margin-left: 0; + margin-right: 0; + } + + .wp-block-group.has-background.alignfull > *:not(.alignfull) { + margin-left: auto; + margin-right: auto; + } +} + +@media (max-width: 999px) { + body.sidebar .wp-block-group.alignfull:not(.has-background) { + margin-left: 0; + margin-right: 0; + } + + body.sidebar .wp-block-group.alignfull.has-background > .wp-block-group__inner-container { + max-width: 604px; + margin: 0 auto; + } + + body.sidebar .wp-block-group.alignfull:not(.has-background) > .wp-block-group__inner-container > .alignfull { + margin-left: calc(50% - 50vw); + margin-right: calc(50% - 50vw); + } +} + +@media (min-width: 665px) { + body:not(.sidebar) .wp-block-group.alignfull, + body:not(.sidebar) .wp-block-group.has-background.alignfull { + padding: 20px calc( (100vw - 604px ) / 2 ); /* Reproduces the padding of entry-content, so that default block rules apply properly inside of this block. */ + } +} + +@media (min-width: 1600px) { + body:not(.sidebar) .wp-block-group.alignfull, + body:not(.sidebar) .wp-block-group.has-background.alignfull { + padding: 20px 498px; /* Above 1600px, these need fixed left/right padding. This works out to ((1600px - 604px) / 2) */ + } +} + /* Media & Text */ .wp-block-media-text { diff --git a/src/wp-content/themes/twentythirteen/css/editor-blocks.css b/src/wp-content/themes/twentythirteen/css/editor-blocks.css index c88cb4dba7..3515fadf99 100644 --- a/src/wp-content/themes/twentythirteen/css/editor-blocks.css +++ b/src/wp-content/themes/twentythirteen/css/editor-blocks.css @@ -361,6 +361,25 @@ p.has-drop-cap:not(:focus)::first-letter { margin-bottom: 0; } +/* Group */ + +.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 { + max-width: 634px; +} + +.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="wide"] { + max-width: 1100px; +} + +.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"] { + max-width: 100%; +} + +.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"] { + width: calc(100% + 60px); + max-width: calc(100% + 60px); +} + /*-------------------------------------------------------------- 7.0 Blocks - Widgets --------------------------------------------------------------*/