Changeset 43874

Timestamp:

11/06/2018 05:56:54 AM (6 years ago)

Author:

laurelfulford

Message:

Twenty Fifteen: Fix issues with theme's Gutenberg support.

A handful of issues were missed in Twenty Fifteen's Gutenberg support, added in #45043. This commit includes the following fixes:

• Center text and bullets in list-based widget blocks, when block itself is centered.
• Add a margin to blocks that are aligned to the left or to the right, to create space.
• Include non "image" variations of the Cover block classes .wp-block-cover and .wp-block-cover-text in the styles.
• 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.
• Prevent margin from theme's editor-style.css from interfering with editor alignment.

Props pento, davidakennedy.
Fixes #45244.

Location:

branches/5.0/src/wp-content/themes/twentyfifteen/css

Files:

• blocks.css (modified) (4 diffs)
• editor-blocks.css (modified) (3 diffs)

branches/5.0/src/wp-content/themes/twentyfifteen/css/blocks.css

@@ -60 +60 @@
 }
 
+/* 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
@@ -83 +96 @@
 }
 
-/* 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;
@@ -188 +203 @@
 
 .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;
 }
@@ -440 +458 @@
 }
 
+/* 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 */

branches/5.0/src/wp-content/themes/twentyfifteen/css/editor-blocks.css

@@ -306 +306 @@
 /* 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. */
 }
 
@@ -557 +559 @@
 }
 
-/* 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 */
@@ -765 +768 @@
 }
 
+/* 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 */