Wir stellen Blöcke 3.0 vor

Veröffentlicht: 2023-02-22

Das ist die aufregende Neuigkeit, auf die Sie gewartet haben: Kadence Blocks 3.0 ist da!

Wir sind stolz darauf, die Veröffentlichung von Kadence Blocks 3.0 bekannt zu geben, der neuesten Version unseres beliebten WordPress-Seitenerstellungs-Plugins. Wenn Sie den gesamten Entwicklungs- und Beta-Prozess verfolgt haben, wissen Sie wahrscheinlich, dass dieses neueste Update eine Reihe grundlegender Änderungen an Kadence Blocks mit sich bringt, die alle zu einem besseren Erlebnis beim Erstellen von Websites führen. Außerdem schafft diese grundlegende Neufassung neue Strukturen, die es unserem Entwicklungsteam ermöglichen, neue Funktionen, einschließlich neuer Blöcke, besser hinzuzufügen. Allen, die mit Kadence schnelle und effektive Websites erstellen, steht ein spannender Weg bevor.

Was gibt's Neues?

Code neu geschrieben, modernisiert, bereinigt und verbessert.

Kadence Blocks wurde in den frühen Tagen des WordPress-Blockeditors erstellt. Tatsächlich wurde es ursprünglich über drei Monate veröffentlicht, bevor der Blockeditor Teil des WordPress-Kerns wurde. In vielerlei Hinsicht haben wir uns von Anfang an mit dem Blockeditor beschäftigt, aber das bedeutete auch, dass wir viel umgestalten mussten, da sich die Codebasis im Kern und der Blockeditor selbst im Laufe der Zeit drastisch geändert haben Jahre. So sehr wir an manchen Stellen umgestaltet haben, wir haben einen Moment erreicht, in dem klar war, dass wir den größten Teil des Plugins neu strukturieren mussten, um es besser mit dem aktuellen Pfad des WordPress-Kerns kompatibel zu machen und zukünftige Möglichkeiten für Innovationen im Blockeditor zu eröffnen. Hier sind einige der Highlights:

  • Die Build-Struktur wurde vollständig aktualisiert und verwendet jetzt Komponentenbibliotheken
  • Aktualisierte React-Struktur von Blöcken, um funktionsfähig zu sein und API v2 zu verwenden
  • Überarbeitet, wie wir Frontend-CSS für Blockanpassungen kompilieren und ausgeben
  • Die Art und Weise, wie wir SVG-Symbole speichern und ausgeben, wurde überarbeitet, um wp_kses-Stripping zu verhindern
  • Unser Front-End-JavaScript wurde so umgebaut, dass es keine jQuery-Schieberegler verwendet

Eine neue Benutzeroberfläche für Blockeinstellungen

Kadence Blocks 3.0 bringt neue Verbesserungen an der Benutzeroberfläche der Blockeinstellungen. Diese Änderungen wurden vorgenommen, um zu optimieren, wie schnell und einfach Sie die Blöcke auf Ihrer Seite erstellen und verwalten können.

Organisiert nach Registerkarten

Die Blockeinstellungen sind intuitiv in Abschnitte unterteilt: Allgemein, Stil und Erweitert. Dadurch wird das Finden der richtigen Einstellung zum Optimieren Ihres Layouts und Designs schneller und einfacher. Kein Scrollen mehr durch viele Einstellungen!

Neue und aktualisierte Einstellungssteuerelemente

Wir wollten das Bearbeiten von Blockstilen vereinfachen. Während der WordPress-Kern einige neue Steuerelemente entwickelt hatte, die wirklich nett waren, fanden wir Probleme, die uns daran hinderten, ihre Komponenten einfach zu übernehmen. Zum Beispiel hat der WordPress-Kern eine schöne Gradientensteuerung, aber es funktioniert nicht mit globalen variablen Farben, die für Kadence-Benutzer wirklich wichtig sind, die Baustellen schneller und einfacher machen wollen. Ganz zu schweigen davon, dass der WordPress-Kern keine Komponenten mit reaktionsschnellen Einstellungssteuerelementen hat, was auch für die moderne Websiteerstellung wichtig ist. Fügen Sie hier umwerfende Emojis ein.

