From b61dd6109cb93268ad44cb330053ff5a93c144dc Mon Sep 17 00:00:00 2001 From: laurelfulford Date: Tue, 6 Nov 2018 01:22:48 +0000 Subject: [PATCH] Twenty Thirteen: Fix issues with theme's Gutenberg support. A handful of issues were missed in Twenty Thirteen's Gutenberg support, added in #45041. This commit includes the following fixes: * Center text and bullets in list-based widget blocks, when block itself is centered. * Prevent full and wide aligned blocks from getting wider than Twenty Thirteen's design. * Prevent wide aligned blocks from getting too wide, as they can seem out of proportion with the full aligned blocks. * Make sure full and wide blocks display at the correct width in the editor. * Include non "image" variations of the Cover block classes `.wp-block-cover` and `.wp-block-cover-text` in the styles. * Make sure wide and full aligned Table blocks span the available width on the front end. * Add spacing underneath the Media & Text block, but make sure the final paragraph in the block doesn't add too much space. * Simplify selectors used to set editor width to just `.wp-block`. Props pento, davidakennedy. Fixes #45242. Built from https://develop.svn.wordpress.org/branches/5.0@43872 git-svn-id: http://core.svn.wordpress.org/branches/5.0@43701 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../themes/twentythirteen/css/blocks.css | 86 ++++++++++++++++++- .../twentythirteen/css/editor-blocks.css | 37 ++++++-- wp-includes/version.php | 2 +- 3 files changed, 113 insertions(+), 12 deletions(-) diff --git a/wp-content/themes/twentythirteen/css/blocks.css b/wp-content/themes/twentythirteen/css/blocks.css index 357fbba74e..e21e6935d9 100644 --- a/wp-content/themes/twentythirteen/css/blocks.css +++ b/wp-content/themes/twentythirteen/css/blocks.css @@ -86,9 +86,9 @@ body:not(.sidebar) .wp-block-latest-comments.alignfull { } } -/* Make sure the full and wide blocks still stay in Twenty Thirteen's wide container */ - @media (min-width: 1600px) { + + /* Make sure the full and wide blocks still stay in Twenty Thirteen's wide container */ body:not(.sidebar) .alignfull { margin-left: calc(50% - 800px); margin-right: calc(50% - 800px); @@ -96,12 +96,26 @@ body:not(.sidebar) .wp-block-latest-comments.alignfull { max-width: 1000%; } + body:not(.sidebar) .wp-block-columns.alignfull, + body:not(.sidebar) .wp-block-audio.alignfull, + body:not(.sidebar) .wp-block-table.alignfull, + body:not(.sidebar) .wp-block-latest-comments.alignfull { + margin-left: calc(50% - 780px); + margin-right: calc(50% - 780px); + } + body:not(.sidebar) .wp-block-gallery.alignfull { margin-left: calc(50% - 808px); /* Adjust for gallery margins */ margin-right: calc(50% - 808px); width: auto; max-width: 1000%; } + + /* Make sure the 'wide' alignment doesn't get too wide. */ + body:not(.sidebar) .alignwide { + margin-left: -230px; + margin-right: -230px; + } } /*-------------------------------------------------------------- @@ -172,9 +186,10 @@ p.has-drop-cap:not(:focus)::first-letter { width: 100%; } -/* Cover Image */ +/* Cover */ -.wp-block-cover-image.aligncenter { +.wp-block-cover-image.aligncenter, +.wp-block-cover.aligncenter { clear: both; display: flex; } @@ -262,6 +277,50 @@ p.has-drop-cap:not(:focus)::first-letter { border-top: 1px solid #ededed; } +body:not(.sidebar) .wp-block-table.alignwide, +body:not(.sidebar) .wp-block-table.alignfull { + width: 100%; +} + +/* Some acrobatics to make sure the table blocks always fill the available space. */ + +@media (max-width: 1599px) { + body:not(.sidebar) .wp-block-table.alignwide { + width: calc(302px + 50vw); /* Half the content area width plus half the screen width. */ + } + + body:not(.sidebar) .wp-block-table.alignfull { + width: 96vw; + } +} + +@media (max-width: 999px) { + body.sidebar .wp-block-table.alignwide { + width: calc(302px + 50vw); /* Half the content area width plus half the screen width. */ + } + + body.sidebar .wp-block-table.alignfull { + width: 96vw; + } +} + +@media (max-width: 654px) { + body:not(.sidebar) .wp-block-table.alignwide, + body.sidebar .wp-block-table.alignwide { + width: 96vw; + } +} + +@media (min-width: 1600px) { + body:not(.sidebar) .wp-block-table.alignwide { + width: 1064px; + } + + body:not(.sidebar) .wp-block-table.alignfull { + width: 1560px; + } +} + /*-------------------------------------------------------------- 5.0 Blocks - Layout Elements --------------------------------------------------------------*/ @@ -319,10 +378,29 @@ p.has-drop-cap:not(:focus)::first-letter { max-width: 100%; } +/* Media & Text */ + +.wp-block-media-text { + margin-bottom: 24px; +} + +.wp-block-media-text *:last-child { + margin-bottom: 0; +} + /*-------------------------------------------------------------- 6.0 Blocks - Widgets --------------------------------------------------------------*/ +/* Archives, Categories & Latest Posts */ + +.wp-block-archives.aligncenter, +.wp-block-categories.aligncenter, +.wp-block-latest-posts.aligncenter { + list-style-position: inside; + text-align: center; +} + /* Latest Comments */ .wp-block-latest-comments { diff --git a/wp-content/themes/twentythirteen/css/editor-blocks.css b/wp-content/themes/twentythirteen/css/editor-blocks.css index 3fb363db03..af2479e466 100644 --- a/wp-content/themes/twentythirteen/css/editor-blocks.css +++ b/wp-content/themes/twentythirteen/css/editor-blocks.css @@ -52,12 +52,19 @@ Description: Used to style Gutenberg Blocks in the editor. 3.0 General Block Styles --------------------------------------------------------------*/ -/* Main column width */ +/* Main content width */ -.edit-post-visual-editor .editor-post-title__block, -.edit-post-visual-editor .editor-default-block-appender, -.edit-post-visual-editor .editor-block-list__block { - max-width: 634px; /* 604 + 30 for editor block padding */ +.wp-block { + max-width: 634px; /* 604px + 30px to account for padding */ +} + +.wp-block.alignwide, +.wp-block.alignfull { + max-width: inherit; +} + +[class^="wp-block-"] .wp-block { + max-width: 100%; } /* Link styles */ @@ -230,9 +237,10 @@ p.has-drop-cap:not(:focus)::first-letter { font-size: 18px; } -/* Cover Image */ +/* Cover */ -.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p.wp-block-cover-image-text { +.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p.wp-block-cover-image-text, +.edit-post-visual-editor .editor-block-list__block .wp-block-cover p.wp-block-cover-text { font-size: 32px; line-height: 1.25; } @@ -339,10 +347,25 @@ p.has-drop-cap:not(:focus)::first-letter { margin-right: auto; } +/* Media & Text */ + +.wp-block-media-text *:last-child { + margin-bottom: 0; +} + /*-------------------------------------------------------------- 7.0 Blocks - Widgets --------------------------------------------------------------*/ +/* Archives, Categories & Latest Posts */ + +[data-align="center"] .wp-block-archives ul, +[data-align="center"] .wp-block-categories ul, +[data-align="center"] .wp-block-latest-posts ul { + list-style-position: inside; + text-align: center; +} + /* Latest Comments */ .editor-block-list__block .wp-block-latest-comments { diff --git a/wp-includes/version.php b/wp-includes/version.php index 3a079f9c73..72c4247345 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -4,7 +4,7 @@ * * @global string $wp_version */ -$wp_version = '5.0-beta3-43871'; +$wp_version = '5.0-beta3-43872'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.