From 969c41a2b46509e92e755dd7189227ca2d2ddfe0 Mon Sep 17 00:00:00 2001 From: "David A. Kennedy" Date: Tue, 23 Oct 2018 06:13:00 +0000 Subject: [PATCH] Twenty Fifteen: Add styles and support for the new block-based editor. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This update adds styles and theme support related to the new block-based editor to enhance the experience of using it with Twenty Fifteen. These are the specific changes made to this theme: * Add blocks.css, to style blocks on the front end, to make sure they match the theme’s existing HTML element styles. * Add editor-blocks.css to style blocks in the editor, to make sure they match the theme’s existing HTML element styles. * Add theme support for `editor-styles`, to pull the existing editor stylesheet into the new editor. * Add theme support for `wp-block-styles`, to load the default block styles on the front end. * Add theme support for `editor-color-palette`, to load a color palette based on the theme’s color scheme into the block-based editor. Props laurelfulford. Fixes #45043. Built from https://develop.svn.wordpress.org/branches/5.0@43798 git-svn-id: http://core.svn.wordpress.org/branches/5.0@43627 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../themes/twentyfifteen/css/blocks.css | 610 +++++++++++++ .../twentyfifteen/css/editor-blocks.css | 848 ++++++++++++++++++ wp-content/themes/twentyfifteen/functions.php | 87 ++ wp-includes/version.php | 2 +- 4 files changed, 1546 insertions(+), 1 deletion(-) create mode 100644 wp-content/themes/twentyfifteen/css/blocks.css create mode 100644 wp-content/themes/twentyfifteen/css/editor-blocks.css diff --git a/wp-content/themes/twentyfifteen/css/blocks.css b/wp-content/themes/twentyfifteen/css/blocks.css new file mode 100644 index 0000000000..d02c5d8fb0 --- /dev/null +++ b/wp-content/themes/twentyfifteen/css/blocks.css @@ -0,0 +1,610 @@ +/* +Theme Name: Twenty Fifteen +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 +--------------------------------------------------------------*/ + +/* Captions */ + +[class^="wp-block-"] figcaption { + color: #707070; + font-family: "Noto Sans", sans-serif; + font-size: 12px; + line-height: 1.5; + margin-bottom: 0; + padding: 0.5em 0; +} + +@media screen and (min-width: 46.25em) { + [class^="wp-block-"] figcaption { + font-size: 14px; + } +} + +@media screen and (min-width: 55em) { + [class^="wp-block-"] figcaption { + font-size: 16px; + } +} + +@media screen and (min-width: 59.6875em) { + [class^="wp-block-"] figcaption { + font-size: 12px; + } +} + +@media screen and (min-width: 68.75em) { + [class^="wp-block-"] figcaption { + font-size: 14px; + } +} + +@media screen and (min-width: 77.5em) { + [class^="wp-block-"] figcaption { + font-size: 16px; + } +} + +/*-------------------------------------------------------------- +2.0 Blocks - Common Blocks +--------------------------------------------------------------*/ + +/* Paragraph */ + +p.has-drop-cap:not(:focus)::first-letter { + font-size: 5em; +} + +/* Gallery */ + +.wp-block-gallery { + margin-bottom: 1.6em; +} + +/* Audio */ + +.wp-block-audio audio { + display: block; + width: 100%; +} + +/* Cover Image */ + +.wp-block-cover-image .wp-block-cover-image-text, +.wp-block-cover-image h2 { + font-size: 29px; + line-height: 1.2069; +} + +/* Quote */ + +.wp-block-quote, +.wp-block-quote:not(.is-large):not(.is-style-large), +[class^="wp-block-"] blockquote { + border-color: #707070; +} + +.wp-block-quote cite, +.wp-block-quote__citation { + color: #333; + font-family: "Noto Sans", sans-serif; + font-size: 15px; + font-style: normal; + line-height: 1.6; + text-transform: none; +} + +.wp-block-quote em, +.wp-block-quote i { + font-style: normal; +} + +.wp-block-quote strong, +.wp-block-quote b { + font-weight: 400; +} + + +@media screen and (min-width: 46.25em) { + .edit-post-visual-editor .wp-block-quote p { + font-size: 20px; + line-height: 1.75; + } + + .wp-block-quote cite, + .wp-block-quote__citation { + font-size: 17px; + line-height: 1.6471; + } +} + +@media screen and (min-width: 55em) { + .edit-post-visual-editor .wp-block-quote p { + font-size: 22px; + line-height: 1.8182; + } + + .wp-block-quote cite, + .wp-block-quote__citation { + font-size: 19px; + line-height: 1.6842; + } +} + +@media screen and (min-width: 59.6875em) { + .edit-post-visual-editor .wp-block-quote p { + font-size: 18px; + line-height: 1.6667; + } + + .wp-block-quote cite, + .wp-block-quote__citation { + font-size: 15px; + line-height: 1.6; + } +} + +@media screen and (min-width: 68.75em) { + .edit-post-visual-editor .wp-block-quote p { + font-size: 20px; + line-height: 1.75; + } + + .wp-block-quote cite, + .wp-block-quote__citation { + font-size: 17px; + line-height: 1.6471; + } +} + +@media screen and (min-width: 77.5em) { + .edit-post-visual-editor .wp-block-quote p { + font-size: 22px; + line-height: 1.8182; + } + + .wp-block-quote cite, + .wp-block-quote__citation { + font-size: 19px; + line-height: 1.6842; + } +} + +/* Cover Image */ + +.wp-block-cover-image.aligncenter, +.wp-block-cover-image.alignleft, +.wp-block-cover-image.alignright { + display: flex; +} + +/* File */ + +.wp-block-file a.wp-block-file__button { + background-color: #333; + border: 0; + border-radius: 0; + color: #fff; + cursor: pointer; + font-family: "Noto Sans", sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 1.5; + padding: 0.7917em 1.5em; + text-transform: uppercase; + vertical-align: baseline; +} + +.wp-block-file a.wp-block-file__button:hover, +.wp-block-file a.wp-block-file__button:focus { + background-color: #707070; + background-color: rgba(51, 51, 51, 0.7); + outline: 0; +} + +.rtl .wp-block-file * + .wp-block-file__button { + margin-left: 0.75em; + margin-right: 0; +} + +@media screen and (min-width: 46.25em) { + .wp-block-file a.wp-block-file__button { + font-size: 14px; + font-size: 1.4rem; + padding: 0.8214em 1.6429em; + } +} + +@media screen and (min-width: 55em) { + .wp-block-file a.wp-block-file__button { + font-size: 16px; + font-size: 1.6rem; + padding: 0.8125em 1.625em; + } +} + +@media screen and (min-width: 59.6875em) { + .wp-block-file a.wp-block-file__button { + font-size: 12px; + font-size: 1.2rem; + padding: 0.7917em 1.5833em; + } +} + +@media screen and (min-width: 68.75em) { + .wp-block-file a.wp-block-file__button { + font-size: 14px; + font-size: 1.4rem; + padding: 0.8214em 1.5714em; + } +} + +@media screen and (min-width: 77.5em) { + .wp-block-file a.wp-block-file__button { + font-size: 16px; + font-size: 1.6rem; + padding: 0.8125em 1.625em; + } +} + +/*-------------------------------------------------------------- +3.0 Blocks - Formatting +--------------------------------------------------------------*/ + +/* Code */ + +.wp-block-code { + background-color: transparent; + border: 0; + padding: 0; +} + +.wp-block-code code { + font-family: Inconsolata, monospace; + font-size: inherit; +} + +/* Preformatted */ + +.wp-block-preformatted { + background-color: rgba(0, 0, 0, 0.01); + border: 1px solid #eaeaea; + line-height: 1.2; + margin-bottom: 1.6em; + max-width: 100%; + overflow: auto; + padding: 0.8em; + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* Pullquote */ + +.wp-block-pullquote { + border: 0; +} + +.wp-block-pullquote blockquote { + border: 0; + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; +} + +.wp-block-pullquote cite { + color: #333; + font-family: "Noto Sans", sans-serif; + font-size: 15px; + font-style: normal; + line-height: 1.6; + text-transform: none; +} + +@media screen and (min-width: 46.25em) { + .wp-block-pullquote cite { + font-size: 17px; + line-height: 1.6471; + } +} + +@media screen and (min-width: 55em) { + .wp-block-pullquote cite { + font-size: 19px; + line-height: 1.6842; + } +} + +@media screen and (min-width: 59.6875em) { + .wp-block-pullquote cite { + font-size: 15px; + line-height: 1.6; + } +} + +@media screen and (min-width: 68.75em) { + .wp-block-pullquote cite { + font-size: 17px; + line-height: 1.6471; + } +} + +@media screen and (min-width: 77.5em) { + .wp-block-pullquote cite { + font-size: 19px; + line-height: 1.6842; + } +} + +/* Table */ + +.wp-block-table th, +.wp-block-table td { + border-color: #eaeaea; + border-width: 0 1px 1px 0; +} + +/*-------------------------------------------------------------- +4.0 Blocks - Layout Elements +--------------------------------------------------------------*/ + +/* Button */ + +.wp-block-button .wp-block-button__link { + background-color: #333; + border: 0; + border-radius: 0; + color: #fff; + cursor: pointer; + font-family: "Noto Sans", sans-serif; + font-size: 12px; + font-size: 1.2rem; + font-weight: 700; + line-height: 1.5; + padding: 0.7917em 1.5em; + text-transform: uppercase; + vertical-align: baseline; +} + +.wp-block-button .wp-block-button__link:hover, +.wp-block-button .wp-block-button__link:focus { + background-color: #707070; + background-color: rgba(51, 51, 51, 0.7); + outline: 0; +} + +@media screen and (min-width: 46.25em) { + .wp-block-button .wp-block-button__link { + font-size: 14px; + font-size: 1.4rem; + padding: 0.8214em 1.6429em; + } +} + +@media screen and (min-width: 55em) { + .wp-block-button .wp-block-button__link { + font-size: 16px; + font-size: 1.6rem; + padding: 0.8125em 1.625em; + } +} + +@media screen and (min-width: 59.6875em) { + .wp-block-button .wp-block-button__link { + font-size: 12px; + font-size: 1.2rem; + padding: 0.7917em 1.5833em; + } +} + +@media screen and (min-width: 68.75em) { + .wp-block-button .wp-block-button__link { + font-size: 14px; + font-size: 1.4rem; + padding: 0.8214em 1.5714em; + } +} + +@media screen and (min-width: 77.5em) { + .wp-block-button .wp-block-button__link { + font-size: 16px; + font-size: 1.6rem; + padding: 0.8125em 1.625em; + } +} + +/* Seperators */ + +.wp-block-separator { + border: 0; + max-width: 100px; +} + +.wp-block-separator.is-style-wide { + max-width: 100%; +} + +/*-------------------------------------------------------------- +5.0 Blocks - Widgets +--------------------------------------------------------------*/ + +/* Latest Comments */ + +.wp-block-latest-comments { + margin: 0; +} + +.wp-block-latest-comments__comment, +.wp-block-latest-comments__comment-excerpt, +.wp-block-latest-comments__comment-excerpt p { + font-size: inherit; +} + +.wp-block-latest-comments__comment-meta a { + border-bottom-color: transparent; + font-weight: 700; +} + +.wp-block-latest-comments__comment-excerpt p:last-child { + margin-bottom: 0; +} + +.wp-block-latest-comments__comment-date { + color: #707070; + font-family: "Noto Sans", sans-serif; + font-size: 12px; + line-height: 1.5; + margin-bottom: 1.6em; +} + +@media screen and (min-width: 46.25em) { + .wp-block-latest-comments__comment-date { + font-size: 14px; + } +} + +@media screen and (min-width: 55em) { + .wp-block-latest-comments__comment-date { + font-size: 16px; + } +} + +@media screen and (min-width: 59.6875em) { + .wp-block-latest-comments__comment-date { + font-size: 12px; + } +} + +@media screen and (min-width: 68.75em) { + .wp-block-latest-comments__comment-date { + font-size: 14px; + } +} + +@media screen and (min-width: 77.5em) { + .wp-block-latest-comments__comment-date { + font-size: 16px; + } +} + +.wp-block-latest-comments .wp-block-latest-comments__comment { + border-top: 1px solid #eaeaea; + border-top: 1px solid rgba(51, 51, 51, 0.1); + margin-bottom: 0; + padding: 1.6em 0; +} + +/*-------------------------------------------------------------- +6.0 Blocks - Colors +--------------------------------------------------------------*/ + +.has-dark-gray-color { + color: #111; +} + +.has-dark-gray-background-color { + background-color: #111; +} + +.has-light-gray-color { + color: #f1f1f1; +} + +.has-light-gray-background-color { + background-color: #f1f1f1; +} + +.has-white-color { + color: #fff; +} + +.has-white-background-color { + background-color: #fff; +} + +.has-yellow-color { + color: #f4ca16; +} + +.has-yellow-background-color { + background-color: #f4ca16; +} + +.has-dark-brown-color { + color: #352712; +} + +.has-dark-brown-background-color { + background-color: #352712; +} + +.has-medium-pink-color { + color: #e53b51; +} + +.has-medium-pink-background-color { + background-color: #e53b51; +} + +.has-light-pink-color { + color: #ffe5d1; +} + +.has-light-pink-background-color { + background-color: #ffe5d1; +} + +.has-dark-purple-color { + color: #2e2256; +} + +.has-dark-purple-background-color { + background-color: #2e2256; +} + +.has-purple-color { + color: #674970; +} + +.has-purple-background-color { + background-color: #674970; +} + +.has-blue-gray-color { + color: #22313f; +} + +.has-blue-gray-background-color { + background-color: #22313f; +} + +.has-bright-blue-color { + color: #55c3dc; +} + +.has-bright-blue-background-color { + background-color: #55c3dc; +} + +.has-light-blue-color { + color: #e9f2f9; +} + +.has-light-blue-background-color { + background-color: #e9f2f9; +} diff --git a/wp-content/themes/twentyfifteen/css/editor-blocks.css b/wp-content/themes/twentyfifteen/css/editor-blocks.css new file mode 100644 index 0000000000..bd6c71856f --- /dev/null +++ b/wp-content/themes/twentyfifteen/css/editor-blocks.css @@ -0,0 +1,848 @@ +/* +Theme Name: Twenty Fifteen +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 { + font-size: 15px; + line-height: 1.6; +} + +.edit-post-visual-editor .editor-block-list__block { + color: #333; +} + +.editor-post-title__block .editor-post-title__input { + color: #333; + font-size: 26px; + line-height: 1.1538; +} + +.edit-post-visual-editor h1, +.edit-post-visual-editor h2, +.edit-post-visual-editor h3, +.edit-post-visual-editor h4, +.edit-post-visual-editor h5, +.edit-post-visual-editor h6 { + clear: both; + font-weight: 700; +} + +.edit-post-visual-editor .editor-block-list__block h1 { + font-size: 26px; + line-height: 1.1538; + padding: 0.9em 0 0.45em; +} + +.edit-post-visual-editor .editor-block-list__block h2 { + font-size: 22px; + line-height: 1.3636; + padding: 1em 0 0.5em; +} + +.edit-post-visual-editor .editor-block-list__block h3 { + font-size: 18px; + line-height: 1.3333; + padding: 1.3em 0 0.65em; +} + +.edit-post-visual-editor .editor-block-list__block h4, +.edit-post-visual-editor .editor-block-list__block h5, +.edit-post-visual-editor .editor-block-list__block h6 { + font-size: 15px; + line-height: 1.2; + padding: 0.8em 0 0.4em; +} + +.edit-post-visual-editor .editor-block-list__block h5, +.edit-post-visual-editor .editor-block-list__block h6 { + letter-spacing: 0.1em; + text-transform: uppercase; +} + +.edit-post-visual-editor > h1:first-child, +.edit-post-visual-editor > h2:first-child, +.edit-post-visual-editor > h3:first-child, +.edit-post-visual-editor > h4:first-child, +.edit-post-visual-editor > h5:first-child, +.edit-post-visual-editor > h6:first-child { + padding-top: 0; +} + +@media screen and (min-width: 46.25em) { + .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 { + font-size: 17px; + line-height: 1.6471; + } + + .editor-post-title__block .editor-post-title__input { + font-size: 35px; + line-height: 1.2; + } + + .edit-post-visual-editor .editor-block-list__block h1 { + font-size: 35px; + line-height: 1.2; + padding: 0.8em 0 0.4em; + } + + .edit-post-visual-editor .editor-block-list__block h2 { + font-size: 29px; + line-height: 1.2069; + padding: 1.0em 0 0.5em; + } + + .edit-post-visual-editor .editor-block-list__block h3 { + font-size: 24px; + line-height: 1.1667; + padding: 1.15em 0 0.6em; + } + + .edit-post-visual-editor .editor-block-list__block h4 { + font-size: 20px; + line-height: 1.4; + padding: .7em 0 0.35em; + } + + .edit-post-visual-editor .editor-block-list__block h5, + .edit-post-visual-editor .editor-block-list__block h6 { + font-size: 17px; + line-height: 1.2353; + padding: 0.8em 0 0.4em; + } +} + +@media screen and (min-width: 55em) { + .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 { + font-size: 19px; + line-height: 1.6842; + } + + .editor-post-title__block .editor-post-title__input { + font-size: 39px; + line-height: 1.2308; + } + + .edit-post-visual-editor .editor-block-list__block h1 { + font-size: 39px; + line-height: 1.2308; + padding: 0.8em 0 0.4em; + } + + .edit-post-visual-editor .editor-block-list__block h2 { + font-size: 32px; + line-height: 1.25; + padding: 1em 0 0.5em; + } + + .edit-post-visual-editor .editor-block-list__block h3 { + font-size: 27px; + line-height: 1.1852; + padding: 1.2em 0 0.6em; + } + + .edit-post-visual-editor .editor-block-list__block h4 { + font-size: 22px; + line-height: 1.4545; + padding: 0.75em 0 0.35em; + } + + .edit-post-visual-editor .editor-block-list__block h5, + .edit-post-visual-editor .editor-block-list__block h6 { + font-size: 19px; + line-height: 1.2632; + padding: 0.8em 0 0.4em; + } +} + +@media screen and (min-width: 59.6875em) { + .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 { + font-size: 15px; + line-height: 1.6; + } + + .editor-post-title__block .editor-post-title__input { + font-size: 31px; + line-height: 1.1613; + } + + .edit-post-visual-editor .editor-block-list__block h1 { + font-size: 31px; + line-height: 1.1613; + padding: 0.8em 0 0.4em; + } + + .edit-post-visual-editor .editor-block-list__block h2 { + font-size: 26px; + line-height: 1.3846; + padding: 0.9em 0 0.45em; + } + + .edit-post-visual-editor .editor-block-list__block h3 { + font-size: 22px; + line-height: 1.3636; + padding: 1.1em 0 0.55em; + } + + .edit-post-visual-editor .editor-block-list__block h4 { + font-size: 18px; + line-height: 1.3333; + padding: 0.65em 0 0.3em; + } + + .edit-post-visual-editor .editor-block-list__block h5, + .edit-post-visual-editor .editor-block-list__block h6 { + font-size: 15px; + line-height: 1.2; + padding: 0.8em 0 0.4em; + } +} + +@media screen and (min-width: 68.75em) { + .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 { + font-size: 17px; + line-height: 1.6471; + } + + .editor-post-title__block .editor-post-title__input { + font-size: 35px; + line-height: 1.2; + } + + .edit-post-visual-editor .editor-block-list__block h1 { + font-size: 35px; + line-height: 1.2; + padding: 0.8em 0 0.4em; + } + + .edit-post-visual-editor .editor-block-list__block h2 { + font-size: 29px; + line-height: 1.2069; + padding: 1.0em 0 0.5em; + } + + .edit-post-visual-editor .editor-block-list__block h3 { + font-size: 24px; + line-height: 1.1667; + padding: 1.2em 0 0.6em; + } + + .edit-post-visual-editor .editor-block-list__block h4 { + font-size: 20px; + line-height: 1.4; + padding: 0.7em 0 0.35em; + } + + .edit-post-visual-editor .editor-block-list__block h5, + .edit-post-visual-editor .editor-block-list__block h6 { + font-size: 17px; + line-height: 1.2353; + padding: 0.8em 0 0.4em; + } +} + +@media screen and (min-width: 77.5em) { + .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 { + font-size: 19px; + line-height: 1.6842; + } + + .editor-post-title__block .editor-post-title__input { + font-size: 39px; + line-height: 1.2308; + } + + .edit-post-visual-editor .editor-block-list__block h3 { + font-size: 27px; + line-height: 1.1852; + padding: 1.2em 0 0.6em; + } + + .edit-post-visual-editor .editor-block-list__block h4 { + font-size: 22px; + line-height: 1.4545; + padding: 0.75em 0 0.35em; + } + + .edit-post-visual-editor .editor-block-list__block h5, + .edit-post-visual-editor .editor-block-list__block h6 { + font-size: 19px; + line-height: 1.2632; + padding: 0.85em 0 0.45em; + } +} + +/*-------------------------------------------------------------- +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: 690px; /* 660px + 30px for the editor padding */ +} + +/* Link styles */ + +.edit-post-visual-editor a, +.editor-block-list__block a, +.wp-block-freeform.block-library-rich-text__tinymce a { + border-bottom: 1px solid #333; + color: #333; + text-decoration: none; +} + +/* List styles */ + +.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; +} + +/* Quote */ + +.rtl .editor-block-list__block blockquote { + border-left: 0; + padding-left: 0; +} + +/* Captions */ + +[class^="wp-block-"] figcaption { + color: #707070; + font-family: "Noto Sans", sans-serif; + font-size: 12px; + margin-bottom: 0; + padding: 0.5em 0; +} + +.editor-block-list__block [class^="wp-block-"] figcaption { + line-height: 1.5; +} + +@media screen and (min-width: 46.25em) { + [class^="wp-block-"] figcaption { + font-size: 14px; + } +} + +@media screen and (min-width: 55em) { + [class^="wp-block-"] figcaption { + font-size: 16px; + } +} + +@media screen and (min-width: 59.6875em) { + [class^="wp-block-"] figcaption { + font-size: 12px; + } +} + +@media screen and (min-width: 68.75em) { + [class^="wp-block-"] figcaption { + font-size: 14px; + } +} + +@media screen and (min-width: 77.5em) { + [class^="wp-block-"] figcaption { + font-size: 16px; + } +} + +/* Pre */ + +[class^="wp-block-"] pre { + font-size: inherit; +} + +/* Alignments */ + +.wp-block-quote.alignright, +.wp-block-freeform.block-library-rich-text__tinymce .alignright { + margin: 0.4211em 0 1.6842em 1.6842em; +} + +.wp-block-quote.alignleft, +.wp-block-freeform.block-library-rich-text__tinymce .alignleft { + margin: 0.4211em 1.6842em 1.6842em 0; +} + +/*-------------------------------------------------------------- +3.0 Blocks - Common Blocks +--------------------------------------------------------------*/ + +/* Paragraph */ + +p.has-drop-cap:not(:focus)::first-letter { + font-size: 5em; +} + +/* Quotes */ + +.wp-block-quote, +.wp-block-freeform.block-library-rich-text__tinymce blockquote { + color: #707070; + margin-bottom: 1.6667em; + padding-left: 0.7778em; +} + +.wp-block-quote:not(.is-large):not(.is-style-large), +.wp-block-freeform.block-library-rich-text__tinymce blockquote { + border-color: #707070; +} + +.edit-post-visual-editor .wp-block-quote p { + font-size: 18px; + font-style: italic; + line-height: 1.6667; + margin-bottom: 1.6667em; +} + +.edit-post-visual-editor .wp-block-quote > p:last-child { + margin-bottom: 0; +} + +.wp-block-quote__citation { + color: #333; + font-family: "Noto Sans", sans-serif; + font-size: 15px; + font-style: normal; + line-height: 1.6; + text-transform: none; +} + +.wp-block-quote em, +.wp-block-quote i { + font-style: normal; +} + +.wp-block-quote strong, +.wp-block-quote b { + font-weight: 400; +} + +@media screen and (min-width: 46.25em) { + .edit-post-visual-editor .wp-block-quote p { + font-size: 20px; + line-height: 1.75; + } + + .wp-block-quote__citation { + font-size: 17px; + line-height: 1.6471; + } +} + +@media screen and (min-width: 55em) { + .edit-post-visual-editor .wp-block-quote p { + font-size: 22px; + line-height: 1.8182; + } + + .wp-block-quote__citation { + font-size: 19px; + line-height: 1.6842; + } +} + +@media screen and (min-width: 59.6875em) { + .edit-post-visual-editor .wp-block-quote p { + font-size: 18px; + line-height: 1.6667; + } + + .wp-block-quote__citation { + font-size: 15px; + line-height: 1.6; + } +} + +@media screen and (min-width: 68.75em) { + .edit-post-visual-editor .wp-block-quote p { + font-size: 20px; + line-height: 1.75; + } + + .wp-block-quote__citation { + font-size: 17px; + line-height: 1.6471; + } +} + +@media screen and (min-width: 77.5em) { + .edit-post-visual-editor .wp-block-quote p { + font-size: 22px; + line-height: 1.8182; + } + + .wp-block-quote__citation { + font-size: 19px; + line-height: 1.6842; + } +} + +/* Cover Image */ + +.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p, +.wp-block-cover-image h2 { + font-size: 29px; + line-height: 1.2069; +} + + +/* File */ + +.wp-block-file .editor-rich-text__tinymce { + border-bottom: 1px solid #333; +} + +.wp-block-file .wp-block-file__button { + background-color: #333; + border: 0; + border-radius: 0; + color: #fff; + cursor: pointer; + font-family: "Noto Sans", sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 1.5; + padding: 0.7917em 1.5em; + text-transform: uppercase; + vertical-align: baseline; +} + +@media screen and (min-width: 46.25em) { + .wp-block-file .wp-block-file__button { + font-size: 14px; + padding: 0.8214em 1.6429em; + } +} + +@media screen and (min-width: 55em) { + .wp-block-file .wp-block-file__button { + font-size: 16px; + padding: 0.8125em 1.625em; + } +} + +@media screen and (min-width: 59.6875em) { + .wp-block-file .wp-block-file__button { + font-size: 12px; + padding: 0.7917em 1.5833em; + } +} + +@media screen and (min-width: 68.75em) { + .wp-block-file .wp-block-file__button { + font-size: 14px; + padding: 0.8214em 1.5714em; + } +} + +@media screen and (min-width: 77.5em) { + .wp-block-file .wp-block-file__button { + font-size: 16px; + padding: 0.8125em 1.625em; + } +} + +/*-------------------------------------------------------------- +4.0 Blocks - Formatting +--------------------------------------------------------------*/ + +/* Code */ + +.wp-block-code, +.wp-block-freeform.block-library-rich-text__tinymce code { + background: transparent; + border: 0; + padding: 0; +} + +/* Pullquote */ + +.wp-block-pullquote, +.editor-block-list__block .wp-block-pullquote blockquote { + border: 0; + margin: 0; + padding-left: 0; +} + +.wp-block-pullquote .wp-block-pullquote__citation { + color: #333; + font-family: "Noto Sans", sans-serif; + font-size: 15px; + font-style: normal; + line-height: 1.6; + text-transform: none; +} + +@media screen and (min-width: 46.25em) { + .wp-block-pullquote .wp-block-pullquote__citation { + font-size: 17px; + line-height: 1.6471; + } +} + +@media screen and (min-width: 55em) { + .wp-block-pullquote .wp-block-pullquote__citation { + font-size: 19px; + line-height: 1.6842; + } +} + +@media screen and (min-width: 59.6875em) { + .wp-block-pullquote .wp-block-pullquote__citation { + font-size: 15px; + line-height: 1.6; + } +} + +@media screen and (min-width: 68.75em) { + .wp-block-pullquote .wp-block-pullquote__citation { + font-size: 17px; + line-height: 1.6471; + } +} + +@media screen and (min-width: 77.5em) { + .wp-block-pullquote .wp-block-pullquote__citation { + font-size: 19px; + line-height: 1.6842; + } +} + +/* Tables */ + +.editor-block-list__block .wp-block-table th, +.editor-block-list__block .wp-block-table td { + padding: 0; +} + +.rtl .editor-block-list__block .wp-block-table th { + text-align: right; +} + +/*-------------------------------------------------------------- +5.0 Blocks - Layout Elements +--------------------------------------------------------------*/ + +/* Button */ + +.wp-block-button .wp-block-button__link { + background-color: #333; + border: 0; + border-radius: 0; + color: #fff; + cursor: pointer; + font-family: "Noto Sans", sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 1.5; + padding: 0.7917em 1.5em; + text-transform: uppercase; + vertical-align: baseline; +} + +@media screen and (min-width: 46.25em) { + .wp-block-button .wp-block-button__link { + font-size: 14px; + padding: 0.8214em 1.6429em; + } +} + +@media screen and (min-width: 55em) { + .wp-block-button .wp-block-button__link { + font-size: 16px; + padding: 0.8125em 1.625em; + } +} + +@media screen and (min-width: 59.6875em) { + .wp-block-button .wp-block-button__link { + font-size: 12px; + padding: 0.7917em 1.5833em; + } +} + +@media screen and (min-width: 68.75em) { + .wp-block-button .wp-block-button__link { + font-size: 14px; + padding: 0.8214em 1.5714em; + } +} + +@media screen and (min-width: 77.5em) { + .wp-block-button .wp-block-button__link { + font-size: 16px; + padding: 0.8125em 1.625em; + } +} + +/* Seperator */ + +.wp-block-separator { + max-width: 100px; +} + +.wp-block-separator.is-style-wide { + max-width: 100%; +} + + +/*-------------------------------------------------------------- +6.0 Blocks - Widgets +--------------------------------------------------------------*/ + +/* Latest Comments */ + +.wp-block-latest-comments { + margin: 0; +} + +.wp-block-latest-comments__comment, +.wp-block-latest-comments__comment-excerpt, +.wp-block-latest-comments__comment-excerpt p { + font-size: inherit; +} + +.wp-block-latest-comments__comment-meta a { + border-bottom-color: transparent; + font-weight: 700; +} + +.wp-block-latest-comments__comment-excerpt p:last-child { + margin-bottom: 0; +} + +.wp-block-latest-comments__comment-date { + color: #707070; + font-family: "Noto Sans", sans-serif; + font-size: 12px; + line-height: 1.5; + margin-bottom: 1.6em; +} + +@media screen and (min-width: 46.25em) { + .wp-block-latest-comments__comment-date { + font-size: 14px; + } +} + +@media screen and (min-width: 55em) { + .wp-block-latest-comments__comment-date { + font-size: 16px; + } +} + +@media screen and (min-width: 59.6875em) { + .wp-block-latest-comments__comment-date { + font-size: 12px; + } +} + +@media screen and (min-width: 68.75em) { + .wp-block-latest-comments__comment-date { + font-size: 14px; + } +} + +@media screen and (min-width: 77.5em) { + .wp-block-latest-comments__comment-date { + font-size: 16px; + } +} + +.wp-block-latest-comments .wp-block-latest-comments__comment { + border-top: 1px solid #eaeaea; + border-top: 1px solid rgba(51, 51, 51, 0.1); + margin-bottom: 0; + padding: 1.6em 0; +} + +/* Latest Posts */ + +.edit-post-visual-editor .wp-block-latest-posts.is-grid { + list-style: none; + margin-left: 0; + margin-right: 0; +} + +.edit-post-visual-editor .wp-block-latest-posts.is-grid li { + margin-bottom: 16px; +} diff --git a/wp-content/themes/twentyfifteen/functions.php b/wp-content/themes/twentyfifteen/functions.php index b6161927a1..5f953e9d0a 100644 --- a/wp-content/themes/twentyfifteen/functions.php +++ b/wp-content/themes/twentyfifteen/functions.php @@ -142,6 +142,76 @@ function twentyfifteen_setup() { */ add_editor_style( array( 'css/editor-style.css', 'genericons/genericons.css', twentyfifteen_fonts_url() ) ); + // 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' => __( 'Dark Gray', 'twentyfifteen' ), + 'slug' => 'dark-gray', + 'color' => '#111', + ), + array( + 'name' => __( 'Light Gray', 'twentyfifteen' ), + 'slug' => 'light-gray', + 'color' => '#f1f1f1', + ), + array( + 'name' => __( 'White', 'twentyfifteen' ), + 'slug' => 'white', + 'color' => '#fff', + ), + array( + 'name' => __( 'Yellow', 'twentyfifteen' ), + 'slug' => 'yellow', + 'color' => '#f4ca16', + ), + array( + 'name' => __( 'Dark Brown', 'twentyfifteen' ), + 'slug' => 'dark-brown', + 'color' => '#352712', + ), + array( + 'name' => __( 'Medium Pink', 'twentyfifteen' ), + 'slug' => 'medium-pink', + 'color' => '#e53b51', + ), + array( + 'name' => __( 'Light Pink', 'twentyfifteen' ), + 'slug' => 'light-pink', + 'color' => '#ffe5d1', + ), + array( + 'name' => __( 'Dark Purple', 'twentyfifteen' ), + 'slug' => 'dark-purple', + 'color' => '#2e2256', + ), + array( + 'name' => __( 'Purple', 'twentyfifteen' ), + 'slug' => 'purple', + 'color' => '#674970', + ), + array( + 'name' => __( 'Blue Gray', 'twentyfifteen' ), + 'slug' => 'blue-gray', + 'color' => '#22313f', + ), + array( + 'name' => __( 'Bright Blue', 'twentyfifteen' ), + 'slug' => 'bright-blue', + 'color' => '#55c3dc', + ), + array( + 'name' => __( 'Light Blue', 'twentyfifteen' ), + 'slug' => 'light-blue', + 'color' => '#e9f2f9', + ), + ) ); + // Indicate widget sidebars can use selective refresh in the Customizer. add_theme_support( 'customize-selective-refresh-widgets' ); } @@ -259,6 +329,9 @@ function twentyfifteen_scripts() { // Load our main stylesheet. wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() ); + // Theme block stylesheet. + wp_enqueue_style( 'twentyfifteen-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentyfifteen-style' ), '20181018' ); + // Load the Internet Explorer specific stylesheet. wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' ); wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' ); @@ -285,6 +358,20 @@ function twentyfifteen_scripts() { } add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' ); +/** + * Enqueue editor styles for Gutenberg + * + * @since Twenty Fifteen 2.1 + */ +function twentyfifteen_block_editor_styles() { + // Block styles. + wp_enqueue_style( 'twentyfifteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' ); + // Add custom fonts. + wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url(), array(), null ); +} +add_action( 'enqueue_block_editor_assets', 'twentyfifteen_block_editor_styles' ); + + /** * Add preconnect for Google Fonts. * diff --git a/wp-includes/version.php b/wp-includes/version.php index 327702f177..712c5f607b 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -4,7 +4,7 @@ * * @global string $wp_version */ -$wp_version = '5.0-alpha-43797'; +$wp_version = '5.0-alpha-43798'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.