Dyad 2: Starting to add Gutenberg support.
This commit is contained in:
Laurel Fulford
parent
f607fc7a70
commit
8b8c8d942f
3 changed files with 356 additions and 0 deletions
270
dyad-2/css/blocks.css
Normal file
270
dyad-2/css/blocks.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
23
dyad-2/css/editor-blocks.css
Normal file
23
dyad-2/css/editor-blocks.css
Normal file
|
|
@ -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 {
|
||||
|
||||
}
|
||||
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in a new issue