Gutenberg Editor Themes Updates

WordPress Themes und der „Gutenberg “ – Editor

TL;DR / Der Text ist vorzugsweise für diejenigen interessant, die noch kein Gutenberg-fähiges WordPress – Theme besitzen. Als Idee dieser Link.

Viele WordPress-Nutzer scheinen auf den neuen „Gutenberg“ – Editor nicht gerade scharf zu sein. Damit sind sie aber nicht allein. Skepsis gibt es auch unter den WordPress – Entwicklern. 

Die neue WordPress – Version wird wohl erst im Januar 2019 erscheinen. Das genaue Datum soll folgen.

Obwohl es inzwischen eine sehr gute Tutorials zum neuen Editor gibt, hat sich die Einstellung nichts wirklich ins Positive verkehrt. Die kritische Haltung wird auch deutlich durch die Bewertungen auf der Download-Seite des „Gutenberg“ – Editors.

Wie auch immer, einige der 700.000 aktiven Installationen werden schon erhalten bleiben, zumal bekannt wurde, dass der bisherige Editor nicht ewig weiter supportet wird. Vielleicht wird es den vielen Kritikern nicht gelingen, den Editor zu verhindern. Wenn doch, werden die WordPress – Entwickler am etwaigen Rollback wenig Freude haben. Dafür ist das Projekt, schätze ich mal, viel zu komplex und zur alten Editor-Version zu unterschiedlich.

Ich persönlich empfehle ja, „Gutenberg“ etwas positiver entgegenzutreten und sich mit den Neuerungen nach und nach etwas vertraut zu machen. Ich schreibe jetzt schon ein paar Monate in meinen Blogs mit „Gutenberg“ und habe keine wirklich schlechten Erfahrungen gemacht. Aber ich muss natürlich zugeben, dass die Nutzung wirklich nicht gerade besonders intuitiv ist. 🙂 Da ist man dankbar, wenn man noch mal nachlesen kann, warum die eine oder andere Hürde so einfach eben doch nicht zu nehmen ist. 

Hier eine kleine Zusammenstellung von bisherigen Praxis-Problemen:

#1: Das ist also Gutenberg – Praxistest 1 | Annette Schwindt
#2: Disable Gutenberg für WordPress: weitere Lösung um akuten Problemen zuvorzukommen » perun.net
#3: Fünf Gründe für Gutenberg im WordPress Core
#4: Gutenberg WordPress 5: Vorteile, Nachteile und Erfahrungen
#5: Was es mit dem neuen Gutenberg-Editor auf sich hat (Pro und Contra)
#6: Vorerst kein Gewinn – Der WordPress-Editor Gutenberg

Das mag in meinem Fall aber auch darauf zurückzuführen sein, dass ich gleich mehrere Plugins nutze, die zum Teil redundante Blöcke verwenden. Ich mache das deshalb, um die Vorteile der verschiedenen Blöcke – Plugins zu testen. 

Standard – Blöcke für „Gutenberg“ – Editor

Wer gern mit Shortcode – Plugins gearbeitet hat wird wissen, wie unschön es werden kann, wenn man von einem Plugin auf ein anderes umsteigt. Das ist mit den Block – Plugins nicht viel anders. Doof, dass bei der zunehmenden Zahl von Blöcke – Plugins individuelle Tests im Blog kaum vermeidbar sind. Oder man beschränkt sich von vornherein auf die Blöcke, die in „Gutenberg“ standardmäßig integriert sind.

Noch kein Einfluss auf das Backend? Kein WYSIWYG

Bildergrößen definieren

Weil viele WordPress – Themes noch längst nicht alle „Gutenberg“ – konform sind, werden die bisherigen Versuche, den neuen Editor „einfach mal auszuprobieren“, nicht sonderlich vielversprechend ausgefallen sein. Die verschiedenen Größenanzeigen für Bilder, die ein herausstechendes Merkmal in der Gestaltung sein könnten, sind weder im Frontend noch im Editor selbst.

Um dies auch in deinem Theme zu aktivieren, kannst du (ein vorhandenes Child-Theme vorausgesetzt) dieses Code-Stückchen in die Datei functions.php einfügen. 

