Libre 2: Minor fixes to Gutenberg implementation, including:

* Update selectors for buttons, custom colours.
* Correct caption styles on front-end and in editor.
* Remove spacing around figure elements in editor.
This commit is contained in:
Laurel Fulford 2018-11-21 17:41:44 -08:00
parent 13b7ad96bd
commit ced40cef8b
2 changed files with 78 additions and 14 deletions

View file

@ -77,11 +77,43 @@ Description: Used to style Gutenberg Blocks.
figure[class^="wp-block-"]:not(.aligncenter):not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull),
[class^="wp-block-"]:not(.aligncenter):not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull) figure,
[class^="wp-block-"] figure:not(.aligncenter):not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull), {
[class^="wp-block-"] figure:not(.aligncenter):not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull) {
margin-left: 0;
margin-right: 0;
}
/* Captions */
[class^="wp-block-"] figcaption {
color: inherit;
font-size: 14px;
font-style: italic;
position: relative;
}
[class^="wp-block-"]:not(.wp-block-gallery) figcaption {
text-align: left;
}
[class^="wp-block-"]:not(.wp-block-gallery) figcaption::after {
border-top: 1px solid;
clear: both;
content: "";
display: block;
margin-top: .875em;
padding-top: .875em;
width: 25%;
}
[class^="wp-block-"].alignfull:not(.wp-block-gallery) figcaption {
padding-left: 2vw;
padding-right: 2vw;
}
.rtl [class^="wp-block-"]:not(.wp-block-gallery) figcaption {
text-align: right;
}
/*--------------------------------------------------------------
3.0 Blocks - Common Blocks
--------------------------------------------------------------*/
@ -270,16 +302,9 @@ p.has-drop-cap:not(:focus)::first-letter {
box-shadow: 0 2px 0 0 currentColor;
}
.wp-block-button .wp-block-button__link:not(.has-background) {
background: transparent;
padding: 0.21875em 0;
}
.wp-block-button .wp-block-button__link:not(.has-color) {
color: #404040;
}
.wp-block-button__link {
background: transparent;
color: #404040;
border: 0 none;
font-size: 18px;
font-size: 1rem;
@ -287,6 +312,10 @@ p.has-drop-cap:not(:focus)::first-letter {
transition: 0.2s;
}
.wp-block-button .wp-block-button__link:not(.has-background) {
padding: 0.21875em 0;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link:active {

View file

@ -133,6 +133,33 @@ Description: Used to style Gutenberg Blocks in the editor.
transition: 0.2s;
}
/* Caption styles */
[class^="wp-block-"] figcaption {
color: inherit;
font-size: 14px;
font-style: italic;
position: relative;
}
[class^="wp-block-"]:not(.wp-block-gallery) figcaption {
text-align: left;
}
[class^="wp-block-"]:not(.wp-block-gallery) figcaption::after {
border-top: 1px solid;
clear: both;
content: "";
display: block;
margin-top: .875em;
padding-top: .875em;
width: 25%;
}
.rtl [class^="wp-block-"]:not(.wp-block-gallery) figcaption {
text-align: right;
}
/* Table styles */
.wp-block-freeform.block-library-rich-text__tinymce table,
@ -204,8 +231,9 @@ Description: Used to style Gutenberg Blocks in the editor.
/* Pre styles */
.wp-block-freeform.block-library-rich-text__tinymce pre {
.editor-styles-wrapper .wp-block-freeform.block-library-rich-text__tinymce pre {
font-family: "Libre Baskerville", Libre, Georgia, Times, serif;
font-size: inherit;
}
/*--------------------------------------------------------------
@ -312,6 +340,13 @@ p.has-drop-cap:not(:focus)::first-letter {
}
}
/* Audio */
.editor-styles-wrapper .wp-block-audio {
margin-left: 0;
margin-right: 0;
}
/* Cover */
.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image .wp-block-cover-image-text,
@ -384,8 +419,8 @@ p.has-drop-cap:not(:focus)::first-letter {
/* Preformatted */
.wp-block-preformatted pre {
font-family: "Libre Baskerville", Libre, Georgia, Times, serif
.editor-styles-wrapper .wp-block-preformatted pre {
font-family: "Libre Baskerville", Libre, Georgia, Times, serif;
}
/* Pullquote */