Wir haben einige unserer eigenen Steuerungen für unsere Komponentenbibliothek gebaut. Einige dieser Steuerelemente basieren auf dem WordPress-Kern und andere weichen in einigen kleinen Punkten ab, wo wir der Meinung waren, dass wir mit angepassten Kadence-Steuerelementen eine bessere Richtung vorgeben könnten. All dies hat ein ansprechendes Design im Auge und bringt viel mehr Konsistenz in unsere Blocksteuerelemente. Nachfolgend finden Sie einige Bilder einiger dieser neuen Steuerelemente.

Visuelle Polsterung und Rand

Kadence Blocks hat Ihnen schon immer die Möglichkeit gegeben, die obere und untere Polsterung im Zeilenlayoutblock visuell festzulegen. Kadence Blocks 3.0 verbessert diese Erfahrung im Zeilenlayout und in vielen unserer anderen Blöcke. Mit hervorgehobenen Bereichen, die angezeigt werden, wenn Sie mit der Maus über die Polsterungs- und Randeinstellungen fahren, ist es jetzt viel einfacher zu sehen, wie sich Ihre Einstellungen auf das Seitenlayout auswirken.

Änderungen mit dem Zeilenlayoutblock

Einer der Eckpfeiler des Kadence Blocks Plugins war der Row Layout Block. Der Zeilenlayoutblock ist ein Behälter, der Abschnitte zusammenfasst und das Bauen mit Blöcken erleichtert. Wir haben viel Aufmerksamkeit darauf gerichtet, diesen grundlegenden Block benutzerfreundlicher zu machen.

Einfaches Verschieben von Abschnitten innerhalb eines Zeilenlayouts

Eine Frustration, die wir alle im Zeilenlayout erlebt haben (ja, wir auch), ist die Schwierigkeit, einen Abschnitt von einem Bereich in einen anderen zu verschieben. Das Bauen mit Blöcken bedeutete oft ein mühsames Kopieren und Einfügen eines Abschnitts auf der rechten Seite, um ihn nach links zu verschieben. Bei vielen Abschnittsblöcken in einem Zeilenlayoutblock war es oft notwendig, ein Zeilenlayout von Grund auf neu zu erstellen, um sicherzustellen, dass das Verschieben eines Abschnittsblocks einfach durchgeführt werden kann.

Jetzt ist das Verschieben von Abschnittsblöcken innerhalb eines Zeilenlayoutblocks einfacher als je zuvor. Mit einem Klick auf einen Pfeil können Sie einen Abschnitt schnell an eine beliebige Stelle verschieben und ihn von einem Zeilenlayoutblock in einen anderen ziehen.

Neue Zeilenraster-Layoutoptionen

Ein Zeilenlayout kann jetzt ein Raster von Abschnitten enthalten. Wenn Sie beispielsweise ein dreispaltiges Raster mit zwei Zeilen wünschen, können Sie dies mit einem Zeilenlayoutblock tun. Das Tolle daran ist, dass Sie es auf einem Tablet zu einem zweispaltigen Raster machen können.

Das Zeilenlayout verwendet Grid-CSS und andere Optimierungen

Wir haben optimiert, wie der Zeilenlayout-Block CSS ausgibt und welche Art von CSS er verwendet. Durch den Wechsel von CSS Flexbox zu CSS Grid kann Kadence Blocks die CSS-Dateigröße erheblich reduzieren (36 KB -> 6 KB). Gleichzeitig haben wir die Anzahl der HTML-Tags in der Ausgabe von drei auf zwei verringert, was Ihnen weiter hilft, die Größe Ihres DOM (Document Object Model) zu optimieren. Diese Verbesserung erhöht die Seitengeschwindigkeit drastisch und verbessert die allgemeine Benutzererfahrung.

Eingegebener Text im erweiterten Textblock

Eine brandneue Funktion ist unsere Option für getippten Text innerhalb des erweiterten Textblocks. Sie können jetzt eine Reihe von Zeichenfolgen definieren, die in Ihrem Inhalt eingegeben und ersetzt werden sollen. Dies ist großartig, um Aufmerksamkeit auf eine bestimmte Überschrift zu lenken und Engagement auf Ihrer Website zu erzeugen.

Um dies zu Ihrer Website hinzuzufügen, wählen Sie einen Text aus und klicken Sie auf den Pfeil in der Symbolleiste des erweiterten Textblocks. Klicken Sie im Dropdown-Menü auf den eingegebenen Text. Dann öffnet sich ein Panel mit allen Einstellungen für den Texttyp.

Migration zu inneren Blöcken

