Skip to content

Instantly share code, notes, and snippets.

@smeric
Last active Apr 20, 2020
Embed
What would you like to do?
WordPress Gutengerg starter editor stylesheet. See https://sebastien-meric.com/wordpress-gutenberg-feuille-de-style-editeur/ (in french).
/**
* Gutenberg backoffice common content stylesheet
*
* Do note that every CSS declarations will be prepended with .editor-styles-wrapper class.
**/
/** =Bugs
*************************************/
/* @see https://wordpress.org/support/topic/many-new-bugs-after-update/ */
.block-editor-writing-flow__click-redirect{min-height:auto;height:40vh;}
/** =Base
*************************************/
/**
* body will be replaced with the .editor-styles-wrapper class.
*/
body {
width: 100%;
padding-right: 0;
padding-left: 0;
}
/* Center title and blocks list wrappers inside Body */
@media (min-width: 600px){
.editor-post-title,
.block-editor-block-list__layout {
/* Max content size */
max-width: 1170px;
/* Space around */
padding-left: 15px;
padding-right: 15px;
/* Center the content */
margin-right: auto;
margin-left: auto;
}
}
/* Post title */
.editor-post-title__block {
background-color: black; /* as an example... */
width: 100%;
height: 100%;
margin: 0;
padding: 60px 30px; /* as an example... */
}
@media (min-width: 600px){
.editor-post-title__block > div {
margin-left: 0;
margin-right: 0;
}
}
.editor-post-title__input {
margin-top: 0;
margin-bottom: 0;
padding:0;
opacity: 1 !important;
}
/* Remove blocks default max-width */
.wp-block {
max-width: none;
}
/**
* Add all theme content specific styles here :
*/
/** =Typography
*************************************/
/* Post title */
.editor-post-title__block {
}
.editor-post-title__input {
font-family: 'Poppins', sans-serif;
text-align: center;
color: white;
font-size: 25px;
text-transform: none;
letter-spacing: 1px;
font-weight: 500;
line-height: 1.2;
}
.editor-post-title__input:focus {
color: white;
}
.editor-post-title__input::-webkit-input-placeholder{
color: rgba(255,255,255,.8);
}
.editor-post-title__input:-moz-placeholder{
color: rgba(255,255,255,.8);
}
.editor-post-title__input::-moz-placeholder{
color: rgba(255,255,255,.8);
}
.editor-post-title__input:-ms-input-placeholder{
color: rgba(255,255,255,.8);
}
.editor-post-title__input::placeholder {
color: rgba(255,255,255,.8);
}
<?php
/**
* Add editor styles to Gutenberg using the editor-style.css stylesheet found
* at the root of the site active theme directory.
**/
function my_theme_setup_theme() {
// Gutenberg stylesheet
add_theme_support( 'editor-styles' );
add_editor_style( 'editor-style.css' );
}
add_action( 'after_setup_theme', 'my_theme_setup_theme' );
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment