mirror_php/wordpress
1
0
Fork 0
mirror of git://develop.git.wordpress.org/ synced 2025-01-17 12:58:25 +01:00
Code Issues Actions 98 Packages Projects Releases Wiki Activity

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

Browse Source 
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.



git-svn-id: https://develop.svn.wordpress.org/branches/5.0@43874 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
laurelfulford 2018-11-06 05:56:54 +00:00
parent 8c14472b97
commit b36494e4a7
2 changed files with 65 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/wp-content/themes/twentyfifteen/css/blocks.css
View File

@ -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 {

32
src/wp-content/themes/twentyfifteen/css/editor-blocks.css
View File

@ -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 {