Als Kadence Blocks ursprünglich erstellt wurde, fehlten die Kontrollen um innere Blöcke extrem. Dies bedeutete, dass wir für einige unserer Blöcke benutzerdefinierte Array-Attribute erstellen mussten, um eine Art inneren Block zu erstellen, der eigentlich kein innerer Block war. Unser Buttons Block war ein gutes Beispiel dafür. Es erfüllte einen wertvollen Zweck, indem es den Benutzern die Möglichkeit gab, einfach zwei Schaltflächen nebeneinander hinzuzufügen. Da der WordPress-Kern mit seiner Entwicklung vorangekommen ist, sind die Werkzeuge zum Bauen mit inneren Blöcken viel besser. Jetzt ist es viel sinnvoller, einen Containerblock mit einzelnen Schaltflächen als inneren Block zu haben. Dadurch können Sie auf die Schaltfläche klicken, um sie zu bearbeiten, und die Einstellungsfelder werden erheblich vereinfacht. In Kadence Blocks 3.0 haben wir vier Blöcke migriert, um die inneren Blöcke für eine einfachere Entwicklung zu nutzen.

  • Erweiterter Tastenblock
  • Testimonial-Block
  • Symbolblock
  • Symbollistenblock

Variablen für Einstellungen

Eines der vielen Ziele von Kadence Blocks 3.0 war es, Designentscheidungen intuitiver zu machen. Für viele Benutzer steht es nicht ganz oben auf der To-do-Liste, den Unterschied zwischen Pixeln, EM- oder REM-Einheiten zu verstehen und zu verstehen, was sie für verschiedene Einstellungen wie Schriftgröße, Padding oder Bundsteg verwenden sollten.

Mit Kadence Blocks 3.0 haben wir viele unserer Standardgrößeneinstellungen verschoben, um benutzerdefinierte Variablen zu verwenden, sodass Sie kleine, mittlere und große Größen für Standardelementgrößeneinstellungen festlegen können und uns den Rest erledigen lassen.

Es ist einfach, Ihre eigenen benutzerdefinierten Größen mit Pixeln oder einer anderen gewünschten Einheit in den Blockeinstellungen festzulegen. Das Festhalten an den standardmäßigen Variablenoptionen hilft Ihnen jedoch dabei, die Konsistenz in Ihren Designs zu wahren und den Bedarf an reaktionsschnellen Überschreibungen zu begrenzen. Außerdem ist Ihr Design langfristig einfacher zu verwalten. Für die Zeiten, in denen eine präzise Steuerung erforderlich ist, legt Kadence Blocks diese Kraft auch in Ihre Hände.

Responsives Design durch CSS-Klemme

Um ein besseres Anzeigeerlebnis zu bieten, egal auf welchem ​​Gerät Sie sich befinden, hat Kadence Blocks 3.0 die Art und Weise, wie Designs geladen werden, grundlegend verändert. Wenn Sie an der Technologie hinter CSS Clamp interessiert sind, können Sie hier mehr darüber lesen. Im Wesentlichen legt CSS Clamp die High-End-Viewport-Größe (z. B. ein Desktop-Browser) und eine Low-End-Viewport-Größe (z. B. ein Mobiltelefon) fest. Und ganz gleich, wie die Website geladen wird oder wie ein Benutzer die Größe seines Browserfensters ändert, Ihre Website ändert die Größe dieser Elemente flexibel basierend auf der erkannten Browserfenstergröße.

Während Sie mit Kadence Blocks weiterhin Größenspezifikationen basierend auf Desktop, Tablet oder Mobilgerät festlegen können, entbindet Sie Kadence Blocks 3.0 von der Verantwortung, diese Ansichten in der Größe anpassen zu müssen . Jetzt können Sie sich auf die variablenbasierten Einstellungen mit Clamp verlassen und Kadence Blocks die Arbeit für Sie erledigen lassen.

Aktualisierungen zum Kopieren und Einfügen von Stilen

Die Option zum Kopieren und Einfügen von Stilen ist seit einiger Zeit Teil von Kadence Blocks, aber wir haben sie in Blocks 3.0 überarbeitet und in alle unsere Blöcke aufgenommen. Dieses Tool erfordert eine gewisse Absicht, um es zu einem Teil Ihres Workflows zu machen, aber wir versprechen, dass es Ihre Entwicklung viel schneller machen wird!

Aktualisierungen der Standardeinstellungen

