diff --git a/wp-content/themes/twentyfourteen/css/blocks.css b/wp-content/themes/twentyfourteen/css/blocks.css new file mode 100644 index 0000000000..a15b9a3979 --- /dev/null +++ b/wp-content/themes/twentyfourteen/css/blocks.css @@ -0,0 +1,391 @@ +/* +Theme Name: Twenty Fourteen +Description: Used to style Gutenberg Blocks. +*/ + +/*-------------------------------------------------------------- +>>> TABLE OF CONTENTS: +---------------------------------------------------------------- +1.0 General Block Styles +2.0 Blocks - Common Blocks +3.0 Blocks - Formatting +4.0 Blocks - Layout Elements +5.0 Blocks - Widgets +6.0 Blocks - Colors +--------------------------------------------------------------*/ + +/*-------------------------------------------------------------- +1.0 General Block Styles +--------------------------------------------------------------*/ + +[class^="wp-block-"] figcaption, +[class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body { + font-size: 12px; + font-style: italic; + line-height: 1.5; + margin: 9px 0 0; +} + +/* Alignments */ + +[class^="wp-block-"].alignleft, +[class^="wp-block-"] .alignleft { + margin-right: 24px; +} + +[class^="wp-block-"].alignright, +[class^="wp-block-"] .alignright { + margin-left: 24px; +} + +/*-------------------------------------------------------------- +2.0 Blocks - Common Blocks +--------------------------------------------------------------*/ + +/* Paragraph */ + +p.has-drop-cap:not(:focus)::first-letter { + font-size: 5em; +} + +/* Image */ + +.wp-block-image { + margin-bottom: 24px; +} + +.wp-block-image figcaption { + text-align: left; +} + +@media screen and (min-width: 810px) { + .full-width .site-content .wp-block-image figure.alignleft { + margin-left: -168px; + } + + .full-width .site-content .wp-block-image figure.alignright { + margin-right: -168px; + } +} + +.rtl .wp-block-image figcaption { + text-align: right; +} + +/* Gallery */ + +.wp-block-gallery { + margin: 0 0 24px; +} + +.wp-block-gallery .blocks-gallery-image figcaption, +.wp-block-gallery .blocks-gallery-item figcaption { + left: 0; + right: 0; + width: auto; +} + +/* Quote */ + +.wp-block-quote:not(.is-large):not(.is-style-large) { + border-left: 0; + border-right: 0; + padding-left: 0; + padding-right: 0; +} + +.wp-block-quote.is-large, +.wp-block-quote.is-style-large { + padding: 0; +} + +.wp-block-quote cite { + color: #2b2b2b; + font-size: 16px; + font-weight: 400; +} + +.wp-block-quote.alignleft cite, +.wp-block-quote.alignright cite { + display: inline-block; + margin-bottom: 17px; + margin-top: 0; +} + +.rtl .wp-block-quote.alignleft { + margin-right: 24px; +} + +.rtl .wp-block-quote.alignright { + margin-left: 24px; +} + +/* Audio */ + +.wp-block-audio audio { + display: block; + width: 100%; +} + +/* Cover Image */ + +.wp-block-cover-image.aligncenter { + display: flex; +} + + +/* File */ + +.wp-block-file .wp-block-file__button { + background-color: #24890d; + border: 0; + border-radius: 2px; + color: #fff; + font-size: 12px; + font-weight: 700; + line-height: 15px; + padding: 10px 30px 11px; + text-transform: uppercase; + vertical-align: bottom; +} + +.wp-block-file .wp-block-file__button:hover, +.wp-block-file .wp-block-file__button:focus { + background-color: #41a62a; +} + +.wp-block-file .wp-block-file__button:active { + background-color: #55d737; +} + +/*-------------------------------------------------------------- +3.0 Blocks - Formatting +--------------------------------------------------------------*/ + +/* Code */ + +.wp-block-code { + border: 0; + padding: 0; +} + +/* Pullquote */ + +.wp-block-pullquote { + border: 0; + margin: 0; +} + +.wp-block-pullquote cite { + color: #2b2b2b; + font-size: 16px; + font-weight: 400; + margin-top: 0; + text-transform: none; +} + +.wp-block-pullquote.alignleft { + margin-right: 1em; +} + +.wp-block-pullquote.alignright { + margin-right: 1em; +} + +@media screen and (min-width: 810px) { + .full-width .site-content .wp-block-pullquote.alignleft { + margin-left: -168px; + } + + .full-width .site-content .wp-block-pullquote.alignright { + margin-right: -168px; + } +} + +/* Table */ + +.wp-block-table { + overflow-x: visible; +} + +.wp-block-table th, +.wp-block-table td { + border-color: rgba(0, 0, 0, 0.1); + border-width: 0 1px 1px 0; +} + +/*-------------------------------------------------------------- +4.0 Blocks - Layout Elements +--------------------------------------------------------------*/ + +/* Buttons */ + +.wp-block-button .wp-block-button__link { + background-color: #24890d; + border: 0; + border-radius: 2px; + color: #fff; + font-size: 12px; + font-weight: 700; + line-height: 15px; + padding: 10px 30px 11px; + text-transform: uppercase; + vertical-align: bottom; +} + +.wp-block-button .wp-block-button__link:hover, +.wp-block-button .wp-block-button__link:focus { + background-color: #41a62a; +} + +.wp-block-button .wp-block-button__link:active { + background-color: #55d737; +} + +/* Columns */ + +.wp-block-columns { + margin: 0 -0.5em; +} + +.wp-block-column { + margin: 0 0.5em; +} + +/* Separator */ + +.wp-block-separator { + border: 0; + max-width: 100px; +} + +.wp-block-separator.is-style-wide { + max-width: 100%; +} + +/*-------------------------------------------------------------- +5.0 Blocks - Widgets +--------------------------------------------------------------*/ + +/* Archives, Categories & Latest Posts */ + +.wp-block-archives.aligncenter, +.wp-block-categories.aligncenter, +.wp-block-latest-posts.aligncenter { + margin-left: 20px; + text-align: center; +} + +.rtl .wp-block-archives.aligncenter, +.rtl .wp-block-categories.aligncenter, +.rtl .wp-block-latest-posts.aligncenter { + margin-left: 0; + margin-right: 20px; +} + +/* Latest Comments */ + +.wp-block-latest-comments { + margin: 0; + padding: 0; +} + +.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt, +.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta { + margin-left: 60px; +} + +.wp-block-latest-comments .avatar, .wp-block-latest-comments__comment-avatar { + border-radius: 0; + border: 1px solid rgba(0, 0, 0, 0.1); + padding: 2px; +} + +.wp-block-latest-comments__comment, +.wp-block-latest-comments__comment-excerpt, +.wp-block-latest-comments__comment-excerpt p { + font-size: 16px; +} + +.wp-block-latest-comments__comment-meta a { + color: #2b2b2b; + font-weight: 900; + text-decoration: none; +} + +.wp-block-latest-comments_comment-meta a:hover, +.wp-block-latest-comments_comment-meta a:focus { + color: #41a62a; +} + +.wp-block-latest-comments__comment-excerpt p:last-child { +} + +.wp-block-latest-comments__comment-date { + text-transform: uppercase; +} + +.wp-block-latest-comments .wp-block-latest-comments__comment { + border-top: 1px solid rgba(0, 0, 0, 0.1); + margin-bottom: 24px; + padding-top: 24px; +} + +/* Latest Posts */ + +.wp-block-latest-posts.is-grid { + margin-left: 0; + margin-right: 0; +} + +/*-------------------------------------------------------------- +6.0 Blocks - Colors +--------------------------------------------------------------*/ + +.has-green-color { + color: #24890d; +} + +.has-green-background-color { + background-color: #24890d; +} + +.has-black-color { + color: #000; +} + +.has-black-background-color { + background-color: #000; +} + +.has-dark-gray-color { + color: #2b2b2b; +} + +.has-dark-gray-background-color { + background-color: #2b2b2b; +} + +.has-medium-gray-color { + color: #767676; +} + +.has-medium-gray-background-color { + background-color: #767676; +} + +.has-light-gray-color { + color: #f5f5f5; +} + +.has-light-gray-background-color { + background-color: #f5f5f5; +} + +.has-white-color { + color: #fff; +} + +.has-white-background-color { + background-color: #fff; +} diff --git a/wp-content/themes/twentyfourteen/css/editor-blocks.css b/wp-content/themes/twentyfourteen/css/editor-blocks.css new file mode 100644 index 0000000000..5b89dd6995 --- /dev/null +++ b/wp-content/themes/twentyfourteen/css/editor-blocks.css @@ -0,0 +1,463 @@ +/* +Theme Name: Twenty Fourteen +Description: Used to style Gutenberg Blocks in the editor. +*/ + +/*-------------------------------------------------------------- +>>> TABLE OF CONTENTS: +---------------------------------------------------------------- +1.0 General Typography +2.0 General Block Styles +3.0 Blocks - Common Blocks +4.0 Blocks - Formatting +5.0 Blocks - Layout Elements +6.0 Blocks - Widgets +--------------------------------------------------------------*/ + +/*-------------------------------------------------------------- +1.0 General Typography +--------------------------------------------------------------*/ + +.edit-post-visual-editor .editor-block-list__block, +.edit-post-visual-editor .editor-block-list__block p, +.editor-default-block-appender input[type="text"].editor-default-block-appender__content { + line-height: 1.5; +} + +.edit-post-visual-editor .editor-block-list__block { + color: #2b2b2b; +} + +.editor-post-title__block .editor-post-title__input { + font-family: Lato, sans-serif; + font-size: 33px; + font-weight: 300; + line-height: 1.0909090909; + text-transform: uppercase; +} + +/* Headers */ + +.wp-block-freeform.block-library-rich-text__tinymce h1 { + font-size: 26px; +} + +.wp-block-freeform.block-library-rich-text__tinymce h2 { + font-size: 24px; +} + +.wp-block-freeform.block-library-rich-text__tinymce h3 { + font-size: 22px; +} + +.wp-block-freeform.block-library-rich-text__tinymce h4 { + font-size: 20px; +} + +.wp-block-freeform.block-library-rich-text__tinymce h5 { + font-size: 18px; +} + +.wp-block-freeform.block-library-rich-text__tinymce h6 { + font-size: 16px; +} + +/*-------------------------------------------------------------- +2.0 General Block Styles +--------------------------------------------------------------*/ + +/* 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: 504px; /* 474 + 30 for editor block padding */ +} + +/* Link styles */ + +.edit-post-visual-editor a, +.editor-block-list__block a, +.wp-block-freeform.block-library-rich-text__tinymce a { + color: #24890d; +} + +/* List styles */ + +.wp-block-freeform.block-library-rich-text__tinymce li { + line-height: 1.5; +} + +.edit-post-visual-editor ul:not(.wp-block-gallery), +.editor-block-list__block ul:not(.wp-block-gallery), +.block-library-list ul, +.edit-post-visual-editor ol, +.editor-block-list__block ol, +.block-library-list ol { + margin: 0 0 1.6em 1.3333em; + padding: 0; +} + +.block-library-list .editor-rich-text__tinymce { + padding: 0; +} + +.edit-post-visual-editor ul:not(.wp-block-gallery), +.editor-block-list__block ul:not(.wp-block-gallery), +.block-library-list ul { + list-style: disc; +} + +.edit-post-visual-editor ol, +.editor-block-list__block ol, +.block-library-list ol { + list-style: decimal; +} + +.edit-post-visual-editor ul:not(.wp-block-gallery) li > ul, +.editor-block-list__block ul:not(.wp-block-gallery) li > ul, +.block-library-list li > ul, +.edit-post-visual-editor li > ol, +.editor-block-list__block li > ol, +.block-library-list li > ol { + margin-bottom: 0; +} + +.wp-block-freeform.block-library-rich-text__tinymce li, +.editor-block-list__block li { + margin-bottom: 0; +} + +.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, +.rtl .edit-post-visual-editor ol, +.rtl .editor-block-list__block ol, +.rtl .block-library-list ol { + margin-left: 0; + margin-right: 1.3333em; +} + +/* Code */ + +.wp-block-freeform.block-library-rich-text__tinymce code { + background: transparent; +} + + +/* Captions */ + +[class^="wp-block-"] figcaption, +[class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body { + font-size: 12px; + font-style: italic; + line-height: 1.5; + margin: 9px 0 0; +} + +/* Tables */ + +.edit-post-visual-editor .editor-block-list__block table, +.edit-post-visual-editor .editor-block-list__block table th, +.edit-post-visual-editor .editor-block-list__block table td { + border: 1px solid rgba(0, 0, 0, 0.1); + font-size: 14px; + line-height: 1.2857142857; +} + +.edit-post-visual-editor .editor-block-list__block table { + border-collapse: separate; + border-spacing: 0; + border-width: 1px 0 0 1px; + margin-bottom: 24px; + width: 100%; +} + +.edit-post-visual-editor .editor-block-list__block table th { + border-width: 0 1px 1px 0; + font-weight: 700; + text-align: left; + text-transform: uppercase; +} + +.edit-post-visual-editor .editor-block-list__block table td { + border-width: 0 1px 1px 0; +} + +.rtl .edit-post-visual-editor .editor-block-list__block table th { + text-align: right; +} + +/* Quotes */ + +.wp-block-freeform.block-library-rich-text__tinymce blockquote { + border-left: 0; + border-right: 0; + padding-left: 0; + padding-right: 0; +} + +.wp-block-freeform.block-library-rich-text__tinymce blockquote p { + font-size: 19px; +} + +/* Tables */ + +.editor-block-list__block .wp-block-table th, +.editor-block-list__block .wp-block-table td { + padding: 0; +} + +/*-------------------------------------------------------------- +3.0 Blocks - Common Blocks +--------------------------------------------------------------*/ + +/* Paragraph */ + +p.has-drop-cap:not(:focus)::first-letter { + font-size: 5em; +} + +/* Image */ + +.wp-block-image { + margin-bottom: 24px; + max-width: 800px; +} + +.wp-block-image figcaption { + text-align: left; +} + +@media screen and (min-width: 810px) { + [data-type="core/image"][data-align="left"] .editor-block-list__block-edit { + clear: left; + margin-left: -198px; /* 30px wider than front-end, to account for editor tool spacing */ + } + + [data-type="core/image"][data-align="right"] .editor-block-list__block-edit { + clear: right; + margin-right: -198px; /* 30px wider than front-end, to account for editor tool spacing */ + } +} + +.rtl .wp-block-image figcaption { + text-align: right; +} + +/* Gallery */ + +.editor-block-list__block .wp-block-gallery { + margin-left: 0; + margin-right: 0; +} + +/* Quote */ + +.editor-block-list__block .wp-block-quote p { + font-size: 19px; +} + +.wp-block-quote:not(.is-large):not(.is-style-large) { + border-left: 0; + border-right: 0; + padding-left: 0; + padding-right: 0; +} + +.wp-block-quote.is-large, +.wp-block-quote.is-style-large { + padding: 0; +} + +.wp-block-quote.is-large p, +.wp-block-quote.is-style-large p { + font-size: 24px; + line-height: 1.6; +} + +.wp-block-quote .wp-block-quote__citation { + color: #2b2b2b; + font-size: 16px; + font-weight: 400; + margin-top: 0; +} + +.wp-block-quote.alignleft .wp-block-quote__citation, +.wp-block-quote.alignright .wp-block-quote__citation { + display: inline-block; + margin-bottom: 17px; +} + +@media screen and (min-width: 1200px) { + .editor-block-list__block .wp-block-quote.alignleft, + .editor-block-list__block .wp-block-quote.alignright { + width: -webkit-calc(50% + 130px); + width: calc(50% + 130px); + } + + .editor-block-list__block .wp-block-quote.alignleft { + clear: left; + margin-left: -168px; + } + + .editor-block-list__block .wp-block-quote.alignright { + clear: right; + margin-right: -168px; + } +} + +/* Cover Image */ + +.wp-block-cover-image.aligncenter { + display: flex; +} + +/* File */ + +.wp-block-file .wp-block-file__textlink { + color: #24890d; + text-decoration: underline; +} + +.wp-block-file .wp-block-file__button { + background-color: #24890d; + border: 0; + border-radius: 2px; + color: #fff; + font-size: 12px; + font-weight: 700; + line-height: normal; + padding: 10px 30px 11px; + text-transform: uppercase; + vertical-align: bottom; +} + +.editor-block-list__block .wp-block-file .wp-block-file__button.mce-content-body { + line-height: normal; +} + +/*-------------------------------------------------------------- +4.0 Blocks - Formatting +--------------------------------------------------------------*/ + +/* Code */ + +.wp-block-code { + border: 0; + padding: 0; +} + +/* Pullquote */ + +.wp-block-pullquote { + border: 0; + margin: 0; +} + +.wp-block-pullquote .wp-block-pullquote__citation { + color: #2b2b2b; + font-size: 16px; + font-weight: 400; + margin-top: 0; + text-transform: none; +} + +.wp-block-pullquote.alignleft blockquote > .editor-rich-text p, +.wp-block-pullquote.alignright blockquote > .editor-rich-text p { + font-size: 20px; +} + +@media screen and (min-width: 810px) { + .editor-block-list__block .wp-block-pullquote.alignleft { + margin-left: -168px; + } + + .editor-block-list__block .wp-block-pullquote.alignright { + margin-right: -168px; + } +} + +/*-------------------------------------------------------------- +5.0 Blocks - Layout Elements +--------------------------------------------------------------*/ + +/* Buttons */ + +.wp-block-button .wp-block-button__link { + background-color: #24890d; + border: 0; + border-radius: 2px; + color: #fff; + font-size: 12px; + font-weight: 700; + padding: 10px 30px 11px; + text-transform: uppercase; + vertical-align: bottom; +} + +.editor-block-list__block .wp-block-button .mce-content-body { + line-height: normal; +} + +/*-------------------------------------------------------------- +6.0 Blocks - Widgets +--------------------------------------------------------------*/ + +/* Archives, Categories & Latest Posts */ + +.wp-block-archives li a, +.wp-block-categories__list li a, +.wp-block-latest-posts li a { + text-decoration: underline; +} + +/* Latest Comments */ + +.editor-block-list__block ol.wp-block-latest-comments, +.rtl .editor-block-list__block ol.wp-block-latest-comments { + margin: 0; + padding: 0; +} + +.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt, +.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta { + margin-left: 60px; +} + +.wp-block-latest-comments .avatar, .wp-block-latest-comments__comment-avatar { + border-radius: 0; + border: 1px solid rgba(0, 0, 0, 0.1); + padding: 2px; +} + +.wp-block-latest-comments__comment, +.wp-block-latest-comments__comment-excerpt, +.wp-block-latest-comments__comment-excerpt p { + font-size: 16px; +} + +.editor-block-list__block .wp-block-latest-comments__comment-meta a, +.editor-block-list__block .wp-block-latest-comments__comment-meta a:visited { + color: #2b2b2b; + font-weight: 900; + text-decoration: none; +} + +.wp-block-latest-comments__comment-date { + text-transform: uppercase; +} + +.wp-block-latest-comments .wp-block-latest-comments__comment { + border-top: 1px solid rgba(0, 0, 0, 0.1); + margin-bottom: 24px; + padding-top: 24px; +} + +/* Latest Posts */ + +.edit-post-visual-editor .editor-block-list__block .wp-block-latest-posts.is-grid { + list-style: none; + margin-left: 0; + margin-right: 0; +} diff --git a/wp-content/themes/twentyfourteen/functions.php b/wp-content/themes/twentyfourteen/functions.php index 2946d19ddb..cb6a488690 100644 --- a/wp-content/themes/twentyfourteen/functions.php +++ b/wp-content/themes/twentyfourteen/functions.php @@ -70,6 +70,46 @@ function twentyfourteen_setup() { // This theme styles the visual editor to resemble the theme style. add_editor_style( array( 'css/editor-style.css', twentyfourteen_font_url(), 'genericons/genericons.css' ) ); + // Load regular editor styles into the new block-based editor. + add_theme_support( 'editor-styles' ); + + // Load default block styles. + add_theme_support( 'wp-block-styles' ); + + // Add support for custom color scheme. + add_theme_support( 'editor-color-palette', array( + array( + 'name' => __( 'Green', 'twentyfourteen' ), + 'slug' => 'green', + 'color' => '#24890d', + ), + array( + 'name' => __( 'Black', 'twentyfourteen' ), + 'slug' => 'black', + 'color' => '#000', + ), + array( + 'name' => __( 'Dark Gray', 'twentyfourteen' ), + 'slug' => 'dark-gray', + 'color' => '#2b2b2b', + ), + array( + 'name' => __( 'Medium Gray', 'twentyfourteen' ), + 'slug' => 'medium-gray', + 'color' => '#767676', + ), + array( + 'name' => __( 'Light Gray', 'twentyfourteen' ), + 'slug' => 'light-gray', + 'color' => '#f5f5f5', + ), + array( + 'name' => __( 'White', 'twentyfourteen' ), + 'slug' => 'white', + 'color' => '#fff', + ), + ) ); + // Add RSS feed links to for posts and comments. add_theme_support( 'automatic-feed-links' ); @@ -239,6 +279,9 @@ function twentyfourteen_scripts() { // Load our main stylesheet. wp_enqueue_style( 'twentyfourteen-style', get_stylesheet_uri() ); + // Theme block stylesheet. + wp_enqueue_style( 'twentyfourteen-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentyfourteen-style' ), '20181018' ); + // Load the Internet Explorer specific stylesheet. wp_enqueue_style( 'twentyfourteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfourteen-style' ), '20131205' ); wp_style_add_data( 'twentyfourteen-ie', 'conditional', 'lt IE 9' ); @@ -302,6 +345,19 @@ function twentyfourteen_resource_hints( $urls, $relation_type ) { } add_filter( 'wp_resource_hints', 'twentyfourteen_resource_hints', 10, 2 ); +/** + * Enqueue editor styles for Gutenberg + * + * @since Twenty Fourteen 2.3 + */ +function twentyfourteen_block_editor_styles() { + // Block styles. + wp_enqueue_style( 'twentyfourteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' ); + // Add custom fonts. + wp_enqueue_style( 'twentyfourteen-fonts', twentyfourteen_font_url(), array(), null ); +} +add_action( 'enqueue_block_editor_assets', 'twentyfourteen_block_editor_styles' ); + if ( ! function_exists( 'twentyfourteen_the_attached_image' ) ) : /** * Print the attached image with a link to the next attached image. diff --git a/wp-includes/version.php b/wp-includes/version.php index 5d2a019f16..327702f177 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -4,7 +4,7 @@ * * @global string $wp_version */ -$wp_version = '5.0-alpha-43796'; +$wp_version = '5.0-alpha-43797'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.