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

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 {

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,
+.wp-block {
-.edit-post-visual-editor .editor-default-block-appender,
+	max-width: 634px; /* 604px + 30px to account for padding */
-.edit-post-visual-editor .editor-block-list__block {
+}
-	max-width: 634px; /* 604 + 30 for editor block 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 {

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.