Wenn Sie feststellen, dass Sie immer etwas in einem Kadence-Block einstellen, können Sie den „Standard“ für den Block definieren. Denn wenn Sie Ihr Zeilenlayout immer so einstellen, dass die maximale Breite des Themeninhalts verwendet wird, können Sie dies als Standard festlegen, wenn Sie Ihrer Seite einen neuen Zeilenlayoutblock hinzufügen. Sie können dies mit jeder Einstellung in jedem Block tun. Während Sie dies bei den meisten Blöcken vor Kadence Blocks 3.0 tun konnten, haben wir die Funktionsweise geändert. Das Festlegen von Standardeinstellungen für Blöcke ist jetzt einfacher als je zuvor. Innerhalb jedes Blocks können Sie auf „Erweitert“ und dann auf „Block-Standardeinstellungen“ klicken, um zu sehen, ob Block-Standardeinstellungen angewendet wurden. Sie können sogar bestimmte Attribute entfernen, die nicht Teil der Blockvorgaben sein sollen. Was es so einfach macht, ist, dass Sie den aktuellen Block, an dem Sie arbeiten, verwenden können, um den neuen Standard mit einem Klick auf eine Schaltfläche zu definieren. Sie können auch Blockvorgaben exportieren und in andere Sites importieren.

Volle Abwärtskompatibilität

Bei einer umfassenden Überarbeitung wie dieser ist natürlich eines der größten Anliegen, die vollständige Abwärtskompatibilität sicherzustellen. Wir haben diese Anforderung während des gesamten Entwicklungsprozesses im Auge behalten, um sicherzustellen, dass die Websites, die Sie mit Kadence Blocks 2.* erstellt haben, problemlos auf das aktualisierte 3.0-Plug-in migrieren. Während einer langen Beta-Phase haben über 400 Personen zum Testen von Kadence Blocks 3.0 beigetragen. Außerdem konnten wir mit unserer großen Bibliothek von Starter-Vorlagen, die mit Kadence-Blöcken erstellt wurden, diese verwenden, um unzählige interne Tests durchzuführen. Und falls Sie neugierig sind, wir selbst haben Kadence Blocks 3.0 auf unserer eigenen Website verwendet.

Obwohl es Grenzfälle geben kann, in denen Kadence Blocks 3.0 nicht getestet wurde und möglicherweise noch Fehler vorhanden sind, sind wir zuversichtlich, dass diese Fälle nur wenige sein werden, und unser Support-Team steht Ihnen zur Verfügung, um Ihnen beim Übergang zu 3.0 zu helfen.

So funktionieren Updates im Blockeditor

Wenn Sie Kadence Blocks aktualisieren, wird der Inhalt Ihrer Posts und Seiten nicht automatisch aktualisiert. Die meisten Inhalte dieser Seiten werden als statisches HTML gespeichert und auf dem Frontend Ihrer Website ähnlich wie zuvor gerendert. Obwohl wir aktualisiert haben, wie ein Teil dieses HTML-Codes gerendert wird, und wir die externen CSS- und Javascript-Dateien aktualisiert haben, die damit ausgegeben werden, bleibt die Grundstruktur Ihrer Blöcke gleich.

Beispielsweise verwendet der Zeilenlayoutblock in Kadence Blocks 2.* drei HMTL-DIVs in seiner Ausgabe, und der Zeilenlayoutblock in Kadence Blocks 3+ verwendet nur zwei DIVs. Diese Änderung wird nicht sofort auf Ihrer Website wirksam. Erst wenn Sie die Seite oder den Beitrag öffnen, wird das gespeicherte HTML auf das neueste Update neu generiert.

Wir haben die Anzahl der von uns vorgenommenen und getesteten HTML-Änderungen begrenzt, um sicherzustellen, dass wir beide Versionen unterstützen. Diese Änderungen wurden vorgenommen, um die Leistung Ihrer Website zu verbessern.

Tipps zur Aktualisierung und Fehlerbehebung

Nachfolgend finden Sie unsere Vorschläge für die Aktualisierung auf Kadence Blocks 3.0 und einige Dinge, die Sie zuerst überprüfen können, wenn Sie auf Probleme stoßen.

Bevor Sie aktualisieren

  1. Sichern Sie Ihre Website.
  2. Bonus: Erstellen Sie eine Staging-Site und aktualisieren Sie dort zuerst.

