Index: src/wp-content/themes/twentythirteen/css/blocks.css =================================================================== --- src/wp-content/themes/twentythirteen/css/blocks.css (nonexistent) +++ src/wp-content/themes/twentythirteen/css/blocks.css (working copy) @@ -0,0 +1,429 @@ +/* +Theme Name: Twenty Thirteen +Description: Used to style Gutenberg Blocks. +*/ + +/*-------------------------------------------------------------- +>>> TABLE OF CONTENTS: +---------------------------------------------------------------- +1.0 Block Alignments +2.0 General Block Styles +3.0 Blocks - Common Blocks +4.0 Blocks - Formatting +5.0 Blocks - Layout Elements +6.0 Blocks - Widgets +7.0 Blocks - Colors +--------------------------------------------------------------*/ + +/*-------------------------------------------------------------- +1.0 Block Alignments +--------------------------------------------------------------*/ + +.content-area { + overflow-x: hidden; /* prevents side-scrolling caused by use of vw */ +} + +.alignfull, +.alignwide { + clear: both; +} + +body:not(.sidebar) .alignwide { + margin-left: calc(25% - 25vw); + margin-right: calc(25% - 25vw); + width: auto; + max-width: 1600px; +} + +body:not(.sidebar) .alignfull { + margin-left: calc(50% - 50vw); + margin-right: calc(50% - 50vw); + width: auto; + max-width: 1600px; +} + +/* Make non image-based blocks a bit narrower, so they don't get cut off. */ +body:not(.sidebar) .wp-block-columns.alignfull, +body:not(.sidebar) .wp-block-audio.alignfull, +body:not(.sidebar) .wp-block-table.alignfull, +body:not(.sidebar) .wp-block-latest-comments.alignfull { + margin-left: calc(50% - 48vw); + margin-right: calc(50% - 48vw); +} + +@media (max-width: 999px) { + body.sidebar .alignwide { + margin-left: calc(25% - 25vw); + margin-right: calc(25% - 25vw); + width: auto; + max-width: 1600px; + } + + body.sidebar .alignfull { + margin-left: calc(50% - 50vw); + margin-right: calc(50% - 50vw); + width: auto; + max-width: 1600px; + } + + /* Make non image-based blocks a bit narrower, so they don't get cut off. */ + body.sidebar .wp-block-columns.alignfull, + body.sidebar .wp-block-audio.alignfull, + body.sidebar .wp-block-table.alignfull, + body.sidebar .wp-block-latest-comments.alignfull { + margin-left: calc(50% - 48vw); + margin-right: calc(50% - 48vw); + } +} + +/* Make sure the full and wide blocks still stay in Twenty Thirteen's wide container */ + +@media (min-width: 1600px) { + body:not(.sidebar) .alignfull { + margin-left: calc(50% - 800px); + margin-right: calc(50% - 800px); + width: auto; + max-width: 1000%; + } + + body:not(.sidebar) .wp-block-gallery.alignfull { + margin-left: calc(50% - 808px); /* Adjust for gallery margins */ + margin-right: calc(50% - 808px); + width: auto; + max-width: 1000%; + } +} + +/*-------------------------------------------------------------- +2.0 General Block Styles +--------------------------------------------------------------*/ + +/* Captions */ + +[class^="wp-block-"] figcaption, +[class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body { + color: #220e10; + font-size: 18px; + font-style: italic; + font-weight: 300; + line-height: 1.5; + margin: 0 0 24px; +} + +/*-------------------------------------------------------------- +3.0 Blocks - Common Blocks +--------------------------------------------------------------*/ + +/* Paragraph */ + +p.has-drop-cap:not(:focus)::first-letter { + font-size: 5em; +} + +/* Gallery */ + +.wp-block-gallery { + margin-bottom: 24px; +} + +.wp-block-gallery figcaption { + margin-bottom: 0; +} + +/* Quote */ + +.wp-block-quote { + margin: 24px 40px; + padding: 0; +} + +.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 p, +.wp-block-quote.is-style-large p { + font-size: 28px; +} + +.wp-block-quote cite { + color: inherit; + font-size: inherit; + font-style: italic; +} + +/* Audio */ + +.wp-block-audio audio { + display: block; + width: 100%; +} + +/* Cover Image */ + +.wp-block-cover-image.aligncenter { + clear: both; + display: flex; +} + +/* File */ + +.wp-block-file .wp-block-file__button { + background: #e05d22; /* Old browsers */ + background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */ + background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */ + border: none; + border-bottom: 3px solid #b93207; + border-radius: 2px; + color: #fff; + display: inline-block; + font-size: 16px; + padding: 11px 24px 10px; + text-decoration: none; +} + +.wp-block-file .wp-block-file__button:hover, +.wp-block-file .wp-block-file__button:focus { + background: #ed6a31; /* Old browsers */ + background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */ + background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */ + color: #fff; + outline: none; +} + +.wp-block-file .wp-block-file__button:active { + background: #d94412; /* Old browsers */ + background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */ + background: linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */ + border: none; + border-top: 3px solid #b93207; + padding: 10px 24px 11px; +} + +/*-------------------------------------------------------------- +4.0 Blocks - Formatting +--------------------------------------------------------------*/ + +/* Code */ + +.wp-block-code { + background-color: transparent; + border: 0; + padding: 0; +} + +/* Pullquote */ + +.wp-block-pullquote { + border: 0; + padding: 0.5em 0; +} + +.wp-block-pullquote__citation, +.wp-block-pullquote cite, +.wp-block-pullquote footer { + color: #141412; +} + +/* Table */ + +.wp-block-table { + border-bottom: 1px solid #ededed; + border-collapse: collapse; + border-spacing: 0; + font-size: 14px; + line-height: 2; + margin: 0 0 20px; + width: 100%; +} + +.wp-block-table th { + border: 0; + font-weight: bold; + text-transform: uppercase; +} + +.wp-block-table td { + border: 0; + border-top: 1px solid #ededed; +} + +/*-------------------------------------------------------------- +5.0 Blocks - Layout Elements +--------------------------------------------------------------*/ + +/* Buttons */ + +.wp-block-button .wp-block-button__link { + background: #e05d22; /* Old browsers */ + background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */ + background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */ + border: none; + border-bottom: 3px solid #b93207; + border-radius: 2px; + color: #fff; + display: inline-block; + font-size: 16px; + padding: 11px 24px 10px; + text-decoration: none; +} + +.wp-block-button .wp-block-button__link:hover, +.wp-block-button .wp-block-button__link:focus { + background: #ed6a31; /* Old browsers */ + background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */ + background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */ + color: #fff; + outline: none; +} + +.wp-block-button .wp-block-button__link:active { + background: #d94412; /* Old browsers */ + background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */ + background: linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */ + border: none; + border-top: 3px solid #b93207; + padding: 10px 24px 11px; +} + +/* Separator */ + +.wp-block-separator { + border: 0; + max-width: 100px; +} + +.wp-block-separator.is-style-wide { + max-width: 100%; +} + +/*-------------------------------------------------------------- +6.0 Blocks - Widgets +--------------------------------------------------------------*/ + +/* Latest Comments */ + +.wp-block-latest-comments { + margin: 0; + padding: 0; +} + +.wp-block-latest-comments .avatar, +.wp-block-latest-comments__comment-avatar { + border-radius: 0; +} + +.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-excerpt p:last-child { + margin-bottom: 0; +} + +.wp-block-latest-comments__comment-date { + font-size: 16px; +} + +.wp-block-latest-comments .wp-block-latest-comments__comment { + background: url(../images/dotted-line.png) repeat-x left top; + margin-bottom: 0; + padding: 24px 0; +} + +/*-------------------------------------------------------------- +7.0 Blocks - Colors +--------------------------------------------------------------*/ + +.has-dark-gray-color { + color: #141412; +} + +.has-dark-gray-background-color { + background-color: #141412; +} + +.has-red-color { + color: #bc360a; +} + +.has-red-background-color { + background-color: #bc360a; +} + +.has-medium-orange-color { + color: #db572f; +} + +.has-medium-orange-background-color { + background-color: #db572f; +} + +.has-light-orange-color { + color: #ea9629; +} + +.has-light-orange-background-color { + background-color: #ea9629; +} + +.has-yellow-color { + color: #fbca3c; +} + +.has-yellow-background-color { + background-color: #fbca3c; +} + +.has-white-color { + color: #fff; +} + +.has-white-background-color { + background-color: #fff; +} + +.has-dark-brown-color { + color: #220e10; +} + +.has-dark-brown-background-color { + background-color: #220e10; +} + +.has-medium-brown-color { + color: #722d19; +} + +.has-medium-brown-background-color { + background-color: #722d19; +} + +.has-light-brown-color { + color: #eadaa6; +} + +.has-light-brown-background-color { + background-color: #eadaa6; +} + +.has-beige-color { + color: #e8e5ce; +} + +.has-brown-background-color { + background-color: #e8e5ce; +} + +.has-off-white-color { + color: #f7f5e7; +} + +.has-off-white-background-color { + background-color: #f7f5e7; +} Index: src/wp-content/themes/twentythirteen/css/editor-blocks.css =================================================================== --- src/wp-content/themes/twentythirteen/css/editor-blocks.css (nonexistent) +++ src/wp-content/themes/twentythirteen/css/editor-blocks.css (working copy) @@ -0,0 +1,388 @@ +/* +Theme Name: Twenty Thirteen +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 Block Alignments +--------------------------------------------------------------*/ + +.editor-block-list__layout .editor-block-list__block[data-align="full"] > .editor-block-list__block-edit figure { + width: auto; +} + +/*-------------------------------------------------------------- +2.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-family: "Source Sans Pro", Helvetica, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; +} + +.edit-post-visual-editor .editor-block-list__block { + color: #141412; +} + +.editor-post-title__block .editor-post-title__input { + font-family: Bitter, Georgia, serif; + font-size: 48px; + font-weight: 300; + line-height: 1.0909090909; + margin-bottom: 12px; + margin: 0 0 12px 0; +} + +/*-------------------------------------------------------------- +3.0 General Block Styles +--------------------------------------------------------------*/ + +/* Main column width */ + +.edit-post-visual-editor .editor-post-title__block, +.edit-post-visual-editor .editor-default-block-appender, +.edit-post-visual-editor .editor-block-list__block { + max-width: 634px; /* 604 + 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: #bc360a; +} + +/* 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: 16px 0; + padding: 0 0 0 40px; +} + +.block-library-list .editor-rich-text__tinymce { + padding: 0 0 0 40px; +} + +.edit-post-visual-editor ul:not(.wp-block-gallery), +.edit-post-visual-editor .editor-block-list__block ul:not(.wp-block-gallery), +.block-library-list ul { + list-style-type: square; +} + +.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: 0; +} + +.edit-post-visual-editor ul:not(.wp-block-gallery) li, +.editor-block-list__block ul:not(.wp-block-gallery) li, +.edit-post-visual-editor ol li, +.editor-block-list__block ol li, +.block-library-list 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 { + padding-left: 0; + padding-right: 40px; +} + +.rtl .block-library-list .editor-rich-text__tinymce { + padding-left: 0; + padding-right: 40px; +} + +/* Quote */ + +.wp-block-freeform.block-library-rich-text__tinymce blockquote { + border-left: 0; + border-right: 0; + font-style: italic; + margin: 24px 40px; + padding-left: 0; + padding-right: 0; +} + +.wp-block-freeform.block-library-rich-text__tinymce blockquote p { + font-size: 24px; + font-weight: 300; +} + +/* Table */ + +.rtl .editor-block-list__block table th, +.rtl .editor-block-list__block table td { + text-align: right; +} + +/* 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 { + color: #220e10; + font-size: 18px; + font-style: italic; + font-weight: 300; + line-height: 1.5; + margin: 0 0 24px; +} + +/*-------------------------------------------------------------- +4.0 Blocks - Common Blocks +--------------------------------------------------------------*/ + +/* Paragraph */ + +p.has-drop-cap:not(:focus)::first-letter { + font-size: 5em; +} + +/* Gallery */ + +.edit-post-visual-editor .wp-block-gallery { + margin-bottom: 24px; + padding: 0; +} + +.wp-block-gallery figcaption, +.wp-block-gallery figcaption.editor-rich-text__tinymce.mce-content-body { + color: #fff; + font-size: 13px; + margin-bottom: 0; +} + +/* Quote */ + +.wp-block-quote { + font-style: italic; + margin: 24px 40px; + padding: 0; +} + +.editor-block-list__block .wp-block-quote p { + font-size: 24px; + font-weight: 300; +} + +.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 .wp-block-quote__citation.editor-rich-text__tinymce.mce-content-body { + color: inherit; + font-size: 16px; + font-style: italic; + text-transform: uppercase; +} + +.wp-block-quote.is-large p, +.wp-block-quote.is-style-large p { + font-size: 28px; +} + +.wp-block-quote.is-large .wp-block-quote__citation.editor-rich-text__tinymce.mce-content-body, +.wp-block-quote.is-style-large .wp-block-quote__citation.editor-rich-text__tinymce.mce-content-body { + font-size: 18px; +} + +/* Cover Image */ + +.edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p.wp-block-cover-image-text { + font-size: 32px; + line-height: 1.25; +} + +/* File */ + +.wp-block-file .wp-block-file__textlink { + color: #bc360a; +} + +.wp-block-file .wp-block-file__button { + background: #e05d22; /* Old browsers */ + background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */ + background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */ + border: none; + border-bottom: 3px solid #b93207; + border-radius: 2px; + color: #fff; + display: inline-block; + font-size: 16px; + line-height: 24px; + padding: 11px 24px 10px; + text-decoration: none; +} + +/*-------------------------------------------------------------- +5.0 Blocks - Formatting +--------------------------------------------------------------*/ + +/* Code */ + +.wp-block-code { + border: 0; + padding: 0; +} + +/* Pullquote */ + +.edit-post-visual-editor .wp-block-pullquote { + border: 0; + padding: 0.5em 0; +} + +.edit-post-visual-editor .editor-block-list__block .wp-block-pullquote p { + font-weight: 300; +} + +.edit-post-visual-editor .wp-block-pullquote__citation, +.edit-post-visual-editor .wp-block-pullquote cite, +.edit-post-visual-editor .wp-block-pullquote footer { + color: #141412; + font-size: 16px; +} + +/* Table */ + +.wp-block-table { + border-bottom: 1px solid #ededed; + border-collapse: collapse; + border-spacing: 0; + font-size: 14px; + line-height: 2; + margin: 0 0 20px; + width: 100%; +} + +.wp-block-table th { + border: 0; + font-weight: bold; + text-transform: uppercase; +} + +.editor-block-list__block .wp-block-table td { + border: 0; + border-top: 1px solid #ededed; + padding: 0; +} + +/*-------------------------------------------------------------- +6.0 Blocks - Layout Elements +--------------------------------------------------------------*/ + +/* Buttons */ + +.wp-block-button .wp-block-button__link { + background: #e05d22; /* Old browsers */ + background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */ + background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */ + border: none; + border-bottom: 3px solid #b93207; + border-radius: 2px; + color: #fff; + display: inline-block; + font-size: 16px; + line-height: 24px; + padding: 11px 24px 10px; + text-decoration: none; +} + +/* Separator */ + +.editor-block-list__block hr.wp-block-separator { + margin-left: auto; + margin-right: auto; +} + +/*-------------------------------------------------------------- +7.0 Blocks - Widgets +--------------------------------------------------------------*/ + +/* Latest Comments */ + +.editor-block-list__block .wp-block-latest-comments { + margin: 0; + padding: 0; +} + +.wp-block-latest-comments .avatar, +.wp-block-latest-comments__comment-avatar { + border-radius: 0; +} + +.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-excerpt p:last-child { + margin-bottom: 0; +} + +.wp-block-latest-comments__comment-date { + font-size: 16px; +} + +.wp-block-latest-comments .wp-block-latest-comments__comment { + background: url(../images/dotted-line.png) repeat-x left top; + margin-bottom: 0; + padding: 24px 0; +} + +/* Latest Posts */ + +.edit-post-visual-editor .editor-block-list__block .wp-block-latest-posts.is-grid { + list-style-type: none; + margin-left: 0; + margin-right: 0; +} + +.edit-post-visual-editor .wp-block-latest-posts.is-grid li { + margin-bottom: 1em; +} Index: src/wp-content/themes/twentythirteen/functions.php =================================================================== --- src/wp-content/themes/twentythirteen/functions.php (revision 43754) +++ src/wp-content/themes/twentythirteen/functions.php (working copy) @@ -74,6 +74,74 @@ */ add_editor_style( array( 'css/editor-style.css', 'genericons/genericons.css', twentythirteen_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 full and wide align images. + add_theme_support( 'align-wide' ); + + // Add support for custom color scheme. + add_theme_support( 'editor-color-palette', array( + array( + 'name' => __( 'Dark Gray', 'twentythirteen' ), + 'slug' => 'dark-gray', + 'color' => '#141412', + ), + array( + 'name' => __( 'Red', 'twentythirteen' ), + 'slug' => 'red', + 'color' => '#bc360a', + ), + array( + 'name' => __( 'Medium Orange', 'twentythirteen' ), + 'slug' => 'medium-orange', + 'color' => '#db572f', + ), + array( + 'name' => __( 'Light Orange', 'twentythirteen' ), + 'slug' => 'light-orange', + 'color' => '#ea9629', + ), + array( + 'name' => __( 'Yellow', 'twentythirteen' ), + 'slug' => 'yellow', + 'color' => '#fbca3c', + ), + array( + 'name' => __( 'White', 'twentythirteen' ), + 'slug' => 'white', + 'color' => '#fff', + ), + array( + 'name' => __( 'Dark Brown', 'twentythirteen' ), + 'slug' => 'dark-brown', + 'color' => '#220e10', + ), + array( + 'name' => __( 'Medium Brown', 'twentythirteen' ), + 'slug' => 'medium-brown', + 'color' => '#722d19', + ), + array( + 'name' => __( 'Light Brown', 'twentythirteen' ), + 'slug' => 'light-brown', + 'color' => '#eadaa6', + ), + array( + 'name' => __( 'Beige', 'twentythirteen' ), + 'slug' => 'beige', + 'color' => '#e8e5ce', + ), + array( + 'name' => __( 'Off-white', 'twentythirteen' ), + 'slug' => 'off-white', + 'color' => '#f7f5e7', + ), + ) ); + // Adds RSS feed links to for posts and comments. add_theme_support( 'automatic-feed-links' ); @@ -184,6 +252,9 @@ // Loads our main stylesheet. wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' ); + // Theme block stylesheet. + wp_enqueue_style( 'twentythirteen-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'twentythirteen-style' ), '2018-10-18' ); + // Loads the Internet Explorer specific stylesheet. wp_enqueue_style( 'twentythirteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentythirteen-style' ), '2013-07-18' ); wp_style_add_data( 'twentythirteen-ie', 'conditional', 'lt IE 9' ); @@ -216,6 +287,19 @@ add_filter( 'wp_resource_hints', 'twentythirteen_resource_hints', 10, 2 ); /** + * Enqueue editor styles for Gutenberg + * + * @since Twenty Thirteen 2.5 + */ +function twentythirteen_block_editor_styles() { + // Block styles. + wp_enqueue_style( 'twentythirteen-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' ); + // Add custom fonts. + wp_enqueue_style( 'twentythirteen-fonts', twentythirteen_fonts_url(), array(), null ); +} +add_action( 'enqueue_block_editor_assets', 'twentythirteen_block_editor_styles' ); + +/** * Filter the page title. * * Creates a nicely formatted and more specific title element text for output