From 83e19085a312f37c11e3d26cfaac1bade44f4573 Mon Sep 17 00:00:00 2001 From: laurelfulford Date: Sun, 7 Jul 2019 20:49:55 +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. Built from https://develop.svn.wordpress.org/trunk@45606 git-svn-id: http://core.svn.wordpress.org/trunk@45417 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../themes/twentythirteen/css/blocks.css | 107 ++++++++++++++++++ .../twentythirteen/css/editor-blocks.css | 19 ++++ wp-includes/version.php | 2 +- 3 files changed, 127 insertions(+), 1 deletion(-) diff --git a/wp-content/themes/twentythirteen/css/blocks.css b/wp-content/themes/twentythirteen/css/blocks.css index e6c07e2ee8..a08ddfd1a5 100644 --- a/wp-content/themes/twentythirteen/css/blocks.css +++ b/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/wp-content/themes/twentythirteen/css/editor-blocks.css b/wp-content/themes/twentythirteen/css/editor-blocks.css index c88cb4dba7..3515fadf99 100644 --- a/wp-content/themes/twentythirteen/css/editor-blocks.css +++ b/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 --------------------------------------------------------------*/ diff --git a/wp-includes/version.php b/wp-includes/version.php index d09fceba6c..ee899b9c34 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -13,7 +13,7 @@ * * @global string $wp_version */ -$wp_version = '5.3-alpha-45605'; +$wp_version = '5.3-alpha-45606'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.