Toujours: Minor updates to the Gutenberg styles, including:

* Reorganize styles a bit, consolidate header styles, and delete empty selectors
* Update editor colour palette to match theme's colours
* Remove  styles for pre and code blocks in editor; doesn't look identical to the front-end but they blocked the text from being edited
This commit is contained in:
Laurel Fulford 2018-11-15 12:11:23 -08:00
parent 916c060d49
commit dcf18e9114
3 changed files with 238 additions and 327 deletions

View file

@ -48,6 +48,7 @@ p.has-drop-cap:not(:focus)::first-letter {
display: flex;
}
.wp-block-cover-image-text,
.wp-block-cover-text {
font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
font-weight: 300;
@ -138,6 +139,11 @@ p.has-drop-cap:not(:focus)::first-letter {
margin-right: 0;
}
/* Video */
.wp-block-video {
margin-bottom: 1.5em;
}
/*--------------------------------------------------------------
3.0 Blocks - Formatting Blocks
@ -150,6 +156,7 @@ p.has-drop-cap:not(:focus)::first-letter {
color: inherit;
font-family: inherit;
font-size: inherit;
font-style: italic;
line-height: inherit;
margin-bottom: 1.5em;
max-width: 100%;
@ -262,17 +269,9 @@ p.has-drop-cap:not(:focus)::first-letter {
transition: background-color 0.2s;
}
.wp-block-button .wp-block-button__link:active,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
}
.wp-block-button__link:not(.has-background) {
background-color: #2590ec;
}
.wp-block-button__link:not(.has-text-color) {
.wp-block-button__link {
color: #fff;
background-color: #2590ec;
}
.wp-block-button__link:not(.has-text-color):active,
@ -353,6 +352,7 @@ hr.wp-block-separator {
.wp-block-latest-comments {
margin-left: 0;
margin-right: 0;
padding: 0;
}
.wp-block-latest-comments__comment-meta a {
@ -377,7 +377,12 @@ hr.wp-block-separator {
}
.wp-block-latest-comments__comment-date {
color: #ccc;
font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
font-size: 13.5px;
font-style: normal;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Latest Posts */
@ -392,32 +397,60 @@ hr.wp-block-separator {
6.0 Blocks - Colors
--------------------------------------------------------------*/
.has-blue-color,
.has-blue-color:hover,
.has-blue-color:focus,
.has-blue-color:active {
color: #2590ec;
}
.has-blue-background-color,
.has-blue-background-color:hover,
.has-blue-background-color:focus,
.has-blue-background-color:active {
background-color: #2590ec;
}
.has-dark-gray-color,
.has-dark-gray-color:hover,
.has-dark-gray-color:focus,
.has-dark-gray-color:active {
color: #404040;
}
.has-dark-gray-background-color,
.has-dark-gray-background-color:hover,
.has-dark-gray-background-color:focus,
.has-dark-gray-background-color:active {
background-color: #404040;
}
.has-medium-gray-color,
.has-medium-gray-color:hover,
.has-medium-gray-color:focus,
.has-medium-gray-color:active {
color: #999;
color: #666;
}
.has-medium-gray-background-color,
.has-medium-gray-background-color:hover,
.has-medium-gray-background-color:focus,
.has-medium-gray-background-color:active {
background-color: #999;
background-color: #666;
}
.has-light-gray-color,
.has-light-gray-color:hover,
.has-light-gray-color:focus,
.has-light-gray-color:active {
color: #bdcbcc;
color: #ccc;
}
.has-light-gray-background-color,
.has-light-gray-background-color:hover,
.has-light-gray-background-color:focus,
.has-light-gray-background-color:active {
background-color: #bdcbcc;
background-color: #ccc;
}
.has-white-color,
@ -430,90 +463,6 @@ hr.wp-block-separator {
.has-white-background-color,
.has-white-background-color:hover,
.has-white-background-color:focus,
.has-white-background-color:active {
.has-lwhite-background-color:active {
background-color: #fff;
}
.has-orange-color,
.has-orange-color:hover,
.has-orange-color:focus,
.has-orange-color:active {
color: #d16221;
}
.has-orange-background-color,
.has-orange-background-color:hover,
.has-orange-background-color:focus,
.has-orange-background-color:active {
background-color: #d16221;
}
.has-yellow-color,
.has-yellow-color:hover,
.has-yellow-color:focus,
.has-yellow-color:active {
color: #e4b500;
}
.has-yellow-background-color,
.has-yellow-background-color:hover,
.has-yellow-background-color:focus,
.has-yellow-background-color:active {
background-color: #e4b500;
}
.has-blue-color,
.has-blue-color:hover,
.has-blue-color:focus,
.has-blue-color:active {
color: #7ba6a9;
}
.has-blue-background-color,
.has-blue-background-color:hover,
.has-blue-background-color:focus,
.has-blue-background-color:active {
background-color: #7ba6a9;
}
.has-dark-blue-color,
.has-dark-blue-color:hover,
.has-dark-blue-color:focus,
.has-dark-blue-color:active {
color: #537375;
}
.has-dark-blue-background-color,
.has-dark-blue-background-color:hover,
.has-dark-blue-background-color:focus,
.has-dark-blue-background-color:active {
background-color: #537375;
}
.has-dark-gray-color,
.has-dark-gray-color:hover,
.has-dark-gray-color:focus,
.has-dark-gray-color:active {
color: #777;
}
.has-dark-gray-background-color,
.has-dark-gray-background-color:hover,
.has-dark-gray-background-color:focus,
.has-dark-gray-background-color:active {
background-color: #777;
}
.has-black-color,
.has-black-color:hover,
.has-black-color:focus,
.has-black-color:active {
color: #222;
}
.has-black-background-color,
.has-black-background-color:hover,
.has-black-background-color:focus,
.has-black-background-color:active {
background-color: #222;
}

View file

@ -70,11 +70,17 @@
/* Headings */
.edit-post-visual-editor h1,
.wp-block-freeform.block-library-rich-text__tinymce h1,
.edit-post-visual-editor h2,
.wp-block-freeform.block-library-rich-text__tinymce h2,
.edit-post-visual-editor h3,
.wp-block-freeform.block-library-rich-text__tinymce h3,
.edit-post-visual-editor h4,
.wp-block-freeform.block-library-rich-text__tinymce h4,
.edit-post-visual-editor h5,
.edit-post-visual-editor h6 {
.wp-block-freeform.block-library-rich-text__tinymce h5,
.edit-post-visual-editor h6,
.wp-block-freeform.block-library-rich-text__tinymce h6 {
clear: both;
font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
font-weight: 300;
@ -83,33 +89,39 @@
padding: 0 0 15px;
}
.edit-post-visual-editor h1 {
.edit-post-visual-editor h1,
.wp-block-freeform.block-library-rich-text__tinymce h1 {
font-size: 40px;
}
.edit-post-visual-editor h2 {
.edit-post-visual-editor h2,
.wp-block-freeform.block-library-rich-text__tinymce h2 {
font-size: 35px;
}
.edit-post-visual-editor h3 {
.edit-post-visual-editor h3,
.wp-block-freeform.block-library-rich-text__tinymce h3{
font-size: 30px;
}
.edit-post-visual-editor h4 {
.edit-post-visual-editor h4,
.wp-block-freeform.block-library-rich-text__tinymce h4 {
font-size: 20px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.edit-post-visual-editor h5 {
.edit-post-visual-editor h5,
.wp-block-freeform.block-library-rich-text__tinymce h5 {
font-size: 18px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.edit-post-visual-editor h6 {
.edit-post-visual-editor h6,
.wp-block-freeform.block-library-rich-text__tinymce h6 {
font-size: 16px;
font-weight: 500;
letter-spacing: 0.08em;
@ -185,6 +197,26 @@
margin-left: 1.5em;
}
.wp-block-freeform.block-library-rich-text__tinymce ol {
list-style: decimal;
margin-left: 3em;
padding: 0;
}
.rtl .wp-block-freeform.block-library-rich-text__tinymce ol {
margin-right: 3em;
margin-left: 0;
}
.wp-block-freeform.block-library-rich-text__tinymce li > ol {
margin-left: 3em;
}
.rtl .wp-block-freeform.block-library-rich-text__tinymce li > ol {
margin-left: 0;
margin-right: 3em;
}
.rtl .edit-post-visual-editor ul:not(.wp-block-gallery),
.rtl .editor-block-list__block ul:not(.wp-block-gallery),
.rtl .block-library-list ul,
@ -196,6 +228,26 @@
padding: 0 40px 0 0;
}
.wp-block-freeform.block-library-rich-text__tinymce ol {
list-style: decimal;
margin-left: 3em;
padding: 0;
}
.rtl .wp-block-freeform.block-library-rich-text__tinymce ol {
margin-right: 3em;
margin-left: 0;
}
.wp-block-freeform.block-library-rich-text__tinymce li > ol {
margin-left: 3em;
}
.rtl .wp-block-freeform.block-library-rich-text__tinymce li > ol {
margin-left: 0;
margin-right: 3em;
}
/* Captions */
[class^="wp-block-"] figcaption,
@ -238,6 +290,108 @@
text-decoration: none;
}
/* Address styles */
.wp-block-freeform.block-library-rich-text__tinymce address {
margin-bottom: 1.5em;
}
/* Blockquote styles */
.wp-block-freeform.block-library-rich-text__tinymce blockquote {
color: #888;
border-left: 4px solid #f0f0f0;
margin: 0 0 1.5em;
padding: 0 0 0 30px;
}
.wp-block-freeform.block-library-rich-text__tinymce blockquote > :last-child {
margin-bottom: 0;
}
.wp-block-freeform.block-library-rich-text__tinymce blockquote cite {
display: block;
font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 300;
margin-top: 5px;
}
.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote {
border: 0;
border-right: 4px solid #f0f0f0;
padding-left: 0;
padding-right: 30px;
}
/* Alignments */
.rtl .wp-block-freeform.block-library-rich-text__tinymce .alignleft {
float: left;
}
.rtl .wp-block-freeform.block-library-rich-text__tinymce .alignright {
float: right;
}
.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft {
margin: .75em 1.5em .75em 0;
}
.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
margin: .75em 0 .75em 1.5em;
}
/* Pre styles */
.wp-block-freeform.block-library-rich-text__tinymce pre {
background: #333;
color: #ddd;
font-family: "Courier 10 Pitch", Courier, monospace;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
position: relative;
}
/* Table styles */
.wp-block-freeform.block-library-rich-text__tinymce table {
border: 0;
border-bottom: 4px double #e1e1e1;
border-top: 4px double #e1e1e1;
margin: 0 0 30px;
max-width: 100%;
overflow: auto;
width: 100%;
}
.wp-block-freeform.block-library-rich-text__tinymce table tr {
border-bottom: 1px solid #e1e1e1;
}
.wp-block-freeform.block-library-rich-text__tinymce table td,
.wp-block-freeform.block-library-rich-text__tinymce table th {
border: 0;
border-bottom: 1px solid #e1e1e1;
font-size: 90%;
padding: 10px;
text-align: left;
}
.wp-block-freeform.block-library-rich-text__tinymce table tr:last-child td,
.wp-block-freeform.block-library-rich-text__tinymce table tr:last-child th {
border-bottom: 0;
}
.rtl .wp-block-freeform.block-library-rich-text__tinymce table td,
.rtl .wp-block-freeform.block-library-rich-text__tinymce table th {
text-align: right;
}
/*--------------------------------------------------------------
3.0 Blocks - Common Blocks
--------------------------------------------------------------*/
@ -352,7 +506,7 @@
.wp-block-cover .wp-block-cover-text,
.wp-block-cover h2 {
font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
font-weight: 300;
font-size: 2em;
}
/* File */
@ -361,6 +515,11 @@
margin: 0 0 1.5em;
}
.wp-block-file__textlink {
color: #2590ec;
text-decoration: underline;
}
.wp-block-file .wp-block-file__button {
background-color: #2590ec;
border: 0;
@ -384,6 +543,10 @@
background-color: #444;
}
.wp-block-button .editor-rich-text__tinymce.mce-content-body {
line-height: 1;
}
.rtl .wp-block-file .wp-block-file__button {
margin-left: 15px;
margin-right: 0;
@ -400,6 +563,7 @@
color: inherit;
font-family: inherit;
font-size: inherit;
font-style: italic;
line-height: inherit;
margin-bottom: 1.5em;
max-width: 100%;
@ -409,17 +573,6 @@
/* Code */
.wp-block-code:before {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 3px;
content: "";
display: block;
left: 3px;
position: absolute;
right: 3px;
top: 3px;
}
.wp-block-code {
background: #333;
color: #ddd;
@ -443,187 +596,8 @@
overflow: visible;
}
.wp-block-freeform.block-library-rich-text__tinymce address {
margin-bottom: 1.5em;
}
.wp-block-freeform.block-library-rich-text__tinymce ol {
list-style: decimal;
margin-left: 3em;
padding: 0;
}
.rtl .wp-block-freeform.block-library-rich-text__tinymce ol {
margin-right: 3em;
margin-left: 0;
}
.wp-block-freeform.block-library-rich-text__tinymce li > ol {
margin-left: 3em;
}
.rtl .wp-block-freeform.block-library-rich-text__tinymce li > ol {
margin-left: 0;
margin-right: 3em;
}
.wp-block-freeform.block-library-rich-text__tinymce blockquote {
color: #888;
border-left: 4px solid #f0f0f0;
margin: 0 0 1.5em;
padding: 0 0 0 30px;
}
.wp-block-freeform.block-library-rich-text__tinymce blockquote > :last-child {
margin-bottom: 0;
}
.wp-block-freeform.block-library-rich-text__tinymce blockquote cite {
display: block;
font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 300;
margin-top: 5px;
}
.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote {
border: 0;
border-right: 4px solid #f0f0f0;
padding-left: 0;
padding-right: 70px;
}
.rtl .wp-block-freeform.block-library-rich-text__tinymce .alignleft {
float: left;
}
.rtl .wp-block-freeform.block-library-rich-text__tinymce .alignright {
float: right;
}
.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft {
margin: .75em 1.5em .75em 0;
}
.rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
margin: .75em 0 .75em 1.5em;
}
.wp-block-freeform.block-library-rich-text__tinymce h1,
.wp-block-freeform.block-library-rich-text__tinymce h2,
.wp-block-freeform.block-library-rich-text__tinymce h3,
.wp-block-freeform.block-library-rich-text__tinymce h4,
.wp-block-freeform.block-library-rich-text__tinymce h5,
.wp-block-freeform.block-library-rich-text__tinymce h6 {
clear: both;
font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
font-weight: 300;
line-height: 1.2;
margin: 0;
padding: 0 0 15px;
}
.wp-block-freeform.block-library-rich-text__tinymce h1 {
font-size: 40px;
}
.wp-block-freeform.block-library-rich-text__tinymce h2 {
font-size: 35px;
}
.wp-block-freeform.block-library-rich-text__tinymce h3 {
font-size: 30px;
}
.wp-block-freeform.block-library-rich-text__tinymce h4 {
font-size: 20px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wp-block-freeform.block-library-rich-text__tinymce h5 {
font-size: 18px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wp-block-freeform.block-library-rich-text__tinymce h6 {
font-size: 16px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.wp-block-freeform.block-library-rich-text__tinymce pre:before {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 3px;
content: "";
display: block;
left: 3px;
position: absolute;
right: 3px;
top: 3px;
}
.wp-block-freeform.block-library-rich-text__tinymce pre {
color: #777;
background: #eee;
font-family: "Courier 10 Pitch", Courier, monospace;
font-size: 15px;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
}
.wp-block-freeform.block-library-rich-text__tinymce table {
border-bottom: 4px double #e1e1e1;
border-top: 4px double #e1e1e1;
margin: 0 0 30px;
max-width: 100%;
overflow: auto;
width: 100%;
}
.wp-block-freeform.block-library-rich-text__tinymce .alternate {
background: transparent;
}
.wp-block-freeform.block-library-rich-text__tinymce table tr {
border-bottom: 1px solid #e1e1e1;
}
.wp-block-freeform.block-library-rich-text__tinymce table td,
.wp-block-freeform.block-library-rich-text__tinymce table th {
border: 0;
font-size: 90%;
padding: 10px;
text-align: left;
}
.rtl .wp-block-freeform.block-library-rich-text__tinymce table td,
.rtl .wp-block-freeform.block-library-rich-text__tinymce table th {
text-align: right;
}
/* Preformatted */
.editor-block-list__block .wp-block-preformatted pre:before {
border: 1px solid rgba(255, 255, 255, 0.4);
bottom: 3px;
content: "";
display: block;
left: 3px;
position: absolute;
right: 3px;
top: 3px;
}
.editor-block-list__block .wp-block-preformatted pre {
background: #333;
color: #ddd;
@ -851,9 +825,17 @@
}
.wp-block-latest-comments .wp-block-latest-comments__comment {
border-top: 1px solid #ccc;
margin-bottom: 0;
padding: .75em 0;
padding: 1em 0;
}
.wp-block-latest-comments__comment-date {
font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
font-size: 13.5px;
font-style: normal;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.rtl ol.wp-block-latest-comments {

View file

@ -42,50 +42,30 @@ function toujours_setup() {
add_theme_support(
'editor-color-palette', array(
array(
'name' => esc_html__( 'Black', 'toujours' ),
'slug' => 'black',
'color' => '#222222',
'name' => esc_html__( 'Blue', 'toujours' ),
'slug' => 'blue',
'color' => '#2590ec',
),
array(
'name' => esc_html__( 'Dark Gray', 'toujours' ),
'slug' => 'dark-gray',
'color' => '#777777',
'color' => '#404040',
),
array(
'name' => esc_html__( 'Medium Gray', 'toujours' ),
'slug' => 'medium-gray',
'color' => '#999999',
'color' => '#666',
),
array(
'name' => esc_html__( 'Light Gray', 'toujours' ),
'slug' => 'light-gray',
'color' => '#bdcbcc',
'color' => '#eee',
),
array(
'name' => esc_html__( 'White', 'toujours' ),
'slug' => 'white',
'color' => '#ffffff',
'color' => '#fff',
),
array(
'name' => esc_html__( 'Blue', 'toujours' ),
'slug' => 'blue',
'color' => '#7ba6a9',
),
array(
'name' => esc_html__( 'Dark Blue', 'toujours' ),
'slug' => 'dark-blue',
'color' => '#537375',
),
array(
'name' => esc_html__( 'Orange', 'toujours' ),
'slug' => 'orange',
'color' => '#d16221',
),
array(
'name' => esc_html__( 'Yellow', 'toujours' ),
'slug' => 'yellow',
'color' => '#e4b500',
),
)
);