Publication: Minor tweaks to Gutenberg styles and support, including:
* Add spacing under audio, media & text blocks * Removed empty selectors * Add border below captions to match non-block content * Make sure all centred widgets are styled the same * Add styles for definition lists in editor * Remove border, border radius from code block in editor * Add styles to link in file block in editor.
This commit is contained in:
Laurel Fulford
parent
39bf75c149
commit
a9fb9aa02e
2 changed files with 107 additions and 50 deletions
|
|
@ -38,6 +38,7 @@ Description: Used to style Gutenberg Blocks.
|
|||
|
||||
.no-sidebar .wp-block-columns.alignfull,
|
||||
.no-sidebar .wp-block-latest-comments.alignfull,
|
||||
.no-sidebar .wp-block-archives.alignfull,
|
||||
.no-sidebar .wp-block-categories.alignfull,
|
||||
.no-sidebar .wp-block-archives.alignfull,
|
||||
.no-sidebar .wp-block-latest-posts.alignfull,
|
||||
|
|
@ -81,6 +82,12 @@ Description: Used to style Gutenberg Blocks.
|
|||
line-height: 1.3847;
|
||||
}
|
||||
|
||||
[class^="wp-block-"]:not(.wp-block-gallery) figcaption {
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 0;
|
||||
padding: 0 0 0.5em;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
2.0 Blocks - Common Blocks
|
||||
--------------------------------------------------------------*/
|
||||
|
|
@ -169,6 +176,10 @@ p.has-drop-cap:not(:focus)::first-letter {
|
|||
|
||||
/* Audio */
|
||||
|
||||
.wp-block-audio {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.wp-block-audio audio {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -263,10 +274,6 @@ p.has-drop-cap:not(:focus)::first-letter {
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.wp-block-pullquote.alignleft,
|
||||
.wp-block-pullquote.alignright {
|
||||
}
|
||||
|
||||
.wp-block-pullquote.alignleft blockquote,
|
||||
.wp-block-pullquote.alignright blockquote {
|
||||
padding: 12px 0;
|
||||
|
|
@ -296,6 +303,12 @@ p.has-drop-cap:not(:focus)::first-letter {
|
|||
line-height: 34px;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
|
||||
.no-sidebar .wp-block-table.alignfull {
|
||||
width: 96vw;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
4.0 Blocks - Layout Elements
|
||||
--------------------------------------------------------------*/
|
||||
|
|
@ -366,18 +379,34 @@ hr.wp-block-separator {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Media & Text */
|
||||
|
||||
.wp-block-media-text {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.wp-block-media-text *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
5.0 Blocks - Widget Blocks
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/* Categories */
|
||||
/* Categories, Latest Posts & Archives */
|
||||
|
||||
.wp-block-categories.aligncenter {
|
||||
.wp-block-categories.aligncenter,
|
||||
.wp-block-categories.aligncenter ul,
|
||||
.wp-block-latest-posts.aligncenter,
|
||||
.wp-block-archives.aligncenter {
|
||||
list-style-position: inside;
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Categories */
|
||||
|
||||
.wp-block-categories-list.alignleft {
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
|
@ -529,4 +558,4 @@ hr.wp-block-separator {
|
|||
.has-black-background-color:focus,
|
||||
.has-black-background-color:active {
|
||||
background-color: #222;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,31 +27,8 @@
|
|||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.alignleft,
|
||||
.editor-block-list__layout .editor-block-list__block[data-align=left] .editor-block-list__block-edit {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin: 0 24px 12px 0;
|
||||
}
|
||||
|
||||
.alignright,
|
||||
.editor-block-list__layout .editor-block-list__block[data-align=right] .editor-block-list__block-edit {
|
||||
display: inline;
|
||||
float: right;
|
||||
margin: 0 0 12px 24px;
|
||||
}
|
||||
|
||||
.aligncenter,
|
||||
.editor-block-list__layout .editor-block-list__block[data-align=center] .editor-block-list__block-edit {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.wp-block-columns.alignfull,
|
||||
.wp-block-latest-comments.alignfull,
|
||||
.editor-block-list__layout .editor-block-list__block[data-align=full] {
|
||||
padding-left: 60px;
|
||||
padding-right: 60px;
|
||||
.edit-post-visual-editor p {
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
/* Title */
|
||||
|
|
@ -111,16 +88,6 @@
|
|||
line-height: 1.3847;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
|
||||
.wp-block-image figcaption {
|
||||
color: #a09a92;
|
||||
font-size: 16px;
|
||||
font-style: italic;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
2.0 General Block Styles
|
||||
--------------------------------------------------------------*/
|
||||
|
|
@ -131,6 +98,35 @@
|
|||
max-width: 594px; /* 564px + 30px to account for padding */
|
||||
}
|
||||
|
||||
/* Alignments */
|
||||
|
||||
.alignleft,
|
||||
.editor-block-list__layout .editor-block-list__block[data-align=left] .editor-block-list__block-edit {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin: 0 24px 12px 0;
|
||||
}
|
||||
|
||||
.alignright,
|
||||
.editor-block-list__layout .editor-block-list__block[data-align=right] .editor-block-list__block-edit {
|
||||
display: inline;
|
||||
float: right;
|
||||
margin: 0 0 12px 24px;
|
||||
}
|
||||
|
||||
.aligncenter,
|
||||
.editor-block-list__layout .editor-block-list__block[data-align=center] .editor-block-list__block-edit {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.wp-block-columns.alignfull,
|
||||
.wp-block-latest-comments.alignfull,
|
||||
.editor-block-list__layout .editor-block-list__block[data-align=full] {
|
||||
padding-left: 60px;
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
/* Link styles */
|
||||
|
||||
.edit-post-visual-editor a,
|
||||
|
|
@ -138,7 +134,6 @@
|
|||
.wp-block-freeform.block-library-rich-text__tinymce a {
|
||||
color: #ef7d0b;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.edit-post-visual-editor a:hover,
|
||||
|
|
@ -205,11 +200,34 @@
|
|||
|
||||
/* Captions */
|
||||
|
||||
[class^="wp-block-"] figcaption {
|
||||
.editor-block-list__block [class^="wp-block-"] figcaption {
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
line-height: 1.3847;
|
||||
}
|
||||
|
||||
[class^="wp-block-"]:not(.wp-block-gallery) figcaption {
|
||||
border-bottom: 1px solid #eee;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
padding: 0 0 0.5em;
|
||||
}
|
||||
|
||||
.edit-post-visual-editor blockquote p {
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
/* Definition List styles */
|
||||
|
||||
.wp-block-freeform.block-library-rich-text__tinymce dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.wp-block-freeform.block-library-rich-text__tinymce dd {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
3.0 Blocks - Common Blocks
|
||||
--------------------------------------------------------------*/
|
||||
|
|
@ -221,12 +239,14 @@
|
|||
font-size: 80px;
|
||||
}
|
||||
|
||||
.edit-post-visual-editor p {
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
/* Images */
|
||||
|
||||
.edit-post-visual-editor blockquote p {
|
||||
margin: 0 0 24px;
|
||||
.wp-block-image figcaption {
|
||||
color: #a09a92;
|
||||
font-size: 16px;
|
||||
font-style: italic;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Quote */
|
||||
|
|
@ -316,6 +336,12 @@
|
|||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
.wp-block-file__textlink {
|
||||
color: #ef7d0b;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.wp-block-file .wp-block-file__button {
|
||||
background: #ef7d0b;
|
||||
border: 0;
|
||||
|
|
@ -362,6 +388,8 @@
|
|||
|
||||
.wp-block-code {
|
||||
background: #eee;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
font-family: Inconsolata, monospace;
|
||||
font-size: 16px;
|
||||
max-width: 100%;
|
||||
|
|
@ -772,4 +800,4 @@
|
|||
|
||||
.edit-post-visual-editor .wp-block-latest-posts.is-grid li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue