From e34fe23ff0f1e9d837a4fe9282e01f5669749720 Mon Sep 17 00:00:00 2001 From: Jonathan Desrosiers Date: Fri, 14 Dec 2018 02:54:17 +0000 Subject: [PATCH] Bundled Themes: Expand initial block editor support. A handful of items were missed when adding initial support for the new block editor to bundled themes in [43793]-[43800]. This adds support for those missed items. Props pento, davidakennedy, laurelfulford. Merges [43869], [43870], [43871], [43872], [43873], [43874], [43875], [43876] to trunk. Fixes #45238, #45239, #45240, #45242, #45243, #45244, #45245, #45246. git-svn-id: https://develop.svn.wordpress.org/trunk@44152 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-content/themes/twentyeleven/blocks.css | 38 +++++++- .../themes/twentyeleven/editor-blocks.css | 32 +++++-- .../themes/twentyfifteen/css/blocks.css | 43 +++++++++- .../twentyfifteen/css/editor-blocks.css | 32 +++++-- .../themes/twentyfourteen/css/blocks.css | 27 +++--- .../twentyfourteen/css/editor-blocks.css | 28 ++++-- .../twentyseventeen/assets/css/blocks.css | 26 +++++- .../assets/css/editor-blocks.css | 31 +++++-- .../themes/twentysixteen/css/blocks.css | 26 ++++++ .../twentysixteen/css/editor-blocks.css | 26 ++++-- src/wp-content/themes/twentyten/blocks.css | 15 ++-- .../themes/twentyten/editor-blocks.css | 21 +++-- .../themes/twentythirteen/css/blocks.css | 86 ++++++++++++++++++- .../twentythirteen/css/editor-blocks.css | 37 ++++++-- .../themes/twentytwelve/css/blocks.css | 25 +++++- .../themes/twentytwelve/css/editor-blocks.css | 30 +++++-- 16 files changed, 437 insertions(+), 86 deletions(-) diff --git a/src/wp-content/themes/twentyeleven/blocks.css b/src/wp-content/themes/twentyeleven/blocks.css index e448ddeaae..c3b2089d9c 100644 --- a/src/wp-content/themes/twentyeleven/blocks.css +++ b/src/wp-content/themes/twentyeleven/blocks.css @@ -130,18 +130,21 @@ 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; } -.wp-block-cover-image.alignleft { +.wp-block-cover-image.alignleft, +.wp-block-cover.alignleft { margin-right: 1.625em; } -.wp-block-cover-image.alignright { +.wp-block-cover-image.alignright, +.wp-block-cover.alignright { margin-left: 1.625em; } @@ -260,10 +263,37 @@ p.has-drop-cap:not(:focus)::first-letter { max-width: 100%; } +/* Media & Text */ + +.wp-block-media-text { + margin-bottom: 1.625em; +} + +.wp-block-media-text *:last-child { + margin-bottom: 0; +} + /*-------------------------------------------------------------- 5.0 Blocks - Widgets --------------------------------------------------------------*/ +/* Archives, Categories & Latest Posts */ + +.wp-block-archives.aligncenter, +.wp-block-categories.aligncenter, +.wp-block-latest-posts.aligncenter { + list-style-position: inside; + margin-left: 2.5em; + text-align: center; +} + +.rtl .wp-block-archives.aligncenter, +.rtl .wp-block-categories.aligncenter, +.rtl .wp-block-latest-posts.aligncenter { + margin-left: 0; + margin-right: 2.5em; +} + /* Latest Comments */ .wp-block-latest-comments { diff --git a/src/wp-content/themes/twentyeleven/editor-blocks.css b/src/wp-content/themes/twentyeleven/editor-blocks.css index 65ad9f1a57..88935f1949 100644 --- a/src/wp-content/themes/twentyeleven/editor-blocks.css +++ b/src/wp-content/themes/twentyeleven/editor-blocks.css @@ -72,10 +72,12 @@ Description: Used to style Gutenberg Blocks in the editor. /* Main column width */ -body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block, -body.gutenberg-editor-page .edit-post-visual-editor .editor-default-block-appender, -body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block { - max-width: 614px; +.editor-styles-wrapper { + max-width: 100% !important; /* Override where editor-style.css is affecting this. */ +} + +.wp-block { + max-width: 614px; /* 584px + 30px to account for padding */ } /* Link styles */ @@ -288,10 +290,10 @@ p.has-drop-cap:not(:focus)::first-letter { font-size: 16px; } +/* Cover */ -/* Cover Image */ - -.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: 30px; line-height: 37.5px; } @@ -385,10 +387,26 @@ p.has-drop-cap:not(:focus)::first-letter { text-shadow: 0 -1px 0 rgba(0,0,0,0.3); } +/* Media & Text */ + +.wp-block-media-text *:last-child { + margin-bottom: 0; +} + /*-------------------------------------------------------------- 6.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; + margin-left: 2.5em; + text-align: center; +} + /* Latest Comments */ .wp-block-latest-comments { diff --git a/src/wp-content/themes/twentyfifteen/css/blocks.css b/src/wp-content/themes/twentyfifteen/css/blocks.css index d02c5d8fb0..d3ede1a14d 100644 --- a/src/wp-content/themes/twentyfifteen/css/blocks.css +++ b/src/wp-content/themes/twentyfifteen/css/blocks.css @@ -59,6 +59,19 @@ Description: Used to style Gutenberg Blocks. } } +/* Alignments */ + +[class^="wp-block-"].alignleft, +[class^="wp-block-"] .alignleft { + margin-right: 1em; +} + +[class^="wp-block-"].alignright, +[class^="wp-block-"] .alignright { + margin-left: 1em; +} + + /*-------------------------------------------------------------- 2.0 Blocks - Common Blocks --------------------------------------------------------------*/ @@ -82,10 +95,12 @@ p.has-drop-cap:not(:focus)::first-letter { width: 100%; } -/* Cover Image */ +/* Cover */ .wp-block-cover-image .wp-block-cover-image-text, -.wp-block-cover-image h2 { +.wp-block-cover .wp-block-cover-text, +.wp-block-cover-image h2, +.wp-block-cover h2 { font-size: 29px; line-height: 1.2069; } @@ -187,8 +202,11 @@ p.has-drop-cap:not(:focus)::first-letter { /* Cover Image */ .wp-block-cover-image.aligncenter, +.wp-block-cover.aligncenter, .wp-block-cover-image.alignleft, -.wp-block-cover-image.alignright { +.wp-block-cover.alignleft, +.wp-block-cover-image.alignright, +.wp-block-cover.alignright { display: flex; } @@ -439,10 +457,29 @@ p.has-drop-cap:not(:focus)::first-letter { max-width: 100%; } +/* Media & Text */ + +.wp-block-media-text { + margin-bottom: 1.6em; +} + +.wp-block-media-text *:last-child { + margin-bottom: 0; +} + /*-------------------------------------------------------------- 5.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/src/wp-content/themes/twentyfifteen/css/editor-blocks.css b/src/wp-content/themes/twentyfifteen/css/editor-blocks.css index bd6c71856f..89d9c39439 100644 --- a/src/wp-content/themes/twentyfifteen/css/editor-blocks.css +++ b/src/wp-content/themes/twentyfifteen/css/editor-blocks.css @@ -305,10 +305,12 @@ Description: Used to style Gutenberg Blocks in the editor. /* Main column width */ -body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block, -body.gutenberg-editor-page .edit-post-visual-editor .editor-default-block-appender, -body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block { - max-width: 690px; /* 660px + 30px for the editor padding */ +.editor-styles-wrapper { + max-width: 100% !important; /* Override where editor-style.css is affecting this. */ +} + +.wp-block { + max-width: 690px; /* 660px + 30px to account for padding. */ } /* Link styles */ @@ -556,15 +558,16 @@ p.has-drop-cap:not(:focus)::first-letter { } } -/* Cover Image */ +/* Cover */ .edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p, -.wp-block-cover-image h2 { +.edit-post-visual-editor .editor-block-list__block .wp-block-cover p, +.wp-block-cover-image h2, +.wp-block-cover h2 { font-size: 29px; line-height: 1.2069; } - /* File */ .wp-block-file .editor-rich-text__tinymce { @@ -764,11 +767,26 @@ p.has-drop-cap:not(:focus)::first-letter { max-width: 100%; } +/* Media & Text */ + +.wp-block-media-text *:last-child { + margin-bottom: 0; +} + /*-------------------------------------------------------------- 6.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; +} + + /* Latest Comments */ .wp-block-latest-comments { diff --git a/src/wp-content/themes/twentyfourteen/css/blocks.css b/src/wp-content/themes/twentyfourteen/css/blocks.css index a15b9a3979..a1b6cb5f91 100644 --- a/src/wp-content/themes/twentyfourteen/css/blocks.css +++ b/src/wp-content/themes/twentyfourteen/css/blocks.css @@ -127,13 +127,13 @@ 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 { display: flex; } - /* File */ .wp-block-file .wp-block-file__button { @@ -242,16 +242,6 @@ p.has-drop-cap:not(:focus)::first-letter { background-color: #55d737; } -/* Columns */ - -.wp-block-columns { - margin: 0 -0.5em; -} - -.wp-block-column { - margin: 0 0.5em; -} - /* Separator */ .wp-block-separator { @@ -263,6 +253,16 @@ 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; +} + /*-------------------------------------------------------------- 5.0 Blocks - Widgets --------------------------------------------------------------*/ @@ -272,6 +272,7 @@ p.has-drop-cap:not(:focus)::first-letter { .wp-block-archives.aligncenter, .wp-block-categories.aligncenter, .wp-block-latest-posts.aligncenter { + list-style-position: inside; margin-left: 20px; text-align: center; } diff --git a/src/wp-content/themes/twentyfourteen/css/editor-blocks.css b/src/wp-content/themes/twentyfourteen/css/editor-blocks.css index 5b89dd6995..421bda895f 100644 --- a/src/wp-content/themes/twentyfourteen/css/editor-blocks.css +++ b/src/wp-content/themes/twentyfourteen/css/editor-blocks.css @@ -21,9 +21,14 @@ Description: Used to style Gutenberg Blocks in the editor. .edit-post-visual-editor .editor-block-list__block, .edit-post-visual-editor .editor-block-list__block p, .editor-default-block-appender input[type="text"].editor-default-block-appender__content { + font-size: 16px; line-height: 1.5; } +.editor-default-block-appender input[type="text"].editor-default-block-appender__content { + font-family: Lato, sans-serif; +} + .edit-post-visual-editor .editor-block-list__block { color: #2b2b2b; } @@ -68,10 +73,8 @@ Description: Used to style Gutenberg Blocks in the editor. /* Main column width */ -body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block, -body.gutenberg-editor-page .edit-post-visual-editor .editor-default-block-appender, -body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block { - max-width: 504px; /* 474 + 30 for editor block padding */ +.wp-block { + max-width: 504px; /* 474px + 30px to account for padding */ } /* Link styles */ @@ -307,9 +310,10 @@ p.has-drop-cap:not(:focus)::first-letter { } } -/* Cover Image */ +/* Cover */ -.wp-block-cover-image.aligncenter { +.wp-block-cover-image.aligncenter, +.wp-block-cover.aligncenter { display: flex; } @@ -400,12 +404,24 @@ p.has-drop-cap:not(:focus)::first-letter { line-height: normal; } +/* Media & Text */ + +.wp-block-media-text *:last-child { + margin-bottom: 0; +} + /*-------------------------------------------------------------- 6.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-categories ul { + list-style-position: inside; +} + .wp-block-archives li a, .wp-block-categories__list li a, .wp-block-latest-posts li a { diff --git a/src/wp-content/themes/twentyseventeen/assets/css/blocks.css b/src/wp-content/themes/twentyseventeen/assets/css/blocks.css index 6a3518fa21..c71f1d1e49 100644 --- a/src/wp-content/themes/twentyseventeen/assets/css/blocks.css +++ b/src/wp-content/themes/twentyseventeen/assets/css/blocks.css @@ -97,11 +97,14 @@ p.has-drop-cap:not(:focus)::first-letter { width: 100%; } -/* Cover Image */ +/* Cover */ .wp-block-cover-image.alignright, +.wp-block-cover.alignright, .wp-block-cover-image.alignleft, -.wp-block-cover-image.aligncenter { +.wp-block-cover.alignleft, +.wp-block-cover-image.aligncenter, +.wp-block-cover.aligncenter { display: flex; } @@ -219,10 +222,29 @@ p.has-drop-cap:not(:focus)::first-letter { max-width: 100px; } +/* Media & Text */ + +.wp-block-media-text { + margin-bottom: 1.5em; +} + +.wp-block-media-text *:last-child { + margin-bottom: 0; +} + /*-------------------------------------------------------------- 5.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; +} + /* Comments */ .wp-block-latest-comments article { diff --git a/src/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css b/src/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css index f9e3d66edd..32cabe1b15 100644 --- a/src/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css +++ b/src/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css @@ -25,6 +25,10 @@ Description: Used to style Gutenberg Blocks in the editor. font-size: 0.9375rem; } +.editor-default-block-appender input[type="text"].editor-default-block-appender__content { + font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif; +} + .edit-post-visual-editor .editor-block-list__block { color: #333; } @@ -346,10 +350,12 @@ html[lang="th"] .edit-post-visual-editor * { /* Main column width */ -body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block, -body.gutenberg-editor-page .edit-post-visual-editor .editor-default-block-appender, -body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block { - max-width: 740px; +.editor-styles-wrapper { + max-width: 100% !important; /* Override where editor-style.css is affecting this. */ +} + +.wp-block { + max-width: 674px; /* Based on one-column post width; 644px + 30px to account for padding. */ } /* Background color */ @@ -695,7 +701,7 @@ table.wp-block-table td:last-child { 5.0 Blocks - Layout Elements --------------------------------------------------------------*/ -/* Separators */ +/* Separator */ .edit-post-visual-editor .wp-block-separator { border: 0; @@ -721,10 +727,25 @@ table.wp-block-table td:last-child { transition: background-color 0.2s ease-in-out; white-space: nowrap; } + +/* Media & Text */ + +.wp-block-media-text *:last-child { + margin-bottom: 0; +} + /*-------------------------------------------------------------- 6.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; +} + /* Latest Comments */ .editor-block-list__block ol.wp-block-latest-comments > li:before { diff --git a/src/wp-content/themes/twentysixteen/css/blocks.css b/src/wp-content/themes/twentysixteen/css/blocks.css index f72500d785..11ac299230 100644 --- a/src/wp-content/themes/twentysixteen/css/blocks.css +++ b/src/wp-content/themes/twentysixteen/css/blocks.css @@ -76,6 +76,13 @@ p.has-drop-cap:not(:focus)::first-letter { width: 100%; } +/* Cover */ + +.wp-block-cover-image.aligncenter, +.wp-block-cover.aligncenter { + display: flex; +} + /* File */ .wp-block-file .wp-block-file__button { @@ -240,10 +247,29 @@ hr.wp-block-separator { max-width: 100%; } +/* Media & Text */ + +.wp-block-media-text { + margin-bottom: 1.75em; +} + +.wp-block-media-text *:last-child { + margin-bottom: 0; +} + /*-------------------------------------------------------------- 5.0 Blocks - Widget Blocks --------------------------------------------------------------*/ +/* 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__comment-meta a { diff --git a/src/wp-content/themes/twentysixteen/css/editor-blocks.css b/src/wp-content/themes/twentysixteen/css/editor-blocks.css index cb3a4d0515..1d020c72b3 100644 --- a/src/wp-content/themes/twentysixteen/css/editor-blocks.css +++ b/src/wp-content/themes/twentysixteen/css/editor-blocks.css @@ -20,7 +20,6 @@ Description: Used to style Gutenberg Blocks in the editor. .edit-post-visual-editor .editor-block-list__block, .editor-default-block-appender input[type="text"].editor-default-block-appender__content { - color: #1a1a1a; font-family: Merriweather, Georgia, serif; font-size: 16px; font-size: 1rem; @@ -173,10 +172,12 @@ Description: Used to style Gutenberg Blocks in the editor. /* Main column width */ -body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block, -body.gutenberg-editor-page .edit-post-visual-editor .editor-default-block-appender, -body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block { - max-width: 630px; /* 600px + 30px for padding; should be 840px for pages */ +.editor-styles-wrapper { + max-width: 100% !important; /* Override where editor-style.css is affecting this */ +} + +.wp-block { + max-width: 630px; /* 600px + 30px to account for padding. */ } /* Link styles */ @@ -535,6 +536,7 @@ body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block { --------------------------------------------------------------*/ /* Buttons */ + .wp-block-button .wp-block-button__link { background: #1a1a1a; border: 0; @@ -548,10 +550,24 @@ body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block { text-transform: uppercase; } +/* Media & Text */ + +.wp-block-media-text *:last-child { + margin-bottom: 0; +} + /*-------------------------------------------------------------- 6.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; +} + /* Latest Comments */ .editor-block-list__block .wp-block-latest-comments__comment-meta a { diff --git a/src/wp-content/themes/twentyten/blocks.css b/src/wp-content/themes/twentyten/blocks.css index ff6d16ab04..c09da9f426 100644 --- a/src/wp-content/themes/twentyten/blocks.css +++ b/src/wp-content/themes/twentyten/blocks.css @@ -155,21 +155,18 @@ p.has-drop-cap:not(:focus)::first-letter { 4.0 Blocks - Layout Elements --------------------------------------------------------------*/ -/* Columns */ - -.wp-block-columns { - margin: 0 -0.5em; -} -.wp-block-column { - margin: 0 0.5em; -} - /* Separator */ .wp-block-separator { border: 0; } +/* Media & Text */ + +.wp-block-media-text { + margin-bottom: 24px; +} + /*-------------------------------------------------------------- 5.0 Blocks - Widgets --------------------------------------------------------------*/ diff --git a/src/wp-content/themes/twentyten/editor-blocks.css b/src/wp-content/themes/twentyten/editor-blocks.css index c1fde50bb5..57825421cb 100644 --- a/src/wp-content/themes/twentyten/editor-blocks.css +++ b/src/wp-content/themes/twentyten/editor-blocks.css @@ -17,6 +17,16 @@ Description: Used to style Gutenberg Blocks in the editor. 1.0 General Typography --------------------------------------------------------------*/ +.edit-post-visual-editor .editor-block-list__block, +.edit-post-visual-editor .editor-block-list__block p, +.editor-default-block-appender input[type="text"].editor-default-block-appender__content { + font-size: 16px; +} + +.editor-default-block-appender input[type="text"].editor-default-block-appender__content { + font-family: Georgia, "Bitstream Charter", serif; +} + .edit-post-visual-editor .editor-block-list__block .mce-content-body, .wp-block-freeform.block-library-rich-text__tinymce p, .wp-block-freeform.block-library-rich-text__tinymce li { @@ -65,10 +75,8 @@ Description: Used to style Gutenberg Blocks in the editor. /* Main column width */ -body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block, -body.gutenberg-editor-page .edit-post-visual-editor .editor-default-block-appender, -body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block { - max-width: 670px; /* 640px + 30px for padding */ +.wp-block { + max-width: 670px; /* 640px + 30px to account for padding */ } /* Link styles */ @@ -218,9 +226,10 @@ p.has-drop-cap:not(:focus)::first-letter { font-size: 18px; } -/* Cover Image */ +/* Cover */ -.wp-block-cover-image-text { +.wp-block-cover-image-text, +.wp-block-cover-text { font-size: 32px; } diff --git a/src/wp-content/themes/twentythirteen/css/blocks.css b/src/wp-content/themes/twentythirteen/css/blocks.css index 357fbba74e..e21e6935d9 100644 --- a/src/wp-content/themes/twentythirteen/css/blocks.css +++ b/src/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/src/wp-content/themes/twentythirteen/css/editor-blocks.css b/src/wp-content/themes/twentythirteen/css/editor-blocks.css index 3fb363db03..af2479e466 100644 --- a/src/wp-content/themes/twentythirteen/css/editor-blocks.css +++ b/src/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/src/wp-content/themes/twentytwelve/css/blocks.css b/src/wp-content/themes/twentytwelve/css/blocks.css index b3e3efb783..f197481906 100644 --- a/src/wp-content/themes/twentytwelve/css/blocks.css +++ b/src/wp-content/themes/twentytwelve/css/blocks.css @@ -127,9 +127,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 { display: flex; } @@ -296,10 +297,30 @@ pre.wp-block-code { border: 0; } +/* Media & Text */ + +.wp-block-media-text { + margin-bottom: 24px; + margin-bottom: 1.714285714rem; +} + +.wp-block-media-text *:last-child { + margin-bottom: 0; +} + /*-------------------------------------------------------------- 5.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/src/wp-content/themes/twentytwelve/css/editor-blocks.css b/src/wp-content/themes/twentytwelve/css/editor-blocks.css index fc3cf223fa..7b40361ed0 100644 --- a/src/wp-content/themes/twentytwelve/css/editor-blocks.css +++ b/src/wp-content/themes/twentytwelve/css/editor-blocks.css @@ -24,6 +24,10 @@ Description: Used to style Gutenberg Blocks in the editor. font-size: 14px; } +.editor-default-block-appender input[type="text"].editor-default-block-appender__content { + font-family: "Open Sans", Helvetica, Arial, sans-serif; +} + .edit-post-visual-editor .editor-block-list__block { color: #444; } @@ -70,10 +74,8 @@ Description: Used to style Gutenberg Blocks in the editor. /* Main column width */ -body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block, -body.gutenberg-editor-page .edit-post-visual-editor .editor-default-block-appender, -body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block { - max-width: 655px; +.wp-block { + max-width: 655px; /* 625px + 30px for padding */ } /* Link styles */ @@ -218,9 +220,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 { +.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p, +.edit-post-visual-editor .editor-block-list__block .wp-block-cover p { font-size: 28px; } @@ -359,11 +362,26 @@ p.has-drop-cap:not(:focus)::first-letter { margin-right: auto; } +/* Media & Text */ + +.wp-block-media-text *:last-child { + margin-bottom: 0; +} + /*-------------------------------------------------------------- 6.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; +} + /* Archives */ + .gutenberg ul.wp-block-archives { padding-left: 0; }