Erstellen eines „Klebeband“-Bildblockstils

In der heutigen Post erwartet Tavern-Leser etwas anderes als unser normaler Strom von Nachrichten und Meinungen. Willkommen bei der Serie Bauen mit Blöcken. Es ist eine neue Art von Posts, die wir ausprobieren, um den Leuten einige der lustigen, einzigartigen oder kreativen Dinge zu zeigen, die sie mit WordPress-Blöcken machen können.

Unser Team hat beschlossen, die Serie in entwickler- und benutzerorientierte Tracks aufzuteilen. Beiträge können das Erstellen einer „Über mich“-Seite, das Codieren benutzerdefinierter Blockstile, das Zusammensetzen eines Musters oder etwas ganz anderes behandeln.

Da ich diese Serie starte, wollte ich eine Frage beantworten, die wir bereits von einem unserer Leser erhalten haben. Ich hatte zuvor in meiner Berichterstattung über den Aufruf des FSE Outreach-Programms zu Medientests einen benutzerdefinierten Blockstil mit einem „Scotch Tape“ -Look geteilt:

Devendra Meena fragte in den Kommentaren:

Hey Mann, wie bekomme ich das benutzerdefinierte Blockbild „Band“?

Das fühlte sich wie ein natürlicher Ausgangspunkt für meinen ersten Beitrag in der Serie an.

Das Design zeigt ein Stück Klebeband, das ein gerahmtes Bild im Polaroid-Stil hält. Technisch gesehen hatte ich auch einen alternativen Stil mit zwei Klebebandstücken an den Ecken. Dieses Tutorial konzentriert sich jedoch auf ersteres. Das Zwei-Ecken-Design erfordert das Überschreiben einiger Editor-spezifischer CSS, technisch brechender Funktionen, und ist nichts, was ich fördern sollte.

Ich wollte auch mit Blockstilen beginnen, weil sie zu wenig genutzt werden. Die meisten Variationen, die ich gesehen habe, waren einfache Änderungen wie das Hinzufügen von Rändern und das Entfernen von Rändern. Diese werden oft am besten Block-Design-Tools überlassen. Natürlich fügen Themer diese Stile hinzu, weil WordPress derzeit die UI-Steuerelemente für ihre Handhabung fehlen oder zuvor gefehlt haben. Dies ist auch einer der Gründe, warum so viele darum gebeten haben, mehrere Blockstile zu mischen und aufeinander abzustimmen – Themen erledigen die Arbeit, die Core leisten sollte. Es werden ständig weitere Tools hinzugefügt, aber wir haben noch einen langen Weg vor uns.

Wenn ich an Blockstile denke, möchte ich Designs erstellen, die wahrscheinlich nicht über die Standard-Designtools verfügbar sind. Ich möchte Theme-Benutzern etwas Einzigartiges bieten. Damit fangen wir heute an.

Als Bonus funktionieren benutzerdefinierte Blockstile in klassischen und Blockthemen.

Obwohl ich in meinem Leben Hunderte von Tutorials geschrieben habe, stellte sich diese Übung als etwas schwieriger heraus, als ich erwartet hatte. Man vergisst leicht, dass alles, was ich programmiere, damit beginnt, die Dinge zu „reparieren“, die ich an den Standardstilen der Blockbibliothek seltsam finde. Das erleichtert mein Leben. Viele Themenautoren werden sich jedoch auf die Standardeinstellungen des Kerns stützen, also musste ich dies allgemein genug machen, um für sie zu arbeiten.

Daher habe ich mich entschieden, mit dem Standardthema Twenty Twenty-Two zu beginnen. Beim Testen schlage ich vor, damit zu arbeiten. Der CSS-Code im folgenden Abschnitt muss für andere möglicherweise geringfügig geändert werden.

Erstellen des Blockstils „Scotch Tape“.

Der erste Schritt besteht darin, einen benutzerdefinierten Blockstil über das Design zu registrieren. WordPress hat sowohl serverseitige als auch JavaScript-APIs für diese Funktion. Die Verwendung von PHP ist einfacher einzurichten, wenn Sie nicht bereits über eine Editor-Skriptdatei verfügen, in die Sie den Code einfügen können.