add_theme_support( 'align-wide' );

Darüber hinaus sind Änderungen am CSS – Stylesheet nötig. Bei meinem „Total – Theme“ haben sich diese Einträge im entsprechenden Media-Selector bewährt:

.navbar-style-three {border: none!important; }
	body .alignfull {
		width: auto;
		max-width: 1000%;

		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
		
		
	}

	body .alignwide {
		width: auto;
		max-width: 1000%;
		margin-right: calc(25% - 25vw);
		margin-left: calc(25% - 25vw);
		
	}

	.alignwide img,
	.alignfull img {
		display: block;
		margin: 0 auto;
		
	}

Damit sind die Voraussetzungen erfüllt, um im Blog Bilder so anzuzeigen, wie es in den Beispielen des „Gutenberg“ – Editor zu sehen ist. 

Im Editor selbst hat sich bis dahin wenig getan. Je nach Theme sind die eigenen Einstellungen in der Datei „editor-style.css“ (Child-Theme) obsolet. Vielleicht ist die im Editor angezeigte Schriftart viel zu klein oder zu groß. Wie kann man dies beeinflussen?

Entspannt schreiben?

Zunächst ist ein weiteres Code-Stückchen nötig, das du in deine functions.php (Child – Theme) einfügst:

// Add backend styles for Gutenberg.
add_action( 'enqueue_block_editor_assets', 'total_add_gutenberg_assets' );

/**
 * Load Gutenberg stylesheet.
 */
function total_add_gutenberg_assets() {
	// Load the theme styles within Gutenberg.
	wp_enqueue_style( 'total-gutenberg', get_theme_file_uri( 'block-editor.css' ), false );
}

Die Datei „block-editor.css“ kopierst du via FTP in dein Child-Verzeichnis. Dorthin, wo sich noch die Datei „editor-style.css“ befindet. 

In meinem Fall habe ich den Inhalt aus der entsprechenden Datei eines anderes Themes „geklaut“ und meinen Bedürfnissen angepasst. Das funktioniert ganz gut, und ich kann im Editor meines noch nicht für den Gutenberg – Editor vorbereiteten Themes erahnen, wie es mal laufen wird, wenn der gute alte „Gutenberg“ irgendwann doch einmal die Erwartungen der Community erfüllen wird. 🙂

Eintrag in „block-editor-css“:

/*
Styles for the block editor
// Import Atomic Blocks Sass Variables (inc/sass/variables.scss) // These variables are used througout style.scss. // Body font styles // Title font styles // Color variables // Responsive media query mixins // Styles for small text with uppercase font style. Used on dates and post meta */

/* ----------------------------------------------------------------------------
 * Mixins & Variables
 * ------------------------------------------------------------------------- */
/*--------------------------------------------------------------
	* Responsive Breakpoints

		 @include breakpoint(600)	{ } xs
		 @include breakpoint(720)	{ } s
		 @include breakpoint(840)	{ } m
		 @include breakpoint(1200)	{ } l
		 @include breakpoint(1296)	{ } xl
		 @include breakpoint(1600)	{ } xxl
	* ------------------------------------------------------------ */
/* ----------------------------------------------------------------------------
 * Widths
 * ------------------------------------------------------------------------- */
@media (min-width: 37.5em) {
  *[class^="wp-block-"].alignleft,
  *[class^="wp-block-"].alignright {
    max-width: 75%;
  }
}

/* Main column width */
.wp-block {
  max-width: 784px;
}

/* Width of "wide" blocks */
.wp-block[data-align="wide"] {
  max-width: 1200px;
}

/* Width of "full-wide" blocks */
.wp-block[data-align="full"] {
  max-width: none;
}

/* Main column width */
body.gutenberg-editor-page .editor-block-list__block,
body.gutenberg-editor-page .editor-default-block-appender,
body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block {
  max-width: 784px !important;
}

/* Width of "wide" blocks */
body.gutenberg-editor-page .editor-block-list__block[data-align="wide"] {
  max-width: 1200px !important;
}

/* Width of "full-wide" blocks */
body.gutenberg-editor-page .editor-block-list__block[data-align="full"] {
  max-width: none !important;
  width: auto !important;
}

.editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit, .editor-block-list__layout .editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit, .editor-block-list__layout .editor-block-list__layout .editor-default-block-appender .editor-default-block-appender__content, .editor-block-list__layout .editor-default-block-appender__content {
  margin-bottom: 40px;
  margin-top: 40px;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
.edit-post-visual-editor,
.components-autocomplete {
  font-family: "PT Serif", sans-serif;
}

.edit-post-visual-editor .editor-block-list__layout .wp-block-button button,
.edit-post-visual-editor .editor-block-list__block p,
.edit-post-visual-editor .editor-block-list__block ul,
.edit-post-visual-editor .editor-block-list__block ol,
.editor-block-list__block .mce-content-body p {
  font-family: "PT Serif", sans-serif;
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
}

@media (min-width: 52.5em) {
  .edit-post-visual-editor .editor-block-list__layout .wp-block-button button,
  .edit-post-visual-editor .editor-block-list__block p,
  .edit-post-visual-editor .editor-block-list__block ul,
  .edit-post-visual-editor .editor-block-list__block ol,
  .editor-block-list__block .mce-content-body p {
    font-size: 19px;
    line-height: 34px;
  }
}

.blocks-rich-text__tinymce.mce-content-body {
  line-height: 1.79;
}

.edit-post-visual-editor .editor-post-title__block .editor-post-title__input,
.mce-content-body h2,
.mce-content-body h3,
.mce-content-body h4,
.mce-content-body h5,
.mce-content-body h6,
h1.mce-content-body,
h2.mce-content-body,
h3.mce-content-body,
h4.mce-content-body,
h5.mce-content-body,
h6.mce-content-body {
  font-family: "Cardo", serif;
  font-weight: 300;
  clear: both;
  padding-left: 0;
  padding-right: 0;
}

.h-bold .edit-post-visual-editor .editor-post-title__block .editor-post-title__input,
.h-bold .editor-block-list__block h1.mce-content-body,
.h-bold .editor-block-list__block h2.mce-content-body,
.h-bold .editor-block-list__block h3.mce-content-body,
.h-bold .editor-block-list__block h4.mce-content-body,
.h-bold .editor-block-list__block h5.mce-content-body,
.h-bold .editor-block-list__block h6.mce-content-body {
  font-weight: bold;
}

.h-alt .edit-post-visual-editor .editor-post-title__block .editor-post-title__input,
.h-alt .editor-block-list__block h1.mce-content-body,
.h-alt .editor-block-list__block h2.mce-content-body,
.h-alt .editor-block-list__block h3.mce-content-body,
.h-alt .editor-block-list__block h4.mce-content-body,
.h-alt .editor-block-list__block h5.mce-content-body,
.h-alt .editor-block-list__block h6.mce-content-body {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}

.h-alt.h-bold .edit-post-visual-editor .editor-post-title__block .editor-post-title__input,
.h-alt.h-bold .editor-block-list__block h1.mce-content-body,
.h-alt.h-bold .editor-block-list__block h2.mce-content-body,
.h-alt.h-bold .editor-block-list__block h3.mce-content-body,
.h-alt.h-bold .editor-block-list__block h4.mce-content-body,
.h-alt.h-bold .editor-block-list__block h5.mce-content-body,
.h-alt.h-bold .editor-block-list__block h6.mce-content-body,
.wp-block-cover-image .editor-rich-text strong {
  font-weight: 500;
}

.edit-post-visual-editor .editor-post-title__block .editor-post-title__input,
.mce-content-body h1,
h1.mce-content-body {
  font-size: 37px;
  line-height: 45px;
  letter-spacing: 0;
}

@media (min-width: 52.5em) {
  .edit-post-visual-editor .editor-post-title__block .editor-post-title__input,
  .mce-content-body h1,
  h1.mce-content-body {
    font-size: 55px;
    line-height: 66px;
  }
}

#poststuff .wp-block-heading h2,
.mce-content-body h2,
h2.mce-content-body {
  font-size: 33px;
  line-height: 41px;
  letter-spacing: 0;
}

@media (min-width: 52.5em) {
  #poststuff .wp-block-heading h2,
  .mce-content-body h2,
  h2.mce-content-body {
    font-size: 46px;
    line-height: 56px;
  }
}

.mce-content-body h3,
.wp-block-heading h3,
h3.mce-content-body {
  font-size: 29px;
  line-height: 37px;
  letter-spacing: 0;
}

@media (min-width: 52.5em) {
  .mce-content-body h3,
  .wp-block-heading h3,
  h3.mce-content-body {
    font-size: 38px;
    line-height: 47px;
  }
}

.mce-content-body h4,
h4.mce-content-body {
  font-size: 26px;
  line-height: 33px;
  letter-spacing: 0;
}

@media (min-width: 52.5em) {
  .mce-content-body h4,
  h4.mce-content-body {
    font-size: 32px;
    line-height: 40px;
  }
}

.mce-content-body h5,
h5.mce-content-body {
  font-size: 23px;
  line-height: 27px;
  letter-spacing: 0;
}

@media (min-width: 52.5em) {
  .mce-content-body h5,
  h5.mce-content-body {
    font-size: 27px;
    line-height: 34px;
  }
}

.mce-content-body h6,
h6.mce-content-body {
  font-size: 21px;
  line-height: 28px;
  letter-spacing: 0;
}

@media (min-width: 52.5em) {
  .mce-content-body h6,
  h6.mce-content-body {
    font-size: 22px;
    line-height: 28px;
  }
}

.mce-content-body p {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.78;
}

.mce-content-body p.has-background {
  padding: 24px;
}

@media (min-width: 52.5em) {
  .mce-content-body p.has-background {
    padding: 32px;
  }
}

.body.gutenberg-editor-page p.wp-block-paragraph.intro,
.editor-block-list__layout .wp-block-paragraph.intro {
  font-size: 22px;
  line-height: 28px;
  font-weight: 300;
  margin: 0 0 40px;
}

@media (min-width: 52.5em) {
  .body.gutenberg-editor-page p.wp-block-paragraph.intro,
  .editor-block-list__layout .wp-block-paragraph.intro {
    font-size: 26px;
    line-height: 40px;
  }
}

@media (min-width: 52.5em) {
  .body.gutenberg-editor-page p.wp-block-paragraph.intro,
  .editor-block-list__layout .wp-block-paragraph.intro {
    margin: 0 0 56px;
  }
}

@media (min-width: 52.5em) {
  .mce-content-body p {
    font-size: 19px;
    line-height: 1.79;
  }
}

.mce-content-body dfn,
.mce-content-body em,
.mce-content-body i {
  font-style: italic;
}

.mce-content-body pre {
  background: rgba(0, 0, 0, 0.15);
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

.mce-content-body code,
.mce-content-body kbd,
.mce-content-body tt,
.mce-content-body var {
  font-size: 15px;
}

.mce-content-body abbr,
.mce-content-body acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

.mce-content-body ins,
.mce-content-body mark {
  background: #fff9c0;
  text-decoration: none;
}

.mce-content-body big {
  font-size: 125%;
}

.edit-post-visual-editor .editor-post-title__input,
.edit-post-visual-editor,
.edit-post-visual-editor p {
  color: black;
}

.edit-post-visual-editor p.has-drop-cap:not(:focus):first-letter {
  float: left;
  font-family: "PT Serif", sans-serif;
  font-weight: 400;
  margin: 5px 8px 0 -8px;
  line-height: 0.77;
  text-transform: uppercase;
  font-style: normal;
  font-size: 100px;
}

@media (min-width: 52.5em) {
  .edit-post-visual-editor p.has-drop-cap:not(:focus):first-letter {
    font-size: 120px;
    line-height: 0.77;
    margin: 6px 12px 0 -8px;
  }
}

@media (min-width: 52.5em) {
  .edit-post-visual-editor p.intro.has-drop-cap:not(:focus):first-letter {
    font-size: 142px;
  }
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
@media screen and (min-width: 50em) {
  .editor-post-title {
    padding-right: 2em;
  }
  .editor-post-title:after,
  .editor-post-title:before {
    left: -200%;
    width: 200%;
  }
  .editor-post-title:after {
    display: none;
  }
  .editor-post-title > div:after,
  .editor-post-title > div:before {
    display: block;
  }
}

.editor-post-title textarea {
  background-color: transparent;
}

.edit-post-visual-editor *,
.edit-post-visual-editor *:after,
.edit-post-visual-editor *:before {
  /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
  box-sizing: inherit;
}

.mce-content-body hr {
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

.mce-content-body ol,
.mce-content-body ul {
  margin: 0 0 1.5em 3em;
  padding: 0;
}

.mce-content-body ul {
  list-style: disc;
}

.mce-content-body ol {
  list-style: decimal;
}

.mce-content-body li > ol,
.mce-content-body li > ul {
  margin-bottom: 0;
  margin-left: 1.5em;
}

.mce-content-body dt {
  font-weight: bold;
}

.edit-post-visual-editor dd {
  margin: 0 1.5em 1.5em;
}

.edit-post-visual-editor img {
  height: auto;
  /* Make sure images are scaled correctly. */
  max-width: 100%;
  /* Adhere to container width. */
}

.image-border img {
  border: 4px solid rgba(0, 0, 0, 0.12);
}

.edit-post-visual-editor figure {
  margin: 1em 0;
  /* Extra wide images within figure tags don't overflow the content area. */
}

.edit-post-visual-editor blockquote p:last-of-type {
  margin-bottom: 0;
}

.edit-post-visual-editor table {
  border-spacing: 0;
  border-width: 1px;
  margin: 0 0 32px;
  table-layout: fixed;
  width: 100%;
  background: #f3f4f4;
}

@media (min-width: 52.5em) {
  .edit-post-visual-editor table {
    margin: 0 0 40px;
  }
}

.edit-post-visual-editor .wp-block-table tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.edit-post-visual-editor .wp-block-table tr:last-child {
  border-bottom: none;
}

.edit-post-visual-editor .wp-block-table table tr td:last-of-type {
  border-right: none;
}

.edit-post-visual-editor tr td {
  border-top: 0;
  border-left: 0;
  border-bottom: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.edit-post-visual-editor tr td:last-of-type {
  border-right: none;
}

.edit-post-visual-editor caption,
.edit-post-visual-editor td,
.edit-post-visual-editor th {
  text-align: left;
}

.wp-block-table td.is-selected,
.wp-block-table th.is-selected {
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 0 0 1px #5392f9;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.mce-content-body input[type="text"],
.mce-content-body input[type="email"],
.mce-content-body input[type="url"],
.mce-content-body input[type="password"],
.mce-content-body input[type="search"],
.mce-content-body input[type="number"],
.mce-content-body input[type="tel"],
.mce-content-body input[type="range"],
.mce-content-body input[type="date"],
.mce-content-body input[type="month"],
.mce-content-body input[type="week"],
.mce-content-body input[type="time"],
.mce-content-body input[type="datetime"],
.mce-content-body input[type="datetime-local"],
.mce-content-body input[type="color"],
.mce-content-body textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px;
}

.mce-content-body input[type="text"]:focus,
.mce-content-body input[type="email"]:focus,
.mce-content-body input[type="url"]:focus,
.mce-content-body input[type="password"]:focus,
.mce-content-body input[type="search"]:focus,
.mce-content-body input[type="number"]:focus,
.mce-content-body input[type="tel"]:focus,
.mce-content-body input[type="range"]:focus,
.mce-content-body input[type="date"]:focus,
.mce-content-body input[type="month"]:focus,
.mce-content-body input[type="week"]:focus,
.mce-content-body input[type="time"]:focus,
.mce-content-body input[type="datetime"]:focus,
.mce-content-body input[type="datetime-local"]:focus,
.mce-content-body input[type="color"]:focus,
.mce-content-body textarea:focus {
  color: #111;
}

.mce-content-body select {
  border: 1px solid #ccc;
}

.mce-content-body textarea {
  width: 100%;
}

/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
.mce-content-body a {
  color: black;
  text-decoration: none;
  -webkit-transition: box-shadow 270ms cubic-bezier(0.77, 0, 0.175, 1), color 270ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: box-shadow 270ms cubic-bezier(0.77, 0, 0.175, 1), color 270ms cubic-bezier(0.77, 0, 0.175, 1);
  box-shadow: inset 0 -0.06em 0 #1767f3;
  box-shadow: inset 0 -0.07em 0 #1767f3;
}

.mce-content-body a:active,
.mce-content-body a:focus,
.mce-content-body a:hover {
  box-shadow: inset 0 -1em 0 #1767f3;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

.mce-content-body a:hover {
  outline: 0;
}

h1.mce-content-body a,
h2.mce-content-body a,
h3.mce-content-body a,
h4.mce-content-body a,
h5.mce-content-body a,
h6.mce-content-body a {
  box-shadow: none !important;
}

h1.mce-content-body a:hover,
h2.mce-content-body a:hover,
h3.mce-content-body a:hover,
h4.mce-content-body a:hover,
h5.mce-content-body a:hover,
h6.mce-content-body a:hover {
  box-shadow: none !important;
  color: #1767f3;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.mce-content-body .alignleft {
  display: inline;
  float: left;
  margin-right: 1.5em;
}

.mce-content-body .alignright {
  display: inline;
  float: right;
  margin-left: 1.5em;
}

.mce-content-body .aligncenter {
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

.mce-content-body .aligncenter:not(.wp-block-gallery) {
  display: block;
}

/* Make sure embeds and iframes fit their containers. */
.mce-content-body embed,
.mce-content-body iframe,
.mce-content-body object {
  max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.mce-content-body .wp-caption,
.mce-content-body .wp-caption .wp-caption-text,
.wp-block-image figcaption,
.wp-block-embed figcaption,
.wp-block-audio figcaption {
  max-width: 100%;
  font-size: 14px;
  line-height: 22px;
  font-weight: 300;
  color: black;
  margin: 6px 0 0;
  text-align: center;
}

.mce-content-body .wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.mce-content-body .wp-caption-text {
  text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.mce-content-body .gallery {
  margin-bottom: 32px;
}

@media (min-width: 52.5em) {
  .mce-content-body .gallery {
    margin-bottom: 40px;
  }
}

.mce-content-body .gallery-item {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 100%;
}

.mce-content-body .gallery-columns-2 .gallery-item {
  max-width: 50%;
}

.mce-content-body .gallery-columns-3 .gallery-item {
  max-width: 33.33%;
}

.mce-content-body .gallery-columns-4 .gallery-item {
  max-width: 25%;
}

.mce-content-body .gallery-columns-5 .gallery-item {
  max-width: 20%;
}

.mce-content-body .gallery-columns-6 .gallery-item {
  max-width: 16.66%;
}

.mce-content-body .gallery-columns-7 .gallery-item {
  max-width: 14.28%;
}

.mce-content-body .gallery-columns-8 .gallery-item {
  max-width: 12.5%;
}

.mce-content-body .gallery-columns-9 .gallery-item {
  max-width: 11.11%;
}

.mce-content-body .gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
## Gutenberg Styles
--------------------------------------------------------------*/
.editor-block-list__block.is-focus-mode:not(.is-multi-selected) {
  opacity: .3;
  /* changes opacity of spotlight mode to increase the contrast */
}

.mce-content-body *[class^="wp-block-"] {
  margin-bottom: 1.5em;
}

.mce-content-body *[class^="wp-block-"].alignleft,
.mce-content-body *[class^="wp-block-"].alignright {
  max-width: 50%;
}

.mce-content-body .aligncenter,
.mce-content-body .alignfull,
.mce-content-body .alignwide {
  clear: both;
}

/* Images */
.wp-block-image {
  display: inline-block;
  /* helps with smaller, unaligned images */
}

/* Images */
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption {
  padding: 40px 12px 8px;
  font-size: 14px;
  font-weight: 300;
}

/* Blockquotes + Pullquotes */
.edit-post-visual-editor .wp-block-pullquote,
.edit-post-visual-editor .wp-block-quote,
.edit-post-visual-editor .wp-block-quote.is-style-large {
  margin: 0;
  padding: 24px 0 40px 40px;
  color: black;
}

@media (min-width: 52.5em) {
  .edit-post-visual-editor .wp-block-pullquote,
  .edit-post-visual-editor .wp-block-quote,
  .edit-post-visual-editor .wp-block-quote.is-style-large {
    padding: 32px 0 72px 72px;
  }
}

.edit-post-visual-editor .wp-block-pullquote > .blocks-rich-text p,
.edit-post-visual-editor .wp-block-quote.is-style-large p {
  margin: 0;
  font-size: 22px;
  line-height: 28px;
  font-weight: 300;
}

@media (min-width: 52.5em) {
  .edit-post-visual-editor .wp-block-pullquote > .blocks-rich-text p,
  .edit-post-visual-editor .wp-block-quote.is-style-large p {
    font-size: 26px;
    line-height: 40px;
  }
}

.edit-post-visual-editor .wp-block-quote:not(.is-style-large):not(.is-style-large) {
  border-left: none;
  padding: 24px 0 40px 40px;
}

@media (min-width: 52.5em) {
  .edit-post-visual-editor .wp-block-quote:not(.is-style-large):not(.is-style-large) {
    padding: 32px 0 72px 72px;
  }
}

.edit-post-visual-editor .wp-block-quote p,
.edit-post-visual-editor .wp-block-quote.is-style-large p {
  font-style: normal;
}

.edit-post-visual-editor .wp-block-pullquote cite,
.edit-post-visual-editor .wp-block-quote cite,
.edit-post-visual-editor .wp-block-quote__citation,
.edit-post-visual-editor .wp-block-pullquote__citation,
.edit-post-visual-editor .wp-block-pullquote cite,
.edit-post-visual-editor .wp-block-pullquote footer {
  display: block;
  margin: 16px 0 0;
  font-style: normal;
  text-transform: none;
  text-transform: lowercase;
  font-weight: 500;
  color: black;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  line-height: 20px;
  font-weight: 300;
  font-weight: 500;
}

@media (min-width: 52.5em) {
  .edit-post-visual-editor .wp-block-pullquote cite,
  .edit-post-visual-editor .wp-block-quote cite,
  .edit-post-visual-editor .wp-block-quote__citation,
  .edit-post-visual-editor .wp-block-pullquote__citation,
  .edit-post-visual-editor .wp-block-pullquote cite,
  .edit-post-visual-editor .wp-block-pullquote footer {
    font-size: 16px;
    line-height: 24px;
  }
}

.wp-block-quote.is-style-large cite,
.wp-block-quote.is-style-large footer,
.wp-block-quote.is-style-large cite,
.wp-block-quote.is-style-large footer {
  text-align: left;
}

.edit-post-visual-editor .wp-block-quote.is-style-large cite,
.edit-post-visual-editor .wp-block-quote.is-style-large footer {
  text-align: inherit;
}

.edit-post-visual-editor .wp-block-pullquote {
  border: none;
  text-align: left;
}

.wp-block-pullquote.alignleft {
  margin-left: 0;
  padding: 0;
}

.wp-block-pullquote.alignleft blockquote {
  padding: 0;
}

.wp-block-pullquote.alignright {
  margin-right: 0;
  padding: 0;
}

.wp-block-pullquote.alignright blockquote {
  padding: 0;
}

/* Cover Images */
.editor-block-list__block .wp-block-cover-image {
  height: 75vh;
  min-height: 400px;
  margin-top: 32px;
  margin-bottom: 40px;
}

@media (min-width: 52.5em) {
  .editor-block-list__block .wp-block-cover-image {
    margin-top: 40px;
    margin-bottom: 72px;
  }
}

.editor-block-list__block .wp-block-cover-image .wp-block-cover-image-text,
.editor-block-list__block .wp-block-cover-image .wp-block-cover-image h2 {
  max-width: 784px;
  font-size: 26px;
  line-height: 33px;
  letter-spacing: 0;
}

@media (min-width: 52.5em) {
  .editor-block-list__block .wp-block-cover-image .wp-block-cover-image-text,
  .editor-block-list__block .wp-block-cover-image .wp-block-cover-image h2 {
    font-size: 32px;
    line-height: 40px;
  }
}

/* Tables */
.editor-block-list__block .wp-block-table {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  line-height: 20px;
  font-weight: 300;
}

@media (min-width: 52.5em) {
  .editor-block-list__block .wp-block-table {
    font-size: 16px;
    line-height: 24px;
  }
}

.edit-post-visual-editor .wp-block-table table {
  margin: 0 0 32px;
}

@media (min-width: 52.5em) {
  .edit-post-visual-editor .wp-block-table table {
    margin-bottom: 40px;
  }
}

.edit-post-visual-editor .wp-block-table__cell-content {
  padding: 16px;
}

/* Code + Verse */
.wp-block-verse {
  background-color: transparent;
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: 14px;
  line-height: 22px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 300;
  font-weight: normal;
  margin-bottom: 32px;
}

@media (min-width: 52.5em) {
  .wp-block-verse {
    margin-bottom: 40px;
  }
}

.wp-block-verse pre,
pre.wp-block-verse {
  color: black;
  white-space: nowrap;
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
  padding: 0;
  overflow: auto;
}

.wp-block-code .blocks-plain-text,
.wp-block-preformatted pre {
  background: #f3f4f4;
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: 14px;
  line-height: 22px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 300;
  font-weight: normal;
  color: black;
  padding: 16px;
  border: none;
  border-radius: 0;
}

@media (min-width: 52.5em) {
  .wp-block-code .blocks-plain-text,
  .wp-block-preformatted pre {
    padding: 16px;
  }
}

/* Separator */
.edit-post-visual-editor .wp-block-separator {
  margin-bottom: 40px;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.edit-post-visual-editor .wp-block-separator.is-style-dots {
  border: none;
}

.edit-post-visual-editor .wp-block-separator.is-style-dots:before {
  color: rgba(0, 0, 0, 0.38);
  font-size: 22px;
  line-height: 28px;
  font-weight: 300;
  letter-spacing: 1em;
  padding-left: 1em;
}

@media (min-width: 52.5em) {
  .edit-post-visual-editor .wp-block-separator.is-style-dots:before {
    font-size: 26px;
    line-height: 40px;
  }
}

/* Buttons */
.edit-post-visual-editor .wp-block-button .wp-block-button__link {
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0;
  font-weight: normal;
  font-weight: 300;
  height: 56px;
  padding: 16px 40px;
  text-align: center;
  color: white;
}

.links-uppercase .edit-post-visual-editor .wp-block-button .wp-block-button__link {
  font-size: 13px;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: normal;
}

.wp-block-button .wp-block-button__link:not(.has-background),
.wp-block-button .wp-block-button__link:not(.has-background):active,
.wp-block-button .wp-block-button__link:not(.has-background):focus,
.wp-block-button .wp-block-button__link:not(.has-background):hover {
  background-color: #1767f3;
}

.edit-post-visual-editor .wp-block-button .wp-block-button__link[data-align="wide"],
.edit-post-visual-editor .wp-block-button .wp-block-button__link[data-align="full"],
.edit-post-visual-editor .wp-block-button.alignwide,
.edit-post-visual-editor .wp-block-button.alignfull {
  display: block;
}

.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
  border-color: black;
  background-color: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):active,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):focus,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover {
  color: black;
  border-width: 1px;
}

.wp-block-button.is-style-default .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  border-radius: 4px;
}

/* Latest Posts + Categories */
.edit-post-visual-editor .wp-block-categories,
.edit-post-visual-editor .wp-block-latest-posts__post-date {
  margin: 0 0 32px;
}

@media (min-width: 52.5em) {
  .edit-post-visual-editor .wp-block-categories,
  .edit-post-visual-editor .wp-block-latest-posts__post-date {
    margin: 0 0 48px;
  }
}

.edit-post-visual-editor .wp-block-categories ul,
.edit-post-visual-editor .wp-block-latest-posts {
  padding-left: 2.5em;
}

.edit-post-visual-editor .wp-block-categories li,
.edit-post-visual-editor .wp-block-latest-posts li {
  margin: 0;
  padding: 0;
  text-align: left;
}

.edit-post-visual-editor .wp-block-categories li a,
.edit-post-visual-editor .wp-block-latest-posts li a {
  border: none;
  text-decoration: none;
  color: black;
}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.