Joseph Dickson Twitter: @joe4ska Website: joseph-dickson.com … · 2019. 4. 6. · • Inland...

joseph-dickson.com/upgrading-kubrick-for-gutenberg

Upgrading Kubrick for Gutenberg

• Joseph Dickson• Twitter: @joe4ska• Website: joseph-dickson.com• Web Developer at Pitzer College• Inland Empire WordPress Meetup• Loves WordPress


The “Kubrick” Theme



• Michael Heilemann• WordPress 1.2 – 2.9• Default Theme from

2006-2010• Succeeded by the

TwentyTen Theme


2006


2006



• Easy to use• Clean design• Simple layout• Modern




Things to Consider

• Would Gutenberg be beneficial?

• Would a redesign be easier?

• Are you ready to train new users?

• Blocks are quick to deploy.

• A new theme might solve old problems.

• Gutenberg has a strange workflow.


Default Post Editor

• The default post editor is okay.

• What if it looked more like the live theme?


Matching the Editor with the Theme


Enqueue Block Styles

// Hook the enqueue functions into the editor

add_action( 'enqueue_block_editor_assets','block_editor_assets' );

// Hook the enqueue functions into the frontend and editor

add_action( 'enqueue_block_assets', 'editor-frontend-css' );

// Hook the enqueue functions into the frontend only

add_action( 'wp_enqueue_scripts', 'enqueue_theme_assets' );


Enqueue Block Styles

// Enqueue theme CSS in Editor only.

function enqueue_block_editor_assets() {

wp_enqueue_style(

'gutenberg-editor-css',

get_stylesheet_directory_uri() . '/css/editor.css',

null,

time() // Change for production

);

}

add_action( 'enqueue_block_editor_assets', 'enqueue_block_editor_assets' );


Default Block Styles


Override the Post/Page Title

/* Block Title */

.editor-post-title__block .editor-post-title__input {

font-family: "Liberation Sans", sans-serif;

line-height: 1.4em;

}


Override the Editor Width

/* Block Defaults and Width */

.wp-block {

font-family: "Liberation Sans", sans-serif;

line-height: 1.4em;

max-width: 480px;

}


Override the Paragraph Block

/* Paragraph Block */

.editor-styles-wrapper p {

font-size: 13px !important;

line-height: 1.4 !important;

}


Override the List Block


Override the List Block

/* List Block */

.editor-styles-wrapper .mce-content-body {

line-height: 1.3 !important;

}

.block-library-list .editor-rich-text__tinymce {

font-size: 13px;

margin: 0;

padding: 0;

}

.block-library-list ol.editor-rich-text__tinymce {

margin: 0;

padding-left: 50px;

}

block-library-list ul.editor-rich-text__tinymce {

list-style: none;

margin-left: 0px;

padding: 0 0 0 30px;

padding-left: 10px;

text-indent: -10px;

}

.editor-block-list__block ul li {

list-style-type: none;

margin: 7px 0 8px 10px;

}

.editor-block-list__block ul li::before {

content: "\00BB \0020";

}


Override the Blockquote

/* Quote Block */

.wp-block-quote:not(.is-large):not(.is-style-large) {

border-left: 5px solid #ddd;

margin: 15px 30px 0 10px;

padding-left: 20px;

color: #777;

}


Block Inspection

• Unfortunately, there’s a lot of ‘Trial & Error’

• Some blocks force inline CSS in the editor and you’ll need to override them using !important


Testing CSS Overrides


Before & After


Before & After


Possible Next Steps

• Try customizing the width of the editor by overriding the class tag .wp-block

• Visit the Gutenberg Handbook

• Watch 2001: A Space Odyssey while coding


Upgrading Kubrick for Gutenberg

• Joseph Dickson• Twitter: @joe4ska• Website: joseph-dickson.com• Web Developer at Pitzer College• Inland Empire WordPress Meetup• Loves WordPress

Date post:	28-Aug-2020
Category:	Documents
Upload:	others
View:	0 times
Download:	0 times

Joseph Dickson Twitter: @joe4ska Website: joseph-dickson.com … · 2019. 4. 6. · • Inland...

Documents