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
This commit is contained in:
laurelfulford
parent
8362e6601e
commit
b61dd6109c
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Reference in New Issue