Um den benutzerdefinierten Blockstil zu registrieren, fügen Sie der Datei functions.php Ihres Designs den folgenden Code hinzu:

 // Register block styles on the init hook. add_action( 'init', 'tavern_register_block_styles' ); // Wrapper function for registering all block styles. function tavern_register_block_styles() { register_block_style( 'core/image', [ 'name' => 'scotch-tape', 'label' => __( 'Scotch Tape', 'tavern' ) ] ); }

Dadurch wird der Stil im Editor registriert. Sie können dies testen, indem Sie auf dem Nachbearbeitungsbildschirm einen Bildblock hinzufügen. „Klebeband“ sollte unter der Registerkarte „Stile“ auswählbar sein.

Das Registrieren eines Stils ist der einfache Teil. Beim Schreiben des Codes kann es heikel werden. WordPress hat so viele Methoden zum Laden von CSS-Stilen, dass Sie vielleicht nicht wissen, wo Sie anfangen sollen.

Die zuvor verwendete Funktion register_block_style() ermöglicht es Entwicklern, ein style_handle hinzuzufügen, einen Verweis auf ein registriertes Stylesheet. Themer können einen Inline-Stil auch direkt über das Argument inline_style hinzufügen. Für nur ein paar CSS-Zeilen funktioniert das gut.

In meinen eigenen Themes registriere ich blockspezifische Stylesheets über die Funktion wp_enqueue_block_style() — ja, die Funktionsnamen sind furchtbar verwirrend . Dies wurde offiziell in WordPress 5.9 hinzugefügt. Das CSS wird nur ausgegeben, wenn ein Block auf der Seite verwendet wird. Zum Beispiel füge ich eine core-image.css Datei hinzu, um das gesamte Bildblock-CSS aufzunehmen. Dies ist die Methode, die ich empfehle.

Der Einfachheit halber habe ich jedoch den folgenden Code am Ende der style.css -Datei von Twenty Twenty-Two hinzugefügt:

 /* Design for the <figure> wrapper. */ .wp-block-image.is-style-scotch-tape { position: relative; overflow: visible; padding: 1rem; background-color: #fff; box-shadow: 0 4px 10px 0 rgba( 0, 0, 0, 0.3 ), 0 0 4rem rgba( 255, 255, 235, 0.5 ) inset; } /* Design for the "tape". */ .wp-block-image.is-style-scotch-tape::before { content: ""; display: block; position: absolute; width: 7rem; height: 2rem; margin: auto auto auto -3.5rem; z-index: 1; left: 50%; top: -0.5rem; background: rgba( 255, 255, 235, 0.5 ); box-shadow: 0 4px 10px 0 rgba( 0, 0, 0, 0.3 ); } /* Remove TT2's image shadow. */ .wp-block-image.is-style-scotch-tape img { box-shadow: none; } /* Adjustments for the caption. */ .wp-block-image.is-style-scotch-tape figcaption { display: block; margin: 1rem 0 0; line-height: 1; font-size: 1rem; font-family: 'Fuzzy Bubbles', sans-serif; }

Wenn das CSS vorhanden ist, muss lediglich ein Bild zum Testen gefunden werden. Ich habe mich für den Walhai von Marcus Burnette aus WordPress Photos entschieden.

Wenn Sie Ihren Bildunterschriften etwas Flair verleihen möchten, laden Sie Fuzzy Bubbles oder eine andere handschriftliche Schriftart von Google Fonts hoch.

Dieser Stil muss nicht unbedingt an den Bildblock gebunden sein. Es gibt keinen Grund, warum es mit einigen Anpassungen nicht auf Absätze, Gruppen und mehr angewendet werden könnte.

Jetzt wünsche ich euch allen viel Spaß damit. Teilen Sie auch gerne in den Kommentaren mit, wo Sie in Zukunft den Kopf der neuen „Building with Blocks“-Reihe sehen möchten.