Skip to content

Commit

Permalink
Penscratch: Update editor styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@scruffian
scruffian committed Feb 16, 2021
1 parent 3fa9d68 commit c1384d9
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 56 deletions.
79 changes: 39 additions & 40 deletions penscratch-2/css/editor-blocks.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,32 +19,32 @@ Description: Used to style Gutenberg Blocks in the editor.
1.0 General Typography
--------------------------------------------------------------*/

.edit-post-visual-editor .editor-block-list__block,
.block-editor-block-list__block,
.editor-default-block-appender textarea.editor-default-block-appender__content {
font-family: "Roboto Slab", Georgia, Times, serif;
}

/* Font size */

.edit-post-visual-editor .editor-block-list__block,
.edit-post-visual-editor .editor-block-list__block p,
.block-editor-block-list__block,
.block-editor-block-list__block p,
.editor-default-block-appender textarea.editor-default-block-appender__content {
font-size: 15px;
font-weight: 300;
line-height: 1.7em;
}

@media (min-width: 50em) {
.edit-post-visual-editor .editor-block-list__block,
.edit-post-visual-editor .editor-block-list__block p,
.block-editor-block-list__block,
.block-editor-block-list__block p,
.editor-default-block-appender textarea.editor-default-block-appender__content {
font-size: 18px;
}
}

/* Colour */