Nach dem Update

  1. Löschen Sie Ihren Site-Cache (Browser, Seiten-Cache, Objekt-Cache).
  2. Erstellen Sie Ihre Minify-Skripte sowohl für CSS als auch für Javascript neu.
  3. Sehen Sie sich die Seiten Ihrer Website an, um sicherzustellen, dass alles reibungslos läuft.

Fehlerbehebung

  1. Wenn eine Seite im Frontend nicht richtig angezeigt wird, öffnen Sie die Seite und versuchen Sie erneut zu speichern . Dadurch wird das statische HTML im Seiteninhalt neu erstellt und die Blockformate aktualisiert.
  2. Wenn eine Seite im Front-End nicht korrekt angezeigt wird, überprüfen Sie jedes benutzerdefinierte CSS, das Sie hinzugefügt haben, um festzustellen, ob Ihr benutzerdefiniertes CSS aktualisiert werden muss, damit es ordnungsgemäß funktioniert.

Was kommt als nächstes?

Sie haben vielleicht bemerkt, dass Kadence Blocks 3.0 keine neuen Blöcke enthält. Dies war letztendlich eine bewusste Entscheidung, den Umfang dieses Updates auf die Kernstruktur, die Einstellungen und die Benutzeroberfläche des Editors zu beschränken. Das Kadence Blocks 3.0-Update bietet uns die Startrampe für neue Blöcke, die sehr bald landen sollten, sowie andere großartige Funktionen. Nachfolgend finden Sie eine vereinfachte Roadmap, um Ihnen eine Vorstellung von den Dingen für Kadence-Blöcke zu geben.

  • Kadence Blocks 3.1 – weniger als einen Monat
    • Erweiterter Formularblock
    • Fortschrittsbalken-Block
  • Neue Designbibliothek – Q1/Q2
  • Kadence Blocks Pro 2.0 – Q1/Q2
    • Struktur- und UI-Updates passend zu Blocks 3.0
    • Vorhandene Blöcke überarbeiten.
  • Erweiterter Abfrageblock – Q2
  • Dynamische Repeater-Feldunterstützung – Q2

Erweiterter Formularblock

Für den größten Teil der Entwicklung planten wir, 3.0 mit einem neuen Advanced Form-Block zu starten, entschieden uns aber, 3.0 nicht länger aufzuhalten. Wir gehen immer noch davon aus, dass dieser Block sehr bald herauskommen wird. Die erste Version dieses Blocks bietet eine viel flexiblere Möglichkeit zum Erstellen von Formularen als unser aktueller Formularblock. Beispielsweise können Sie Felder mithilfe des Zeilenlayoutblocks in Spalten gruppieren, da jedes Feld ein eigener innerer Block zum übergeordneten Formularblock ist.

Dieser Block erstellt auch ordentlich einen eigenen Beitrag in einem benutzerdefinierten Beitragstyp, sodass Formulare zu mehreren Seiten hinzugefügt und von einem einzigen Ort aus aktualisiert werden können. In der ersten Version wird es einige lang erwartete Funktionen wie Datei-Uploads und Convert-Kit-Integrationen geben, aber das wird nur der Anfang sein. Später im Jahr planen wir die Veröffentlichung von bedingten Feldern, Zahlungen und mehrstufigen Formularen.

Ein besonderes Dankeschön

Allen, die während des Prozesses der Kadence Blocks 3.0 Beta Zeit, Fehlerberichte und Ideen zum Kadence-Entwicklungsteam beigetragen haben, danken wir Ihnen. Dies war eine komplette Überarbeitung der Funktionsweise von Kadence Blocks, und ohne Ihre Fehlerberichte hätten wir nicht vollständig sicherstellen können, dass Kadence Blocks für alle gut funktioniert.

Was werden Sie mit Kadence Blocks 3.0 bauen?

Wir freuen uns, Ihnen diese neuen Funktionen und Verbesserungen präsentieren zu können, und hoffen, dass Ihnen die Verwendung von Kadence Blocks 3.0 genauso viel Spaß macht, wie uns die Entwicklung Spaß gemacht hat. Was hat sich aus Ihrer Sicht am meisten verbessert? Welche Fragen haben Sie zum neuen Update? Teilen Sie Ihre Gedanken und Erfahrungen in den Kommentaren unten. Planen Sie auch, am Donnerstag, den 23. Februar, an unserem Livestream auf YouTube teilzunehmen, um Highlights dieser Version zu erhalten, Fragen an das Kadence-Team zu stellen und mehr über unsere bevorstehende Roadmap für das Bauen mit Kadence-Blöcken zu erfahren.