diff --git a/dyad-2/css/blocks.css b/dyad-2/css/blocks.css new file mode 100644 index 000000000..6f354f66e --- /dev/null +++ b/dyad-2/css/blocks.css @@ -0,0 +1,270 @@ +/* +Theme Name: Dyad 2 +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 +--------------------------------------------------------------*/ + +body:not(.has-post-thumbnail) {} + +.single .hentry { + overflow-x: hidden; /* prevents side-scrolling caused by use of vw */ +} + +.alignfull, +.alignwide { + clear: both; +} + +@media (min-width: 1000px) { + body:not(.has-post-thumbnail) .alignwide { + margin-left: -20%; + margin-right: -20%; + width: auto; + } +} + +body:not(.has-post-thumbnail) .alignfull { + margin-left: calc(50% - 50vw); + margin-right: calc(50% - 50vw); + width: auto; +} + +/* Make non image-based blocks a bit narrower, so they don't get cut off. */ +body:not(.has-post-thumbnail) .wp-block-columns.alignfull, +body:not(.has-post-thumbnail) .wp-block-audio.alignfull, +body:not(.has-post-thumbnail) .wp-block-table.alignfull, +body:not(.has-post-thumbnail) .wp-block-latest-comments.alignfull, +body:not(.has-post-thumbnail) .wp-block-categories.alignfull, +body:not(.has-post-thumbnail) .wp-block-latest-posts.alignfull { + margin-left: calc(50% - 48vw); + margin-right: calc(50% - 48vw); +} + + +/*-------------------------------------------------------------- +2.0 General Block Styles +--------------------------------------------------------------*/ + +/* Captions */ + +/*-------------------------------------------------------------- +3.0 Blocks - Common Blocks +--------------------------------------------------------------*/ + +/* Paragraph */ + +p.has-drop-cap:not(:focus)::first-letter { + font-size: 5em; +} + +/* Gallery */ + +.wp-block-gallery { + margin: 0 0 1.5em; +} + +/* Quote */ + +.wp-block-quote:not(.is-large):not(.is-style-large) { + border-left: 3px solid #ddd; +} + +.rtl .wp-block-quote:not(.is-large):not(.is-style-large) { + border-left: 0; + border-right: 3px solid #ddd; +} + +/* Audio */ + +.wp-block-audio { + margin-bottom: 1.5em; +} + +.wp-block-audio audio { + display: block; + width: 100%; +} + +/* Cover */ + +.wp-block-cover.aligncenter, +.wp-block-cover.alignleft, +.wp-block-cover.alignright { + display: flex; +} + +/* File */ + +.wp-block-file .wp-block-file__button { + +} + +.wp-block-file .wp-block-file__button:hover, +.wp-block-file .wp-block-file__button:focus { + +} + +/*-------------------------------------------------------------- +4.0 Blocks - Formatting Blocks +--------------------------------------------------------------*/ + +/* Code */ + +.wp-block-code { + border: 0; + border-radius: 0; +} + +/* Pullquote */ + +.wp-block-pullquote { + border-color: #ddd; + margin-bottom: 1.5em; +} + +.wp-block-pullquote blockquote { + border: 0; + margin: 0; + padding: 0; +} + +.wp-block-pullquote cite { + color: #6c7781; + font-size: 13px; + text-transform: none; +} + +/* Table */ + +.wp-block-table td, +.wp-block-table th { + border-color: #ddd; +} + +body:not(.has-post-thumbnail) .wp-block-table.alignwide { + width: 960px; /* 700px + ( 20% * 2 ) */ +} + + +body:not(.has-post-thumbnail) .wp-block-table.alignfull { + width: 96vw; +} + +/*-------------------------------------------------------------- +5.0 Blocks - Layout Elements +--------------------------------------------------------------*/ + +/* Buttons */ + +.wp-block-button .wp-block-button__link { + background-color: #678db8; + border-color: #678db8; + border-radius: 0; + color: #fff; + font-size: 1.4rem; + letter-spacing: 0.1em; + padding: .62em 1.62em; + text-transform: uppercase; +} + +.wp-block-button .wp-block-button__link:hover, +.wp-block-button .wp-block-button__link:focus { + +} + +.wp-block-button .wp-block-button__link:focus { + +} + +/* Separator */ + +.wp-block-separator { + border: 0; +} + +/*-------------------------------------------------------------- +6.0 Blocks - Widget Blocks +--------------------------------------------------------------*/ + +/* Latest Posts */ + +.wp-block-latest-posts.is-grid { + margin-left: 0; + margin-right: 0; +} + + +/*-------------------------------------------------------------- +7.0 Blocks - Colors +--------------------------------------------------------------*/ + +.has-bright-blue-color { + color: #678db8; +} + +.has-bright-blue-background-color { + background-color: #678db8; +} + +.has-yellow-color { + color: #e7ae01; +} + +.has-yellow-background-color { + background-color: #e7ae01; +} + +.has-light-gray-blue-color { + color: #abb7c3; +} + +.has-light-gray-blue-background-color { + background-color: #abb7c3; +} + +.has-medium-gray-color { + color: #6a6c6e; +} + +.has-medium-gray-background-color { + background-color: #6a6c6e; +} + +.has-dark-gray-color { + color: #1a1c1e; +} + +.has-dark-gray-background-color { + background-color: #1a1c1e; +} + +.has-dark-gray-blue-color { + color: #292c2f; +} + +.has-dark-gray-blue-background-color { + background-color: #292c2f; +} + +.has-white-color { + color: #fff; +} + +.has-white-background-color { + background-color: #fff; +} diff --git a/dyad-2/css/editor-blocks.css b/dyad-2/css/editor-blocks.css new file mode 100644 index 000000000..ff64dd11e --- /dev/null +++ b/dyad-2/css/editor-blocks.css @@ -0,0 +1,23 @@ +/* +Theme Name: Dyad 2 +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 +--------------------------------------------------------------*/ + +.wp-block { + +} diff --git a/dyad-2/functions.php b/dyad-2/functions.php index d806ffb12..e5b8c1865 100644 --- a/dyad-2/functions.php +++ b/dyad-2/functions.php @@ -83,6 +83,54 @@ if ( ! function_exists( 'dyad_2_setup' ) ) : 'caption', ) ); + // 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' => __( 'Bright Blue', 'dyad-2' ), + 'slug' => 'bright-blue', + 'color' => '#678db8', + ), + array( + 'name' => __( 'Yellow', 'dyad-2' ), + 'slug' => 'yellow', + 'color' => '#e7ae01', + ), + array( + 'name' => __( 'Light Gray-Blue', 'dyad-2' ), + 'slug' => 'light-gray-blue', + 'color' => '#abb7c3', + ), + array( + 'name' => __( 'Medium Gray', 'dyad-2' ), + 'slug' => 'medium-gray', + 'color' => '#6a6c6e', + ), + array( + 'name' => __( 'Dark Gray', 'dyad-2' ), + 'slug' => 'dark-gray', + 'color' => '#1a1c1e', + ), + array( + 'name' => __( 'Dark Gray-Blue', 'dyad-2' ), + 'slug' => 'dark-gray-blue', + 'color' => '#292c2f', + ), + array( + 'name' => __( 'White', 'dyad-2' ), + 'slug' => 'white', + 'color' => '#fff', + ), + ) ); + } endif; // dyad_2_setup add_action( 'after_setup_theme', 'dyad_2_setup' ); @@ -258,10 +306,25 @@ function dyad_2_scripts() { wp_enqueue_style( 'dyad-2-style', get_stylesheet_uri(), array( 'genericons' ) ); + // Theme block stylesheet. + wp_enqueue_style( 'dyad-2-block-style', get_template_directory_uri() . '/css/blocks.css', array( 'dyad-2-style' ), '20181018' ); + wp_enqueue_script( 'dyad-2-global', get_template_directory_uri() . '/js/global.js', array( 'jquery', 'masonry' ), '20151204', true ); } add_action( 'wp_enqueue_scripts', 'dyad_2_scripts' ); +/** + * Enqueue editor styles for Gutenberg + * + */ +function dyad_2_block_editor_styles() { + // Block styles. + wp_enqueue_style( 'dyad-2-block-editor-style', get_template_directory_uri() . '/css/editor-blocks.css' ); + // Add custom fonts. + wp_enqueue_style( 'dyad-2-fonts', dyad_2_fonts_url(), array(), null ); +} +add_action( 'enqueue_block_editor_assets', 'dyad_2_block_editor_styles' ); + /** * Implement the Custom Header feature. */