From 878a6359dcca0e723e9444d202b91c27dfb08435 Mon Sep 17 00:00:00 2001 From: "David A. Kennedy" Date: Tue, 23 Oct 2018 06:14:17 +0000 Subject: [PATCH] Twenty Seventeen: 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 Seventeen. 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. Props laurelfulford, ianbelanger, crunnells. Fixes #45045. Built from https://develop.svn.wordpress.org/branches/5.0@43800 git-svn-id: http://core.svn.wordpress.org/branches/5.0@43629 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../twentyseventeen/assets/css/blocks.css | 275 +++++++ .../assets/css/editor-blocks.css | 776 ++++++++++++++++++ .../themes/twentyseventeen/functions.php | 22 + wp-includes/version.php | 2 +- 4 files changed, 1074 insertions(+), 1 deletion(-) create mode 100644 wp-content/themes/twentyseventeen/assets/css/blocks.css create mode 100644 wp-content/themes/twentyseventeen/assets/css/editor-blocks.css diff --git a/wp-content/themes/twentyseventeen/assets/css/blocks.css b/wp-content/themes/twentyseventeen/assets/css/blocks.css new file mode 100644 index 0000000000..6a3518fa21 --- /dev/null +++ b/wp-content/themes/twentyseventeen/assets/css/blocks.css @@ -0,0 +1,275 @@ +/* +Theme Name: Twenty Seventeen +Description: Used to style Gutenberg Blocks. +*/ + +/*-------------------------------------------------------------- +>>> TABLE OF CONTENTS: +---------------------------------------------------------------- +1.0 Blocks - Common Blocks +2.0 Blocks - Formatting +3.0 Blocks - Layout Elements +4.0 Blocks - Widgets +--------------------------------------------------------------*/ + +/*-------------------------------------------------------------- +1.0 General Block Styles +--------------------------------------------------------------*/ + +/* Captions */ + +[class^="wp-block-"]:not(.wp-block-gallery) figcaption { + font-style: italic; + margin-bottom: 1.5em; + text-align: left; +} + +.rtl [class^="wp-block-"]:not(.wp-block-gallery) figcaption { + text-align: right; +} + +/*-------------------------------------------------------------- +2.0 Blocks - Common Blocks +--------------------------------------------------------------*/ + +/* Paragraph */ + +p.has-drop-cap:not(:focus)::first-letter { + font-size: 5em; + margin-top: 0.075em; +} + +/* Image */ + +.wp-block-image { + margin-bottom: 1.5em; +} + +.wp-block-image figure { + margin-bottom: 0; + margin-top: 0; +} + +.wp-block-image figure.alignleft { + margin-right: 1.5em; +} + +.wp-block-image figure.alignright { + margin-left: 1.5em; +} + +/* Gallery */ + +.wp-block-gallery { + margin-bottom: 1.5em; +} + +.wp-block-gallery figcaption { + font-style: italic; +} + +.wp-block-gallery.aligncenter { + display: flex; + margin: 0 -8px; +} + +/* Quote */ + +.wp-block-quote:not(.is-large):not(.is-style-large) { + border: 0; + padding: 0; +} + +.wp-block-quote.alignleft p:last-of-type, +.wp-block-quote.alignright p:last-of-type { + margin-bottom: 0; +} + +.wp-block-quote cite { + color: inherit; + font-size: inherit; +} + +/* Audio */ + +.wp-block-audio audio { + display: block; + width: 100%; +} + +/* Cover Image */ + +.wp-block-cover-image.alignright, +.wp-block-cover-image.alignleft, +.wp-block-cover-image.aligncenter { + display: flex; +} + +/* File */ + +.wp-block-file .wp-block-file__button { + background-color: #222; + -webkit-border-radius: 2px; + border-radius: 2px; + -webkit-box-shadow: none; + box-shadow: none; + color: #fff; + display: inline-block; + font-size: 14px; + font-size: 0.875rem; + font-weight: 800; + margin-top: 2em; + padding: 0.7em 2em; + -webkit-transition: background-color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out; + white-space: nowrap; +} + +.wp-block-file .wp-block-file__button:hover, +.wp-block-file .wp-block-file__button:focus { + background-color: #767676; + -webkit-box-shadow: none; + box-shadow: none; +} + +/*-------------------------------------------------------------- +3.0 Blocks - Formatting +--------------------------------------------------------------*/ + +/* Code */ + +.wp-block-code { + background: transparent; + border: 0; + padding: 0; +} + +/* Pullquote */ + +.wp-block-pullquote { + border: 0; +} + +.wp-block-pullquote__citation, +.wp-block-pullquote cite { + font-size: inherit; + text-transform: none; +} + +/* Table */ + +.wp-block-table thead th { + border-bottom: 2px solid #bbb; + padding-bottom: 0.5em; +} + +.wp-block-table tr { + border-bottom: 1px solid #eee; +} + +.wp-block-table th, +.wp-block-table td { + border: 0; +} + +.rtl .wp-block-table th, +.rtl .wp-block-table td { + text-align: right; +} + +/*-------------------------------------------------------------- +4.0 Blocks - Layout Elements +--------------------------------------------------------------*/ + +/* Buttons */ + +.wp-block-button .wp-block-button__link { + background-color: #222; + -webkit-border-radius: 2px; + border-radius: 2px; + -webkit-box-shadow: none; + box-shadow: none; + color: #fff; + display: inline-block; + font-size: 14px; + font-size: 0.875rem; + font-weight: 800; + line-height: 1.66; + margin-top: 2em; + padding: 0.7em 2em; + -webkit-transition: background-color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out; + white-space: nowrap; +} + +.wp-block-button .wp-block-button__link:hover, +.wp-block-button .wp-block-button__link:focus { + background-color: #767676; + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Separator */ + +.wp-block-separator { + border: 0; +} + +.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { + max-width: 100px; +} + +/*-------------------------------------------------------------- +5.0 Blocks - Widgets +--------------------------------------------------------------*/ + +/* Comments */ + +.wp-block-latest-comments article { + margin-bottom: 4em; +} + +.blog:not(.has-sidebar) #primary .wp-block-latest-comments article, +.archive:not(.page-one-column):not(.has-sidebar) #primary .wp-block-latest-comments article, +.search:not(.has-sidebar) #primary .wp-block-latest-comments article { + float: none; + width: 100%; +} + +.wp-block-latest-comments .avatar, +.wp-block-latest-comments__comment-avatar { + border-radius: 0; +} + +.wp-block-latest-comments a { + -webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1); + box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1); + +} + +.wp-block-latest-comments__comment-meta { + font-size: 16px; + font-size: 1rem; + margin-bottom: 0.4em; +} + +.wp-block-latest-comments__comment-author, +.wp-block-latest-comments__comment-link { + font-weight: 700; + text-decoration: none; +} + +.wp-block-latest-comments__comment-date { + color: #767676; + font-size: 10px; + font-size: 0.625rem; + font-weight: 800; + letter-spacing: 0.1818em; + margin-top: 0.4em; + text-transform: uppercase; +} + +.editor-block-list__block .wp-block-latest-comments__comment-excerpt p { + font-size: 14px; + font-size: 0.875rem; +} diff --git a/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css b/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css new file mode 100644 index 0000000000..f9e3d66edd --- /dev/null +++ b/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css @@ -0,0 +1,776 @@ +/* +Theme Name: Twenty Seventeen +Description: Used to style Gutenberg Blocks in the editor. +*/ + +/*-------------------------------------------------------------- +>>> TABLE OF CONTENTS: +---------------------------------------------------------------- +1.0 General Typography +2.0 General Block Settings +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, +.editor-default-block-appender input[type="text"].editor-default-block-appender__content { + font-size: 15px; + font-size: 0.9375rem; +} + +.edit-post-visual-editor .editor-block-list__block { + color: #333; +} + +.editor-post-title__block .editor-post-title__input { + color: #333; + font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif; + font-size: 20px; + font-size: 1.25rem; + font-weight: 300; +} + +@media screen and (min-width: 30em) { + + .edit-post-visual-editor .editor-block-list__block { + font-size: 18px; + font-size: 1.125rem; + } + + .editor-post-title__block .editor-post-title__input { + font-size: 26px; + font-size: 1.625rem; + } + + .edit-post-visual-editor .editor-block-list__block h1 { + font-size: 30px; + font-size: 1.875rem; + } + + .edit-post-visual-editor .editor-block-list__block h2 { + font-size: 26px; + font-size: 1.625rem; + } + + .edit-post-visual-editor .editor-block-list__block h3 { + font-size: 22px; + font-size: 1.375rem; + } + + .edit-post-visual-editor .editor-block-list__block h4 { + font-size: 18px; + font-size: 1.125rem; + } + + .edit-post-visual-editor .editor-block-list__block h5 { + font-size: 13px; + font-size: 0.8125rem; + } + + .edit-post-visual-editor .editor-block-list__block h6 { + font-size: 16px; + font-size: 1rem; + } +} + +@media screen and (min-width: 48em) { + + .edit-post-visual-editor .editor-block-list__block { + font-size: 16px; + font-size: 1rem; + } + + .editor-rich-text__tinymce.mce-content-body { + line-height: 1.5; + } +} + +/* Typography for Arabic Font */ + +html[lang="ar"] .edit-post-visual-editor .editor-block-list__block, +html[lang="ary"] .edit-post-visual-editor .editor-block-list__block, +html[lang="azb"] .edit-post-visual-editor .editor-block-list__block, +html[lang="fa-IR"] .edit-post-visual-editor .editor-block-list__block, +html[lang="haz"] .edit-post-visual-editor .editor-block-list__block, +html[lang="ps"] .edit-post-visual-editor .editor-block-list__block, +html[lang="ur"] .edit-post-visual-editor .editor-block-list__block { + font-family: Tahoma, Arial, sans-serif; +} + +html[lang="ar"] .edit-post-visual-editor h1, +html[lang="ar"] .edit-post-visual-editor h2, +html[lang="ar"] .edit-post-visual-editor h3, +html[lang="ar"] .edit-post-visual-editor h4, +html[lang="ar"] .edit-post-visual-editor h5, +html[lang="ar"] .edit-post-visual-editor h6, +html[lang="ary"] .edit-post-visual-editor h1, +html[lang="ary"] .edit-post-visual-editor h2, +html[lang="ary"] .edit-post-visual-editor h3, +html[lang="ary"] .edit-post-visual-editor h4, +html[lang="ary"] .edit-post-visual-editor h5, +html[lang="ary"] .edit-post-visual-editor h6, +html[lang="azb"] .edit-post-visual-editor h1, +html[lang="azb"] .edit-post-visual-editor h2, +html[lang="azb"] .edit-post-visual-editor h3, +html[lang="azb"] .edit-post-visual-editor h4, +html[lang="azb"] .edit-post-visual-editor h5, +html[lang="azb"] .edit-post-visual-editor h6, +html[lang="fa-IR"] .edit-post-visual-editor h1, +html[lang="fa-IR"] .edit-post-visual-editor h2, +html[lang="fa-IR"] .edit-post-visual-editor h3, +html[lang="fa-IR"] .edit-post-visual-editor h4, +html[lang="fa-IR"] .edit-post-visual-editor h5, +html[lang="fa-IR"] .edit-post-visual-editor h6, +html[lang="haz"] .edit-post-visual-editor h1, +html[lang="haz"] .edit-post-visual-editor h2, +html[lang="haz"] .edit-post-visual-editor h3, +html[lang="haz"] .edit-post-visual-editor h4, +html[lang="haz"] .edit-post-visual-editor h5, +html[lang="haz"] .edit-post-visual-editor h6, +html[lang="ps"] .edit-post-visual-editor h1, +html[lang="ps"] .edit-post-visual-editor h2, +html[lang="ps"] .edit-post-visual-editor h3, +html[lang="ps"] .edit-post-visual-editor h4, +html[lang="ps"] .edit-post-visual-editor h5, +html[lang="ps"] .edit-post-visual-editor h6, +html[lang="ur"] .edit-post-visual-editor h1, +html[lang="ur"] .edit-post-visual-editor h2, +html[lang="ur"] .edit-post-visual-editor h3, +html[lang="ur"] .edit-post-visual-editor h4, +html[lang="ur"] .edit-post-visual-editor h5, +html[lang="ur"] .edit-post-visual-editor h6 { + font-weight: 700; +} + +/* Typography for Chinese Font */ + +html[lang^="zh-"] .edit-post-visual-editor .editor-block-list__block, +html[lang="zh-CN"] .edit-post-visual-editor .editor-block-list__block { + font-family: "PingFang TC", "Helvetica Neue", Helvetica, STHeitiTC-Light, Arial, sans-serif; +} + +html[lang^="zh-"] .edit-post-visual-editor h1, +html[lang^="zh-"] .edit-post-visual-editor h2, +html[lang^="zh-"] .edit-post-visual-editor h3, +html[lang^="zh-"] .edit-post-visual-editor h4, +html[lang^="zh-"] .edit-post-visual-editor h5, +html[lang^="zh-"] .edit-post-visual-editor h6 { + font-weight: 700; +} + +/* Typography for Cyrillic Font */ + +html[lang="bg-BG"] .edit-post-visual-editor .editor-block-list__block, +html[lang="ru-RU"] .edit-post-visual-editor .editor-block-list__block, +html[lang="uk"] .edit-post-visual-editor .editor-block-list__block { + font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif; +} + +html[lang="bg-BG"] .edit-post-visual-editor h1, +html[lang="bg-BG"] .edit-post-visual-editor h2, +html[lang="bg-BG"] .edit-post-visual-editor h3, +html[lang="bg-BG"] .edit-post-visual-editor h4, +html[lang="bg-BG"] .edit-post-visual-editor h5, +html[lang="bg-BG"] .edit-post-visual-editor h6, +html[lang="ru-RU"] .edit-post-visual-editor h1, +html[lang="ru-RU"] .edit-post-visual-editor h2, +html[lang="ru-RU"] .edit-post-visual-editor h3, +html[lang="ru-RU"] .edit-post-visual-editor h4, +html[lang="ru-RU"] .edit-post-visual-editor h5, +html[lang="ru-RU"] .edit-post-visual-editor h6, +html[lang="uk"] .edit-post-visual-editor h1, +html[lang="uk"] .edit-post-visual-editor h2, +html[lang="uk"] .edit-post-visual-editor h3, +html[lang="uk"] .edit-post-visual-editor h4, +html[lang="uk"] .edit-post-visual-editor h5, +html[lang="uk"] .edit-post-visual-editor h6 { + font-weight: 700; + line-height: 1.2; +} + +/* Typography for Devanagari Font */ + +html[lang="bn-BD"] .edit-post-visual-editor .editor-block-list__block, +html[lang="hi-IN"] .edit-post-visual-editor .editor-block-list__block, +html[lang="mr-IN"] .edit-post-visual-editor .editor-block-list__block { + font-family: Arial, sans-serif; +} + +html[lang="bn-BD"] .edit-post-visual-editor h1, +html[lang="bn-BD"] .edit-post-visual-editor h2, +html[lang="bn-BD"] .edit-post-visual-editor h3, +html[lang="bn-BD"] .edit-post-visual-editor h4, +html[lang="bn-BD"] .edit-post-visual-editor h5, +html[lang="bn-BD"] .edit-post-visual-editor h6, +html[lang="hi-IN"] .edit-post-visual-editor h1, +html[lang="hi-IN"] .edit-post-visual-editor h2, +html[lang="hi-IN"] .edit-post-visual-editor h3, +html[lang="hi-IN"] .edit-post-visual-editor h4, +html[lang="hi-IN"] .edit-post-visual-editor h5, +html[lang="hi-IN"] .edit-post-visual-editor h6, +html[lang="mr-IN"] .edit-post-visual-editor h1, +html[lang="mr-IN"] .edit-post-visual-editor h2, +html[lang="mr-IN"] .edit-post-visual-editor h3, +html[lang="mr-IN"] .edit-post-visual-editor h4, +html[lang="mr-IN"] .edit-post-visual-editor h5, +html[lang="mr-IN"] .edit-post-visual-editor h6 { + font-weight: 700; +} + +/* Typography for Greek Font */ + +html[lang="el"] .edit-post-visual-editor .editor-block-list__block { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +html[lang="el"] .edit-post-visual-editor h1, +html[lang="el"] .edit-post-visual-editor h2, +html[lang="el"] .edit-post-visual-editor h3, +html[lang="el"] .edit-post-visual-editor h4, +html[lang="el"] .edit-post-visual-editor h5, +html[lang="el"] .edit-post-visual-editor h6 { + font-weight: 700; + line-height: 1.3; +} + +/* Typography for Gujarati Font */ + +html[lang="gu-IN"] .edit-post-visual-editor .editor-block-list__block { + font-family: Arial, sans-serif; +} + +html[lang="gu-IN"] .edit-post-visual-editor h1, +html[lang="gu-IN"] .edit-post-visual-editor h2, +html[lang="gu-IN"] .edit-post-visual-editor h3, +html[lang="gu-IN"] .edit-post-visual-editor h4, +html[lang="gu-IN"] .edit-post-visual-editor h5, +html[lang="gu-IN"] .edit-post-visual-editor h6 { + font-weight: 700; +} + +/* Typography for Hebrew Font */ + +html[lang="he-IL"] .edit-post-visual-editor .editor-block-list__block { + font-family: "Arial Hebrew", Arial, sans-serif; +} + +html[lang="he-IL"] .edit-post-visual-editor h1, +html[lang="he-IL"] .edit-post-visual-editor h2, +html[lang="he-IL"] .edit-post-visual-editor h3, +html[lang="he-IL"] .edit-post-visual-editor h4, +html[lang="he-IL"] .edit-post-visual-editor h5, +html[lang="he-IL"] .edit-post-visual-editor h6 { + font-weight: 700; +} + +/* Typography for Japanese Font */ + +html[lang="ja"] .edit-post-visual-editor .editor-block-list__block { + font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif; +} + +html[lang="ja"] .edit-post-visual-editor h1, +html[lang="ja"] .edit-post-visual-editor h2, +html[lang="ja"] .edit-post-visual-editor h3, +html[lang="ja"] .edit-post-visual-editor h4, +html[lang="ja"] .edit-post-visual-editor h5, +html[lang="ja"] .edit-post-visual-editor h6 { + font-weight: 700; +} + +/* Typography for Korean font */ + +html[lang="ko-KR"] .edit-post-visual-editor .editor-block-list__block { + font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", Dotum, sans-serif; +} + +html[lang="ko-KR"] .edit-post-visual-editor h1, +html[lang="ko-KR"] .edit-post-visual-editor h2, +html[lang="ko-KR"] .edit-post-visual-editor h3, +html[lang="ko-KR"] .edit-post-visual-editor h4, +html[lang="ko-KR"] .edit-post-visual-editor h5, +html[lang="ko-KR"] .edit-post-visual-editor h6 { + font-weight: 600; +} + +/* Typography for Thai Font */ + +html[lang="th"] .edit-post-visual-editor .editor-block-list__block { + line-height: 1.8; + font-family: "Sukhumvit Set", "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +html[lang="th"] .edit-post-visual-editor h1, +html[lang="th"] .edit-post-visual-editor h2, +html[lang="th"] .edit-post-visual-editor h3, +html[lang="th"] .edit-post-visual-editor h4, +html[lang="th"] .edit-post-visual-editor h5, +html[lang="th"] .edit-post-visual-editor h6 { + line-height: 1.65; + font-family: "Sukhumvit Set", "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +/* Remove letter-spacing for all non-latin alphabets */ + +html[lang="ar"] .edit-post-visual-editor *, +html[lang="ary"] .edit-post-visual-editor *, +html[lang="azb"] .edit-post-visual-editor *, +html[lang="haz"] .edit-post-visual-editor *, +html[lang="ps"] .edit-post-visual-editor *, +html[lang^="zh-"] .edit-post-visual-editor *, +html[lang="bg-BG"] .edit-post-visual-editor *, +html[lang="ru-RU"] .edit-post-visual-editor *, +html[lang="uk"] .edit-post-visual-editor *, +html[lang="bn-BD"] .edit-post-visual-editor *, +html[lang="hi-IN"] .edit-post-visual-editor *, +html[lang="mr-IN"] .edit-post-visual-editor *, +html[lang="el"] .edit-post-visual-editor *, +html[lang="gu-IN"] .edit-post-visual-editor *, +html[lang="he-IL"] .edit-post-visual-editor *, +html[lang="ja"] .edit-post-visual-editor *, +html[lang="ko-KR"] .edit-post-visual-editor *, +html[lang="th"] .edit-post-visual-editor * { + letter-spacing: 0 !important; +} + +/*-------------------------------------------------------------- +2.0 General Block Settings +--------------------------------------------------------------*/ + +/* 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: 740px; +} + +/* Background color */ + +.gutenberg-editor-page .editor-block-list__block { + background-color: transparent; +} + +/* Alignments */ + +.edit-post-visual-editor .alignleft { + margin-right: 1.5em; +} + +.edit-post-visual-editor .alignright { + margin-left: 1.5em; +} + +/* Link styles */ + +.edit-post-visual-editor a, +.editor-block-list__block a, +.wp-block-freeform.block-library-rich-text__tinymce a { + color: #222; +} + +/* 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, +.block-library-list .editor-rich-text__tinymce { + margin: 0 0 1.5em 1.5em; + 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 li > ul:not(.wp-block-gallery), +.editor-block-list__block li > ul:not(.wp-block-gallery), +.block-library-list li > ul:not(.wp-block-gallery), +.edit-post-visual-editor li > ol, +.editor-block-list__block li > ol, +.block-library-list li > ol { + margin-bottom: 0; + margin-left: 1.5em; +} + +.edit-post-visual-editor li, +.editor-block-list__block li, +.block-library-list li { + margin: 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, +.rtl .block-library-list .editor-rich-text__tinymce, +.rtl .edit-post-visual-editor li > ul:not(.wp-block-gallery), +.rtl .editor-block-list__block li > ul:not(.wp-block-gallery), +.rtl .block-library-list li > ul:not(.wp-block-gallery), +.rtl .edit-post-visual-editor li > ol, +.rtl .editor-block-list__block li > ol, +.rtl .block-library-list li > ol { + margin-left: 1.5em; + margin-right: 1.5em; +} + +/* Quote styles */ + +.editor-block-list__block blockquote p { + font-size: 18px; + font-size: 1.125rem; +} + +.editor-block-list__block blockquote.alignright p, +.editor-block-list__block blockquote.alignleft p { + font-size: 13px; + font-size: 0.8125rem; +} + +.editor-block-list__block blockquote cite { + display: block; + font-style: normal; + font-weight: 600; + margin-top: 0.5em; +} + +/* Caption styles*/ + +[class^="wp-block-"]:not(.wp-block-gallery) figcaption { + font-style: italic; + margin-bottom: 1.5em; + text-align: left; +} + +.rtl [class^="wp-block-"]:not(.wp-block-gallery) figcaption { + text-align: right; +} + +/* Code styles */ + +.wp-block-freeform.block-library-rich-text__tinymce code { + background: transparent; +} + +/* Table styles */ + +.rtl .editor-block-list__block th { + text-align: right; +} + +/*-------------------------------------------------------------- +3.0 Blocks - Common Blocks +--------------------------------------------------------------*/ + +/* Paragraph */ + +.wp-block-paragraph.has-drop-cap:not(:focus)::first-letter { + font-size: 5em; + margin-top: 0.075em; +} + +/* Gallery */ + +.wp-block-gallery figcaption { + font-style: italic; +} + +/* Quote */ + +.wp-block-quote { + color: #666; + font-size: 18px; + font-size: 1.125rem; + font-style: italic; + line-height: 1.7; +} + +.wp-block-quote:not(.is-large):not(.is-style-large) { + border: 0; + padding: 0; +} + +.editor-block-list__block .wp-block-quote .wp-block-quote__citation { + color: inherit; + display: block; + font-size: inherit; + font-style: normal; + font-weight: 600; + margin-top: 0.5em; +} + +.wp-block-quote.alignleft, +.wp-block-quote.alignright { + color: #666; + width: 48%; +} + +.editor-block-list__block .wp-block-quote.alignleft p, +.editor-block-list__block .wp-block-quote.alignright p, +.editor-block-list__block .wp-block-quote.alignleft .wp-block-quote__citation, +.editor-block-list__block .wp-block-quote.alignright .wp-block-quote__citation { + font-size: 13px; + font-size: 0.8125rem; +} + +.editor-block-list__block .wp-block-quote.alignleft p:last-of-type, +.editor-block-list__block .wp-block-quote.alignright p:last-of-type { + margin-bottom: 0; +} + +.wp-block-quote.is-large .wp-block-quote__citation, +.wp-block-quote.is-style-large .wp-block-quote__citation { + text-align: right; +} + +.rtl .wp-block-quote.is-large .wp-block-quote__citation, +.rtl .wp-block-quote.is-style-large .wp-block-quote__citation { + text-align: left; +} + +@media screen and (min-width: 30em) { + .editor-block-list__block .wp-block-quote.alignleft p, + .editor-block-list__block .wp-block-quote.alignright p, + .editor-block-list__block .wp-block-quote.alignleft .wp-block-quote__citation, + .editor-block-list__block .wp-block-quote.alignright .wp-block-quote__citation, + .editor-block-list__block .wp-block-quote footer { + font-size: 14px; + font-size: 0.875rem; + } +} + +@media screen and (min-width: 48em) { + .editor-block-list__block .wp-block-quote.alignleft p, + .editor-block-list__block .wp-block-quote.alignright p, + .editor-block-list__block .wp-block-quote.alignleft .wp-block-quote__citation, + .editor-block-list__block .wp-block-quote.alignright .wp-block-quote__citation { + font-size: 13px; + font-size: 0.8125rem; + } + + .editor-block-list__block .wp-block-quote.alignleft { + margin-left: -17.5%; + width: 48%; + } + + .editor-block-list__block .wp-block-quote.alignright { + margin-right: -17.5%; + width: 48%; + } +} + +/* File */ + +.wp-block-file .wp-block-file__textlink { + -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 0 rgba(0, 0, 0, 1); + box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 0 rgba(0, 0, 0, 1); +} + +.wp-block-file .wp-block-file__button { + background-color: #222; + -webkit-border-radius: 2px; + border-radius: 2px; + -webkit-box-shadow: none; + box-shadow: none; + color: #fff; + display: inline-block; + font-size: 14px; + font-size: 0.875rem; + font-weight: 800; + padding: 0.7em 2em; + -webkit-transition: background-color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out; + white-space: nowrap; +} + +/*-------------------------------------------------------------- +4.0 Blocks - Formatting +--------------------------------------------------------------*/ + +/* Code */ + +.wp-block-code { + border: 0; + padding: 0; +} + +/* Classic */ + +.wp-block-freeform.block-library-rich-text__tinymce li, +.wp-block-freeform.block-library-rich-text__tinymce p { + line-height: 1.5; +} + +.wp-block-freeform.block-library-rich-text__tinymce blockquote { + border: 0; + padding: 0; +} + +/* Pullquote */ + +.wp-block-pullquote { + border: 0; +} + +.wp-block-pullquote.alignleft blockquote > .editor-rich-text p, +.wp-block-pullquote.alignright blockquote > .editor-rich-text p { + font-size: 20px; +} + + +.wp-block-pullquote .wp-block-pullquote__citation { + font-size: inherit; + font-weight: 600; + text-transform: none; +} + +/* Table */ + +table.wp-block-table { + border-collapse: collapse; + margin: 0 0 1.5em; + width: 100%; +} + +table.wp-block-table thead th { + border: 0; + border-bottom: 2px solid #bbb; + padding-bottom: 0.5em; +} + +table.wp-block-table th { + padding: 0.4em; + text-align: left; +} + +table.wp-block-table tr { + border-bottom: 1px solid #eee; +} + +table.wp-block-table td { + border: 0; + padding: 0.4em; +} + +table.wp-block-table th:first-child, +table.wp-block-table td:first-child { + padding-left: 0; +} + +table.wp-block-table th:last-child, +table.wp-block-table td:last-child { + padding-right: 0; +} + +.wp-block-table__cell-content { + padding: 0; +} + +.rtl table.wp-block-table th, +.rtl table.wp-block-table td { + text-align: right; +} + +/*-------------------------------------------------------------- +5.0 Blocks - Layout Elements +--------------------------------------------------------------*/ + +/* Separators */ + +.edit-post-visual-editor .wp-block-separator { + border: 0; +} + +/* Buttons */ + +.wp-block-button .wp-block-button__link { + background-color: #222; + -webkit-border-radius: 2px; + border-radius: 2px; + -webkit-box-shadow: none; + box-shadow: none; + color: #fff; + display: inline-block; + font-size: 14px; + font-size: 0.875rem; + font-weight: 800; + line-height: 1.66; + margin-top: 2em; + padding: 0.7em 2em; + -webkit-transition: background-color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out; + white-space: nowrap; +} +/*-------------------------------------------------------------- +6.0 Blocks - Widgets +--------------------------------------------------------------*/ + +/* Latest Comments */ + +.editor-block-list__block ol.wp-block-latest-comments > li:before { + content: ''; +} + +.wp-block-latest-comments article { + margin-bottom: 4em; +} + +.wp-block-latest-comments .avatar, +.wp-block-latest-comments__comment-avatar { + border-radius: 0; +} + +.wp-block-latest-comments__comment-meta { + font-size: 16px; + font-size: 1rem; + margin-bottom: 0.4em; +} + +.editor-block-list__block .wp-block-latest-comments__comment-meta a { + -webkit-box-shadow: none; + box-shadow: none; + font-weight: 700; +} + +.wp-block-latest-comments__comment-date { + color: #767676; + font-size: 10px; + font-size: 0.625rem; + font-weight: 800; + letter-spacing: 0.1818em; + margin-top: 0.4em; + text-transform: uppercase; +} + +.editor-block-list__block .wp-block-latest-comments__comment-excerpt p { + font-size: 14px; + font-size: 0.875rem; +} + +/* Latest Posts */ + +.edit-post-visual-editor .wp-block-latest-posts.is-grid { + list-style: none; + margin-left: 0; + margin-right: 0; +} diff --git a/wp-content/themes/twentyseventeen/functions.php b/wp-content/themes/twentyseventeen/functions.php index 14e1a625da..e4282e5fd3 100644 --- a/wp-content/themes/twentyseventeen/functions.php +++ b/wp-content/themes/twentyseventeen/functions.php @@ -106,6 +106,12 @@ function twentyseventeen_setup() { */ add_editor_style( array( 'assets/css/editor-style.css', twentyseventeen_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' ); + // Define and register starter content to showcase the theme on new sites. $starter_content = array( 'widgets' => array( @@ -415,6 +421,9 @@ function twentyseventeen_scripts() { // Theme stylesheet. wp_enqueue_style( 'twentyseventeen-style', get_stylesheet_uri() ); + // Theme block stylesheet. + wp_enqueue_style( 'twentyseventeen-block-style', get_theme_file_uri( '/assets/css/blocks.css' ), array( 'twentyseventeen-style' ), '1.0' ); + // Load the dark colorscheme. if ( 'dark' === get_theme_mod( 'colorscheme', 'light' ) || is_customize_preview() ) { wp_enqueue_style( 'twentyseventeen-colors-dark', get_theme_file_uri( '/assets/css/colors-dark.css' ), array( 'twentyseventeen-style' ), '1.0' ); @@ -459,6 +468,19 @@ function twentyseventeen_scripts() { } add_action( 'wp_enqueue_scripts', 'twentyseventeen_scripts' ); +/** + * Enqueue editor styles for Gutenberg + * + * @since Twenty Seventeen 1.8 + */ +function twentyseventeen_block_editor_styles() { + // Block styles. + wp_enqueue_style( 'twentyseventeen-block-editor-style', get_theme_file_uri( '/assets/css/editor-blocks.css' ) ); + // Add custom fonts. + wp_enqueue_style( 'twentyseventeen-fonts', twentyseventeen_fonts_url(), array(), null ); +} +add_action( 'enqueue_block_editor_assets', 'twentyseventeen_block_editor_styles' ); + /** * Add custom image sizes attribute to enhance responsive image functionality * for content images. diff --git a/wp-includes/version.php b/wp-includes/version.php index 1ff92bd017..ef856db6a5 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -4,7 +4,7 @@ * * @global string $wp_version */ -$wp_version = '5.0-alpha-43799'; +$wp_version = '5.0-alpha-43800'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.