.edit-post-visual-editor .editor-block-list__block {
.block-editor-block-list__block {
color: #666;
}

Expand All @@ -65,69 +65,69 @@ Description: Used to style Gutenberg Blocks in the editor.

/* Headings */

.edit-post-visual-editor h1,
h1,
.wp-block-freeform.block-library-rich-text__tinymce h1,
.edit-post-visual-editor h2,
h2,
.wp-block-freeform.block-library-rich-text__tinymce h2,
.edit-post-visual-editor h3,
h3,
.wp-block-freeform.block-library-rich-text__tinymce h3,
.edit-post-visual-editor h4,
h4,
.wp-block-freeform.block-library-rich-text__tinymce h4,
.edit-post-visual-editor h5,
h5,
.wp-block-freeform.block-library-rich-text__tinymce h5,
.edit-post-visual-editor h6,
h6,
.wp-block-freeform.block-library-rich-text__tinymce h6 {
color: #666;
font-weight: normal
}

.edit-post-visual-editor h1,
h1,
.wp-block-freeform.block-library-rich-text__tinymce h1 {
font-size: 28px;
}

.edit-post-visual-editor h2,
h2,
.wp-block-freeform.block-library-rich-text__tinymce h2 {
font-size: 20px;
}

.edit-post-visual-editor h3,
h3,
.wp-block-freeform.block-library-rich-text__tinymce h3 {
font-size: 20px;
}

.edit-post-visual-editor h4,
h4,
.wp-block-freeform.block-library-rich-text__tinymce h4 {
font-size: 16px;
}

.edit-post-visual-editor h5,
h5,
.wp-block-freeform.block-library-rich-text__tinymce h5 {
font-size: 16px;
}

.edit-post-visual-editor h6,
h6,
.wp-block-freeform.block-library-rich-text__tinymce h6 {
font-size: 14px;
}

@media (min-width: 50em) {
.edit-post-visual-editor h1,
h1,
.wp-block-freeform.block-library-rich-text__tinymce h1 {
font-size: 32px;
}

.edit-post-visual-editor h2,
h2,
.wp-block-freeform.block-library-rich-text__tinymce h2 {
font-size: 28px;
}

.edit-post-visual-editor h3,
h3,
.wp-block-freeform.block-library-rich-text__tinymce h3 {
font-size: 24px;
}

.edit-post-visual-editor h4,
h4,
.wp-block-freeform.block-library-rich-text__tinymce h4 {
font-size: 20px;
}
Expand All @@ -145,8 +145,8 @@ Description: Used to style Gutenberg Blocks in the editor.

/* Link styles */

.edit-post-visual-editor a,
.editor-block-list__block a,
a,
.block-editor-block-list__block a,
.wp-block-freeform.block-library-rich-text__tinymce a {
color: #1c7c7c;
text-decoration: none;
Expand Down Expand Up @@ -344,12 +344,12 @@ p.has-drop-cap:not(:focus)::first-letter {
right: 0;
}

.edit-post-visual-editor .editor-block-list__block .wp-block-quote p {
.block-editor-block-list__block .wp-block-quote p {
color: #999;
}

.edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-large p,
.edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-style-large p {
.block-editor-block-list__block .wp-block-quote.is-large p,
.block-editor-block-list__block .wp-block-quote.is-style-large p {
font-size: 22px;
font-style: normal;
}
Expand Down Expand Up @@ -387,12 +387,12 @@ p.has-drop-cap:not(:focus)::first-letter {
font-size: 72px;
}

.edit-post-visual-editor .editor-block-list__block .wp-block-quote p {
.block-editor-block-list__block .wp-block-quote p {
font-size: 21.6px;
}

.edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-large p,
.edit-post-visual-editor .editor-block-list__block .wp-block-quote.is-style-large p {
.block-editor-block-list__block .wp-block-quote.is-large p,
.block-editor-block-list__block .wp-block-quote.is-style-large p {
font-size: 28px;
}

Expand All @@ -404,12 +404,12 @@ p.has-drop-cap:not(:focus)::first-letter {

/* Cover */

.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image .wp-block-cover-image-text,
.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image .wp-block-cover-text,
.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image h2,
.edit-post-visual-editor .editor-block-list__block .wp-block-cover .wp-block-cover-image-text,
.edit-post-visual-editor .editor-block-list__block .wp-block-cover .wp-block-cover-text,
.edit-post-visual-editor .editor-block-list__block .wp-block-cover h2 {
.block-editor-block-list__block .wp-block-cover-image .wp-block-cover-image-text,
.block-editor-block-list__block .wp-block-cover-image .wp-block-cover-text,
.block-editor-block-list__block .wp-block-cover-image h2,
.block-editor-block-list__block .wp-block-cover .wp-block-cover-image-text,
.block-editor-block-list__block .wp-block-cover .wp-block-cover-text,
.block-editor-block-list__block .wp-block-cover h2 {
font-size: 27px;
}

Expand Down Expand Up @@ -559,9 +559,9 @@ p.has-drop-cap:not(:focus)::first-letter {

/* General Widget styles */

.edit-post-visual-editor [data-align="center"] .wp-block-categories__list,
.edit-post-visual-editor [data-align="center"] .wp-block-archives,
.edit-post-visual-editor [data-align="center"] .wp-block-lastest-posts {
[data-align="center"] .wp-block-categories__list,
[data-align="center"] .wp-block-archives,
[data-align="center"] .wp-block-lastest-posts {
list-style-position: inside;
}

Expand All @@ -575,4 +575,3 @@ p.has-drop-cap:not(:focus)::first-letter {
.wp-block-latest-comments__comment-date {
color: inherit;
}

19 changes: 6 additions & 13 deletions penscratch-2/functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,6 @@ function penscratch_2_setup() {
'menu-1' => esc_html__( 'Header', 'penscratch-2' ),
) );

add_editor_style( array( 'editor-style.css', penscratch_2_fonts_url() ) );

/*
* Switch default core markup for search form, comment form, and comments
* to output valid HTML5.
Expand Down Expand Up @@ -108,6 +106,12 @@ function penscratch_2_setup() {
)
);

add_theme_support( 'editor-styles' );
add_editor_style( array(
get_theme_file_uri( '/css/editor-blocks.css' ),
penscratch_2_fonts_url()
) );

}
endif; // penscratch_2_setup
add_action( 'after_setup_theme', 'penscratch_2_setup' );
Expand Down Expand Up @@ -196,17 +200,6 @@ function penscratch_2_scripts() {
}
add_action( 'wp_enqueue_scripts', 'penscratch_2_scripts' );

/**
* Enqueue editor styles for Gutenberg
*/
function penscratch_2_block_editor_styles() {
// Block styles.
wp_enqueue_style( 'penscratch-2-block-editor-style', get_theme_file_uri( '/css/editor-blocks.css' ) );
// Fonts.
wp_enqueue_style( 'penscratch-2-fonts-url', penscratch_2_fonts_url(), array(), null );
}
add_action( 'enqueue_block_editor_assets', 'penscratch_2_block_editor_styles' );

/**
* Register Google Fonts
*/
Expand Down
6 changes: 3 additions & 3 deletions penscratch-2/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Author: Automattic
* Author URI: https://wordpress.com/themes/
* Description: A clean, responsive writing theme with support for custom logos, featured images, fancy pull quotes, and more.
* Version: 2.0.2-wpcom
* Version: 2.0.3-wpcom
* License: GNU General Public License v2 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: penscratch
Expand Down Expand Up @@ -1918,8 +1918,8 @@ div.sharedaddy div.sd-block {
}
@media screen and (min-width: 55em) {
.no-sidebar .site {
margin-right: auto;
margin-left: auto;
margin-right: auto;
margin-left: auto;
max-width: 872px;
padding: 54px 108px;
}
Expand Down

0 comments on commit c1384d9

Please sign in to comment.