Diese Konzepte werden weitgehend beeinflusst von:

• Atomblöcke
• WordPress.com
• Designbibliothek

Ich glaube, dass die Standardisierung eines UX-Flows für diese Interaktion Gutenberg & Benutzern zugute kommen würde.

Wir haben Unterstützung dafür, aber nur pro Post-Typ und die Vorlage wird beim Laden mit der folgenden Logik angewendet:

 * Synchronizing a block list with a block template means that we loop over the blocks
 * keep the block as is if it matches the block at the same position in the template
 * (If it has the same name) and if doesn't match, we create a new block based on the template.
 * Extra blocks not present in the template are removed.

Ich sehe darin jedoch nicht viel Wert und würde gerne so etwas wie das haben, was Sie gerade beschrieben haben.

Ich mag den Overlay-Ansatz mehr, weil er mehr Platz auf dem Bildschirm bietet, um die verfügbaren Muster anzuzeigen.

Diese Funktion ist parallel zu allen Blockbereichsarbeiten. Es können Muster für Beiträge und Muster für Vorlagen oder andere Blockbereiche vorhanden sein. Beispielsweise könnte ein Vorlagenmuster verwendet werden, um die einzelne Beitragsvorlage schnell in ein Layout mit einer Seitenleiste zu ändern.

Gutenberg sollte keine Standardeinstellungen definieren, aber die Standardthemen sollten definitiv mit ihnen geliefert werden.

Mein erster Gedanke ist, dass dieses hinzugefügte Blockmuster KEINEN Inhalt auf der Seite ersetzen würde, sondern nur die Blöcke an den unteren Rand anhängen würde. Auf diese Weise kann das Blockmuster jederzeit während der Erstellung / des Schreibens von Inhalten hinzugefügt werden. Dies wäre ein ähnlicher Ablauf wie bei Atomic-Blöcken, aber ich hoffe, dass es keinen Block gibt, der alle anderen Blöcke enthält, wie sie es tun.

Ja, ich mag es auch so, aus den gleichen Gründen, die Sie angegeben haben.

Es könnte auch etwas Interessantes geben, von diesem Plugin zu lernen. https://wordpress.org/plugins/full-site-editing/ @obenland Ist das Plugin aktuell auf dem neuesten Stand?

Es fehlt die Blockvorschau, die wir in den letzten Wochen hinzugefügt haben, aber ansonsten funktioniert sie.

So sieht die aktuelle Iteration aus, bei der blockPreview für die große Vorschau der Vorlagen auf der rechten Seite verwendet wird:

@epiqueras schrieb:

Wir haben Unterstützung dafür, aber nur pro Post-Typ und die Vorlage wird beim Laden mit der folgenden Logik angewendet:

 * Synchronizing a block list with a block template means that we loop over the blocks
 * keep the block as is if it matches the block at the same position in the template
 * (If it has the same name) and if doesn't match, we create a new block based on the template.
 * Extra blocks not present in the template are removed.

Ich sehe darin jedoch nicht viel Wert und würde gerne so etwas wie das haben, was Sie gerade beschrieben haben.

Bevor jemand Ideen zu dieser Funktion zum Ersetzen von Blockvorlagen bekommt, möchte ich nur darauf hinweisen, dass diese Funktion äußerst wertvoll ist. Entwickler können damit die Zusammensetzung eines bestimmten Beitragstyps spezifisch definieren. Wir nutzen diese Funktionalität bei @meredithcorp in

Ich denke, diese Funktion "Blockmuster" ist eine großartige Idee, möchte aber sicherstellen, dass sie als "zusätzlich zu" betrachtet wird und nicht als vollständiger Ersatz für die aktuelle Blockvorlagenfunktion des Posttyps.

Nächste Schritte:

1. @melchoyce , um auch ihre Erkundungen mitzuteilen.
2. Diverge: Erfahren Sie, was wpcom zusammen mit anderen Beispielen in der Branche tut (z. B. Squarespace usw.).
3. Konvergieren: Bringen Sie die stärkeren Muster zu einem zusammenhängenden Modell und UX-Flow zusammen.
4. Modelle und Prototypen in Figma.

Letztes Jahr habe ich einige Prototypen für Gutenberg-Seitenlayouts untersucht. Meine Erkundungen hatten ein paar Stücke:

• Erweitern Sie Layouts, um auf Seiten zu arbeiten, nicht nur auf CPTs.
• Erstellen Sie eine Möglichkeit für Themenautoren, mehrere Vorlagen zu „deklarieren“.
• Erstellen Sie eine Möglichkeit für Themenautoren, diese Vorlagen zu kategorisieren.
• Erstellen Sie die Benutzeroberfläche zur Auswahl eines Layouts.

Desktop

Prototyp anzeigen

Hinweis: Dieser Prototyp stammt aus einer früheren Runde, die ich ausprobiert habe, und einige der Elemente sind veraltet.

Handy, Mobiltelefon

Prototyp anzeigen

Die Panne

Der Layout-Picker ist wie alles andere in Gutenberg ein Block. Es besteht aus ein paar Elementen:

• Blocktitel / Beschreibung.
• Registerkarten zum Kategorisieren von Layouttypen (nach dem Blockeinfüger gestaltet).
  
  
  
  • Diese sind themendefiniert.
  
  
  • Wenn Sie nur ein paar Layouts haben (sagen wir <5), werden die Registerkarten nicht angezeigt.
  
  
  • Wenn keine kategorisierten Layouts vorhanden sind, werden die Registerkarten nicht angezeigt.
  
  
• Eine Liste der verfügbaren Seitenlayouts.
  
  
  
  • Die Layoutgrafiken sollten automatisch basierend auf den darin enthaltenen Blöcken generiert werden.
  
  
  • Bilder sind graue Kästchen, Text sind dunklere graue Linien, Schaltflächen sind blau usw. Wir sollten alles in einfache Formen abstrahieren.
  
  
• Schließlich das Layout selbst.
  
  
  
  • In diesen Modellen sehen Sie Themenstile, die auf Gutenberg angewendet werden. Wenn Themenstile nicht deklariert werden, greifen Blöcke auf generische Gutenberg-Stile zurück.
  
  
  • Möglicherweise bemerken Sie auch die globalen Elemente auf der Seite - in diesem Fall das Site-Logo, die Navigation und die Fußzeile. Diese sind für die Präsentation vorhanden, können jedoch in dieser ersten Version von Layouts nicht bearbeitet werden. Sie können nicht bearbeitet werden und weisen eine Deckkraft von 40% auf.
  
  

Layouts ändern

Ich habe durchgearbeitet, wie der Fluss aussehen könnte:

Prototyp anzeigen

Die Panne

Warten Sie also, ich kann mehr als ein Seitenlayout haben?
Jep! Sie können sie stapeln und kombinieren, wie Sie möchten.

Wird das nicht lächerlich?
Ja, das könnte es. In den meisten Fällen jedoch wahrscheinlich nicht. Wenn Sie explizit über das Überschreiben oder Anhängen sprechen, ist es weniger wahrscheinlich, dass Benutzer Inhalte verlieren. Das Löschen von Blöcken ist einfach. Wenn sie also ältere Blöcke anhängen und entfernen möchten, sind es nur ein oder zwei Klicks.

Was wäre, wenn sie ihren Inhalt nicht überschreiben wollten?
Lassen Sie uns bitte "Rückgängig" unterstützen.

Was ist mit seitenspezifischen Elementen wie Features, Bildern und Seitentiteln?
Wenn Sie Layouts anhängen, sollten Sie alle seitenspezifischen Elemente in ihre nächste generische Entsprechung konvertieren. Zum Beispiel:

• Ausgewähltes Bild → Bild
• Seitentitel → Kopfzeile

Wie wäre es mit doppelten Blöcken?
Wenn ein bestimmter Block (wie die neuesten Beiträge) dupliziert wird, sollten wir dies zulassen - Leute möchten möglicherweise einen anderen Block von Beiträgen aus einer anderen Kategorie anzeigen.

Generische Blöcke können nach Herzenslust dupliziert werden.

Wie nennen wir ein Layout, wenn Sie ein anderes Layout daran angehängt haben?
Wir sollten es "benutzerdefiniertes Layout" nennen und das Vorschaubild basierend auf den Änderungen neu rendern.

Es gibt eine Menge veralteter Dinge in diesen Verspottungen, seit sie über ein Jahr alt sind, aber wir können möglicherweise einige Konzepte wiederverwenden.

Tolle Diskussion hier, danke, dass du damit angefangen hast. Ich bin der festen Überzeugung, dass dies dazu beitragen kann, das Seitenlayout noch einfacher zu gestalten, und ich kann es kaum erwarten, dass es landet.

Ich bin auch der festen Überzeugung, dass wir keine zusätzliche Schaltfläche neben der Blockbibliothek hinzufügen sollten, weil:

• Es verdünnt und fragmentiert die Blockbibliothek als singulären Ort, an dem etwas auf der Seite eingefügt werden kann
• Es wird eine zusätzliche Benutzeroberfläche zum Einfügen und Lernen hinzugefügt, um auf Mobilgeräten und Desktops zugänglich zu machen und zu arbeiten
• Es wird an einem Ort hinzugefügt, der bereits überfüllt ist und wohl eher reduziert als hinzugefügt werden sollte
• es trennt das "Muster" vom "Block" und erzeugt effektiv eine andere Art von Inhalt, wenn es wohl der gleiche sein könnte

Sobald Sie die Block-Benutzeroberfläche gelernt haben, lernen Sie, wie man alles macht, war von Anfang an ein Leitprinzip, und obwohl es noch verfeinert werden sollte, hat es sich relativ gut skaliert. Erst gestern haben wir besprochen, wie die Behandlung der Site selbst als Block (# 16998) von Vorteil sein kann, da die vorhandene Benutzeroberfläche wiederverwendet wird. Wenn anstatt ein "Blockmuster" als neues Feature zu behandeln, sondern es als einen anderen Block zu behandeln, der zufällig vorgefertigt ist und untergeordnete Blöcke enthält, ist es plötzlich kein neues Feature, sondern eine Verfeinerung eines vorhandenen Features. Das erscheint sowohl pragmatisch als auch vernünftig.

Für mich scheint die Blockbibliothek der offensichtliche Ort für diese Schnittstelle zu sein. Welche Änderungen können wir daran vornehmen, um Blockmuster besser zu berücksichtigen? Es enthält bereits wiederverwendbare Blöcke, wohl Vorläufer für solche Muster, und alle Verbesserungen, die wir vornehmen, werden wahrscheinlich auch diesen zugute kommen. Gibt es eine Registerkarte Blockmuster? Ist die Blockbibliothek breiter - so breit wie die Blockbibliothek und das neue Vorschaufenster zusammen? Benötigen Blockmuster ein separates Vorschaufenster oder können wir den zusätzlichen Platz in diesem Vorschaufenster nutzen?

Eine andere Übung besteht darin, die Frage auf den Kopf zu stellen: Was ist mit der Blockbibliothek, wie sie heute existiert, was darauf hindeutet, dass wir eine neue Benutzeroberfläche für Blockmuster benötigen?

Eine andere Oberfläche, auf die Mel sehr elegant eingeht, ist das Tippen auf die Platzhalter-Oberfläche. Was ist, wenn Sie im Site-Block standardmäßig die Basisvorlage auswählen können?

Das Folgende ist zweifellos keine außergewöhnlich überlegte Idee, sondern nur eine kurze Skizze, die zeigt, wie es aussehen würde, wenn wir der Blockbibliothek ein Dropdown-Menü "Typauswahl" hinzufügen würden, mit dem Sie sowohl Blöcke als auch Blockmuster zusammen durchsuchen können ::

Für mich scheint die Blockbibliothek der offensichtliche Ort für diese Schnittstelle zu sein. Welche Änderungen können wir daran vornehmen, um Blockmuster besser zu berücksichtigen?

Danke fürs Eintauchen, @jasmussen! Diese Frage herauszufinden ist der Schlüssel. Kürzlich teilten Happiness Engineers mit, dass einige Benutzer nicht einmal durch die Blockbibliothek scrollen, um andere Blöcke außerhalb von Front-and-Center zu finden. Dies ist ein weiteres Problem, das Sie jedoch berücksichtigen sollten, wenn Sie dieser sehr kleinen Benutzeroberfläche noch etwas hinzufügen möchten.

Was ist mit der Blockbibliothek, wie sie heute existiert, was darauf hindeutet, dass wir eine neue Benutzeroberfläche für Blockmuster benötigen?

Ich würde sagen, es ist genau die Größe der Blockbibliothek, die es schwierig macht, dort ganzseitige Blockmuster hinzuzufügen. Im Moment zeigt der Benutzer ein Blocksymbol und eine winzige Vorschau des Blocks an. Es funktioniert, weil es ein kleiner Bereich der Seite ist, der fokussiert ist. Blockmuster funktionieren viel besser, wenn der Benutzer den größten Teil der Seite sehen kann und wie diese Blöcke zusammen existieren. Die Größe der Bibliothek macht dies schwierig.

Das Konzept eines "Site Blocks" klingt ziemlich interessant. Viele Blöcke haben einen Platzhalter, sodass ein Site-Block möglicherweise auch einen Platzhalter mit Layoutoptionen haben kann. Diese Idee eignet sich gut für neue Seiten, aber nicht so sehr für Seiten mit vorhandenem Inhalt. Aber hier ist sowieso ein kurzes Modell dazu.

Platzhalter blockieren (als Referenz):

Site Block Platzhalter:

Dies stimmt wirklich mit @melchoyces obigen Modellen

Gute Gedanken, danke.

Kürzlich teilten Happiness Engineers mit, dass einige Benutzer nicht einmal durch die Blockbibliothek scrollen, um andere Blöcke außerhalb von Front-and-Center zu finden.

Das ist eine gute Einsicht und umso mehr ein Grund, die Blockbibliothek zusammen mit den verbesserten Designs für Blockmuster zu verbessern.

Ich würde sagen, es ist genau die Größe der Blockbibliothek, die es schwierig macht, dort ganzseitige Blockmuster hinzuzufügen

Das klingt wahr. Ich habe mir ein wenig Zeit genommen, um zu versuchen, mich ein wenig über dieses Feedback lustig zu machen, aber dies mit der Idee einer singulären Blockbibliothek zu kombinieren. Legen Sie nicht zu viel Gewicht auf die Wiedergabetreue dieses Modells, teils ist dies meine Komfortzone, teils ist es eine Möglichkeit, es "echt" zu machen. Nur weil es fertig aussieht, heißt das nicht, dass es aufgrund weiterer Rückmeldungen nicht abgelehnt werden kann:

Was Sie hier sehen, ist dieselbe singuläre Blockbibliothek, die Sie auf die Schaltfläche (+) Add Block drücken. Dies macht es in der Editorleiste am Ende des Dokuments verfügbar, wenn Sie einen neuen Absatz erstellen oder wenn Sie nach dem Geschwister-Inserter suchen.

Die Benutzeroberfläche baut auf dem auf, was wir haben, fügt jedoch zusätzlich zum Suchfeld zwei Registerkarten hinzu:

• Die Registerkarte Blöcke ist die Standardeinstellung, und der Inhalt entspricht dem, was wir heute haben
• Die Registerkarte Blockmuster befindet sich daneben. Statt eines separaten Vorschaufensters werden gerenderte Vorschauen als Miniaturbilder des Blockmusters angezeigt.
  
  
  
  • Es gibt ein Dropdown-Menü für Kategorien, mit dem Plugins ihre Angebote kategorisieren können.
  
  
  • Thumbnails haben feste Breiten (2 Spalten), aber unterschiedliche Höhen im Mauerwerkstil.
  
  
  • Das gesamte Popout-Fenster wurde vergrößert, und wenn kein Vorschaufenster angezeigt wird, erhalten wir noch mehr Immobilien. Wir können sogar reaktionsschnelle Tricks untersuchen, um die Dropdown-Liste entsprechend der verfügbaren Bildschirmfläche zu dimensionieren.
  
  
• Wenn Sie suchen, suchen Sie sowohl über Blöcke als auch über Blockmuster.
  
  
  
  • Blockergebnisse werden separat gruppiert und zuerst angezeigt
  
  
  • Darunter werden Blockmusterergebnisse angezeigt
  
  

Auch wenn dies mit hoher Wiedergabetreue aussieht, sollte es nicht als Evangelium verstanden werden. Es soll einfach das Gespräch fördern. Ich war von einigen Arbeiten von @shaunandrews für die vollständige Site-Bearbeitung inspiriert, und ich bin sicher, dass er auch Gedanken zum Teilen haben wird.

Hoffe das hilft! Gedanken?

Okay, basierend auf den obigen Untersuchungen sehe ich, dass wir dies in zwei Aufgaben aufteilen:

1. Vorschau und Auswahl eines Seitenlayouts beim Erstellen einer neuen Seite
2. Fügen Sie anschließend über den Inserter neue Blockmuster hinzu

@jasmussen hat in https://github.com/WordPress/gutenberg/issues/17335#issuecomment -539903480 einige ausgezeichnete Inserter-Erkundungen, die wir für den Inserter wiederholen können.

@shaunandrews teilte

Wenn Sie eine neue Seite erstellen, wird Ihnen eine Option zur Auswahl eines Layouts angezeigt. Die Vorschau ist eine nette Ergänzung, die weder @mapk noch ich bisher untersucht haben.

Eine Frage, die wir uns überlegen sollten: Sollten ganze Seitenlayouts nur für Seiten und nicht für Beiträge verwendet werden?

Sollten ganzseitige Layouts nur für Seiten und nicht für Beiträge verwendet werden?

Ein Aspekt ist das, was wir standardmäßig verwenden, ein anderer ist die technische Unterscheidung. Das heißt, es ist sehr wahrscheinlich technisch trivial, da es unter der Haube dasselbe ist, also nur eine Frage der Entscheidung, was wir erlauben. Der Vorteil, es überall zuzulassen, ist, dass es ein vorhersehbarer Fluss ist, der überall gleich ist. Der Nachteil ist: Wir möchten wahrscheinlich nicht, dass Sie einen neuen Beitrag erstellen, der die Vorlage für die Blog-Homepage verwendet.

Vielleicht entscheidet die Vorlage, wenn sie registriert ist, selbst, welche Taxonomien sie zulassen soll?

Vielleicht entscheidet die Vorlage, wenn sie registriert ist, selbst, welche Taxonomien sie zulassen soll?

Gute Idee - dann können Vorlagen auch für Kategorien / Tags und CPTs verwendet werden.

(Eine Vorlagenauswahl auf Taxonomieseiten könnte cool sein!)

Tangential in Bezug auf Blockmuster - Inhaltsabschnitte - teilte ein Freund einige Gedanken über den Geschwister-Inserter mit, das Plus, das beim Schweben zwischen Blöcken angezeigt wird, und stellte fest, dass es nützlicher wäre, wenn es bei Auswahl des Blocks immer sichtbar wäre. Der Grund, warum dies derzeit nicht der Fall ist, liegt darin, dass dies im Widerspruch dazu steht, dass Sie nur auf Text klicken möchten, um ihn zu bearbeiten, und dass die Steuerelemente für die Größenänderung in den Spacer- und Cover-Blöcken vorhanden sind. Der Schlüssel hier ist, dass alles ein Block ist.

Einige Screenshots des GoDaddy-Site-Builders wurden freigegeben, wobei eine ähnliche Oberfläche vorhanden ist und bei Auswahl permanent sichtbar ist. Der Hauptunterschied besteht darin, dass diese Benutzeroberfläche zwischen kleinen Blöcken (Text, Bilder) und größeren Abschnitten unterscheidet und diese Steuerung nur für letztere zeigt:

Wenn wir mit Blockmustern fortfahren, wäre es interessant zu überlegen, ob dieses Konzept die Türen für eine weitere Vereinfachung der Basis-Benutzeroberfläche öffnet, indem Funktionen zu den größeren Abschnitten hinzugefügt werden.

@jasmussen Kann ich Ihre Datei für https://github.com/WordPress/gutenberg/issues/17335#issuecomment -539903480 abrufen?

Ja natürlich. Ich habe es schnell in einer Art chaotischen Figma-Datei zusammengestellt, also habe ich es hier kopiert:

https://www.figma.com/file/VaSKQJDS70ov87XY1alOVs/Block-Library-w.-Block-Patterns?node-id=0%3A1

Vielen Dank!

Ich habe mit ein paar Ideen gespielt:

Ich begann mit der Idee eines Dropdowns und probierte eine einzelne Liste von Blöcken aus:

Gleichzeitig habe ich sowohl zwei Spalten als auch eine einzelne Spalte für Muster ausprobiert und dabei Miniaturansichten für die Muster in der Liste verwendet:

Ich entschied dann, dass die Suche an einem verwirrenden Ort war und trat einen Schritt zurück. Ich habe versucht, ein Dropdown-Menü neben der Suche und den Registerkarten unter der Suche hinzuzufügen:

Mit den Registerkarten unter der Suche habe ich auch versucht, Miniaturansichten von Mustern sowohl im Quer- als auch im Hochformat anzuzeigen.

Mir gefällt, was @joen mit dem interessanteren Layout von Mustern gemacht hat, also habe ich auch ein kurzes

Tolle Erkundungen. Ich denke, die Registerkarten funktionieren als Muster etwas besser, da das Dropdown-Menü neben der Suche den Eindruck erweckt, dass die beiden miteinander verbunden sind. Ich kann also nur innerhalb von Mustern oder Vorlagen suchen und meine Ansicht nicht ändern, indem ich eines auswähle.

Ich habe es sehr genossen, diese Ausgabe zu lesen, die Ideen zu lesen und großartig auszusehen!

Ich möchte die verwandten Probleme Nr. 15623 und Nr. 17512 kennzeichnen, die sich auf die Bereitstellung der erforderlichen Blocktypen und Infrastrukturen konzentrieren, um die vollständige Bearbeitung der Site zu ermöglichen.

Während Blockmuster, wie hier beschrieben, in beiden Kontexten sinnvoll sind (einzelner Beitrag gegen gesamte Vorlage), müssen wir meines Erachtens zwischen zwei Arten von Vorlagen unterscheiden:

• Vorlagenteile (z. B. zur internen Implementierung mit einem Post-Typ wp_template_part , ähnlich wie es das Plugin für die
  
  
  
  • Vorlagenteile sollten an verschiedenen Stellen verwendet werden können und an andere Inhalte angehängt werden können (wie hier zuvor erläutert).
  
  
• Vorlagen (z. B. zur internen Implementierung mit einem Post-Typ wp_template , siehe # 17513):
  
  
  
  • Vorlagen sollen _entire_-Vorlagen darstellen, einschließlich aller semantischen Markups, aus denen ein HTML-Dokument besteht. Es muss einige Einschränkungen geben, wie diese platziert werden können, z. B. sind vollständige Vorlagen in einzelnen Post-Inhalten nicht sinnvoll, und es sollte auch nicht möglich sein, eine vollständige Vorlage an eine andere Stelle anzuhängen - eine vollständige Vorlage sollte immer die überschreiben Bestehende Inhalte und deren Hauptanwendungsfall stehen ganz am Anfang der Erstellung einer neuen Vorlage mit Gutenberg (dh "Wählen Sie Ihren Startpunkt").
  
  
  • Wir müssen zwar noch herausfinden, wie wir ein solides semantisches Markup (über die oben genannten Probleme) generell fördern (durchsetzen?) Können, aber ich glaube, wir sollten dieses Szenario auch hier berücksichtigen.
  
  

Bisher scheint sich dieses Problem hauptsächlich auf die Vorlagenteile zu konzentrieren, und das ist sinnvoll, aber es wäre großartig, wenn wir auch darüber nachdenken könnten, wie wir das in Zukunft auf vollständige Vorlagen ausweiten können.

Bisher scheint sich dieses Problem hauptsächlich auf die Vorlagenteile zu konzentrieren, und das ist sinnvoll, aber es wäre großartig, wenn wir auch darüber nachdenken könnten, wie wir das in Zukunft auf vollständige Vorlagen ausweiten können.

Eine Klarstellung: Beim Setup von "Blockmustern" geht es weniger um Schablonenteile (die strukturell sinnvoll sind) als vielmehr um allgemeine Gestaltungselemente aus kleineren Blöcken. Einmal eingelegt, werden sie nicht separat gespeichert. Zum Beispiel ein "Titelbild", das einige Blöcke kombiniert, um ein bestimmtes Aussehen zu erzielen, für dessen Ausführung Benutzer sonst einige Arbeit benötigen würden. Stellen Sie sich das eher als eine Sammlung von Designs vor, die überall hinzugefügt werden können, ohne unbedingt einen wiederverwendbaren Teil einer Themenvorlage darzustellen.

Eine schnelle und schmutzige Erkundung, bei der die Ideen von @shaunandrews und @jasmussen auf ein Modal anstatt auf ein Popover angewendet werden:

Ich grabe die Registerkarten und das Suchlayout, obwohl ich zugeben muss, dass ich persönlich immer die Suche in der Blockbibliothek verwende. Als Datenpunkt von einem würde ich die Suche zuerst bevorzugen.

Der modale Dialog-Inserter bringt definitiv den Raum. Das ist gut. Es verliert aber auch ein wenig vom visuellen Kontext, wo sich Ihr Cursor befindet / wo der Block oder das Blockmuster eingefügt wird. Darüber hinaus stellt sich die Frage, ob dies das globale Verhalten für den Block-Inserter wird oder beispielsweise, was Sie sehen, wenn Sie den Geschwister-Inserter oder eine Variante wie den oben vorgeschlagenen "Section-Inserter" verwenden. Und wenn wir das Verhalten fragmentieren, ist das gut?

Ihre Erkundung dort, @melchoyce , hilft wirklich! Vielen Dank! Ich habe ein paar Gedanken dazu.

In einem Fall kommuniziert das Modal die vielen verfügbaren Blöcke, was die Leute derzeit nur schwer erforschen können. Andererseits wird es etwas überwältigend, all diese Blöcke so zu sehen. Ein Modal fühlt sich für die Muster richtig an, aber nicht für einzelne Blöcke. Das Modell zeigt aber auch die offenen Akkordeons an, so dass es sich vollständig ändern kann, wenn nur eines offen ist, wie wir es standardmäßig tun.

So sehr ich den zusätzlichen Platz in der Dialogversion mag, wenn ich darauf schlafe, fühlt es sich nicht nach der richtigen Herangehensweise an mich an. Es entfernt den gesamten Kontext aus dem Inhalt und wirkt überwältigend, wenn Sie einfache Blöcke wie Absätze oder Bilder einfügen. Bei vorgefertigten Blöcken oder Blockmustern sehe ich das zunehmend genauso - sie sind nur Sammlungen von Blöcken und sollten auf die gleiche Weise eingefügt werden.

Während https://github.com/WordPress/gutenberg/issues/17335#issuecomment -539903480 nicht unbedingt der richtige Weg ist - die Kategorien fühlen sich sinnlos an und es ist viel los -, habe ich das Gefühl, den Block zu verbessern Bibliothek zur Aufnahme komplexer Blöcke_ (und Vermeidung eines modalen Dialogs) ist der richtige Weg.

Ich bin der Meinung, dass die Verbesserung der Blockbibliothek für komplexe Blöcke (und die Vermeidung eines modalen Dialogs) der richtige Weg ist.

Jetzt, da wir das Hilfefenster haben, das mehr Platz in der Bibliothek bietet, können wir wahrscheinlich ein bisschen damit arbeiten. Möglicherweise sind Muster eine weitere Registerkarte, die von den einzelnen Blöcken getrennt werden kann. Der Vorschaubereich befindet sich jedoch weiterhin auf der Seite des Hilfebereichs, die bei Bedarf vertikal gescrollt werden kann.

Ich mag die Idee von "Block Patterns" (vielleicht sollte sie in "Block Layouts" geändert werden?), Aber ich mag es nicht, einen neuen Block über ein Dialogfeld hinzuzufügen - es ist zu ablenkend! (Wenn Blockmuster auf diese Weise hinzugefügt würden, wäre ich damit einverstanden.)

Ich würde vorschlagen, dass der Block-Inserter ein kleines Popover bleiben sollte (wie es heute der Fall ist), während Block-Muster eine ganz andere Komponente sein sollten - da der Kontext, in dem jedes verwendet wird, sehr gut unterschiedlich sein könnte: einer zum Erstellen von Seiten (Mustern) - die andere zum Hinzufügen von Blöcken / Optimieren dieser Seiten.

Es könnte innerhalb des Inserters funktionieren, aber wir können feststellen, dass die Schnittstelle komplizierter und verwirrender wird - und ganz zu schweigen davon, dass der Inserter ziemlich klein ist. Das Einbringen winziger Vorschaubilder von Mustern ist möglicherweise nicht die beste Erfahrung. Wir müssen in der Lage sein, mehr als ein Muster anzuzeigen (um dem Benutzer den richtigen Kontext zur Auswahl zu bieten), aber auch die Vorschau groß genug zu machen, um sie tatsächlich zu sehen.

Vielleicht optimieren wir, wie wir die Dinge ein bisschen machen.

Ich denke hier nur laut nach, aber was wäre, wenn wir den Inserter oben links hätten, wie er heute steht, und ein neues UX-Muster zwischen vorhandenen Blöcken einführen würden - wo Leute Blockmuster / Layouts hinzufügen können (wie auch immer wir sie nennen). Dies würde den On-Hover-Block-Inserter (+) ersetzen, der sich derzeit zwischen Blöcken befindet, und sichtbar bleiben (nicht ausblenden, wenn er nicht schwebt).

Hier ist ein Screenshot (mit aktuellem Gutenberg-Inhalt), wie das aussehen könnte:

Es müsste ein wenig darüber nachgedacht werden, wo genau dies übernehmen würde. Wäre es zwischen jedem Block? Ich bin mir nicht sicher.

Durch Öffnen des Mustereinfügers wird ein Modal ausgelöst, aus dem der Benutzer ein neues Muster auswählen kann, das seiner Seite hinzugefügt werden soll. Hier ist eine Untersuchung des Modals unter Verwendung einer kategorialen Auswahl der obersten Ebene, obwohl ich nicht zu 100% hier bin, wie dies aussehen würde.

Dieses Muster (oder zumindest Teile davon) ist auf GoDaddys Website + Marketing-Angebot sowie auf SquareSpace (und möglicherweise auch anderswo) zu sehen. Es ist eine Erkundung wert.

Ein Block und ein Layout sollten UNTERSCHIEDLICH sein.

Ein Layout sollte das verwendete CSS-Framework nutzen.

Beispiele für das Layout:

• Spaltenreihen
• Gitter
• Ein Schieberegler
• Ein Container
• Tabs, Akkordeons

Ein Block kann in einem Layout leben oder nicht.

Ein Muster könnte ein Layout + Blöcke sein?

So macht die Blocs App das. Es wird ein viel größerer Inserter verwendet. Einfach mehr Forschung teilen.

Mehr schauen, was andere da draußen machen.

Qubely verwendet eine Schaltfläche in der oberen Symbolleiste, um ein Modal zu öffnen.

Großartige Aktien, Mark.

Ich würde bemerken, dass der Qubely-Ansatz einer ist, den wir meiner Meinung nach vermeiden sollten, und es ist ein Ansatz, den eine Reihe anderer Blocksammlungen verfolgen. Bei diesem Ansatz wird davon ausgegangen, dass sich der Benutzer auf einem Desktop-Bildschirm befindet und weder die Option "Top Toolbar" noch die zukünftige Option "Beschriftungen für alle Symbole anzeigen" verwendet. Wenn wir also eine tatsächliche separate Schaltfläche hinzufügen würden, würden wir sie wahrscheinlich im direkten Kontext des Blockeinfügers hinzufügen wollen, und wir sollten uns wahrscheinlich ansehen, wie wir die anderen in diesem Bereich vorhandenen Schaltflächen reduzieren könnten.

Und hier ist eine Momentaufnahme davon, wie SquareSpace eine separate Interaktion für die Seitenarchitektur meinem früheren Kommentar bereitstellt.

Und hier ist ein weiteres Gespräch (Slack) , das wir während des gestrigen Designtreffens besprochen haben:

Ich habe viel über eine Musterinteraktion im Vergleich zu einer Blockinteraktion nachgedacht. Verschieben von Mustern als "Gebäude" -Interaktion auf oberster Ebene, während Blöcke als "Hinzufügen / Optimieren" -Interaktion beibehalten werden. Sicher, man könnte offensichtlich "Muster" mit Blöcken erstellen, aber es ist nicht gerade einfach und erfordert viel mehr Interaktionen, um dies zu erreichen. Was wäre, wenn es einen deutlichen Unterschied zwischen Seitenarchitektur und Inhaltsarchitektur gäbe?

Danke, dass du das geteilt hast, Rich. Es scheint, als ob das Gleichgewicht zwischen dem einfachen Einfügen großer hilfreicher Inhaltsabschnitte besteht, um Seiten schnell zu erstellen, wenn sie dies beabsichtigen, und dem trivial intuitiven Zugriff auf einzelne Blöcke, wenn dies erforderlich ist.

Für mich ist der Schlüssel zum Squarespace-GIF, dass die Dualität zwischen zwei Bibliotheken zwar besteht, aber durch die Kontextualität gemildert wird. Ich frage mich, ob wir es noch besser machen können, um zwei völlig unterschiedlich aussehende Blockbibliotheken zu vermeiden. Wenn Sie beispielsweise einen _Navigation Menu_-Block einfügen, ist es intuitiv, dass die Blockbibliothek zu einem Werkzeug wird, mit dem nur _Menu Items_ eingefügt werden können. Gibt es eine ähnliche Möglichkeit, den Kontext im Bearbeitungsbereich selbst zu nutzen?

Zum Hinzufügen eines Layouts, möglicherweise im Bereich Einstellungen der Registerkarte Dokumente, kann eine Liste von Layouts mit einer Grafik angezeigt werden, die dem Benutzer zeigt, wie das Layout ungefähr aussieht.

Wir haben seit einiger Zeit einen Abschnitt und ein Layout-Modal in Atomic Blocks und ich freue mich, Ihnen mitteilen zu können, was wir bisher damit erlebt haben.

Um auf die Fragen von @mapk einzugehen :

1. Ja, der Blockeditor sollte über eine dedizierte Benutzeroberfläche für die Arbeit mit Blockmustern / Abschnitten / Layouts oder wie auch immer Sie sie nennen möchten verfügen. Der nächste logische Schritt nach einzelnen Blöcken ist, wie wir sie kombinieren, um moderne, ausdrucksstarke Layouts zu erstellen. Durch die Erstellung einer standardisierten Benutzeroberfläche können Benutzer und Entwickler eine zusammenhängende Erfahrung genießen und vermeiden, das Rad millionenfach neu zu erfinden (was bereits begonnen hat). Obwohl Atomic Blocks und einige andere bereits eine dedizierte Benutzeroberfläche haben, würde ich es dennoch vorziehen, eine Standard-Benutzeroberfläche (aber erweiterbar) dafür zu verwenden.

Ob der Kern Blockmuster zum Auffüllen dieser Benutzeroberfläche bereitstellt oder nicht, ist eine andere Frage. Vielleicht ist es sinnvoll, dass Kernthemen eigenwillige Blockmuster bereitstellen, um ihre Designs zu ergänzen und zu erweitern.

1. Einige der hier vorgeschlagenen Benutzeroberflächen sind ein guter Anfang. Mir gefällt besonders, was ich hier von @shaunandrews und @melchoyce sehe . Ich teile die Meinung von @richtabor , dass der Block-Inserter für ein Feature wie dieses zu einschränkend ist, und ich denke, wir werden ihm schnell entwachsen. Eine ausdrucksstarke Seitenerstellung mit Blockmustern verdient mehr als eine 700 x 430 Pixel große Oberfläche.

Wir haben einen Unterschied zwischen Abschnitten und Layouts in unserer Benutzeroberfläche unterschieden, wobei Abschnitte Teile einer Seite und Layouts ein vollständiges Seitenlayout sind. Dies ist eine meinungsgebundene Entscheidung und in unserer aktuellen Implementierung sinnvoll. Dies könnte jedoch auch mit einer Kategorie oder einer Filterschnittstelle angegangen werden.

Atomic Blocks verfügt außerdem über eine Favoritenfunktion , mit der Benutzer ihre häufig verwendeten Abschnitte und Layouts einfach favorisieren und erneut aufrufen können. Diese Art von Funktion ist erforderlich, da die Anzahl der Muster schnell zunimmt. Eine andere Möglichkeit, den Benutzer zu befähigen, besteht darin, Whitelist- und Blacklisting-Mustern die Steuerung der Ausgabe in der Muster-Benutzeroberfläche zu ermöglichen.

Die Leistungsfähigkeit des Blockeditors wird am deutlichsten in Funktionen wie Blockvorlagen und Blockmustern deutlich und bestätigt, die die Art und Weise, wie wir Websites in WordPress erstellen, grundlegend verändern. Wir haben auch die Möglichkeit, den wilden Westen von benutzerdefinierten WordPress-Schnittstellen zu korralieren und eine kohärentere und vorhersehbarere Erfahrung mit Standardisierung anzubieten.

Ich habe heute einige Modelle zu teilen, die versuchen, eine frühere Idee anzusprechen. Um die Herausforderung näher zu erläutern: Ein Benutzer kümmert sich möglicherweise nicht um den Unterschied zwischen einem Block, einem Muster oder einem Layout. Da beide an einer beliebigen Stelle eingefügt werden können, ist es wahrscheinlich verwirrend, unterschiedliche Schnittstellen für jede zu erstellen.

Im folgenden Modell habe ich versucht, dies durch Folgendes zu beheben:

• Erstellen einer einzelnen einheitlichen Bibliotheksoberfläche mit Registerkarten
• Zeigen Sie diese Oberfläche als Popover in voller Höhe, aber nicht modal an, wenn Sie sie über die Editorleiste öffnen
• Zeigen Sie es als Dialogfeld an, standardmäßig auf der Registerkarte Muster, wenn es vom Geschwister-Inserter geöffnet wird

Beachten Sie, dass diese Benutzeroberfläche unvollendete Benutzeroberflächenkonzepte nutzt, die in # 18667 untersucht werden.

In dieser Konfiguration können Benutzer entweder einen Block oder ein Muster einfügen, ohne durch verschiedene Schnittstellen schauen zu müssen. Wir erkennen jedoch an, dass Sie beim Einfügen der größeren Muster möglicherweise mehr Platz auf dem Bildschirm benötigen.

Diese Schnittstelle nutzt auch die hier vorgeschlagenen neuen Kategoriesätze.

• Zeigen Sie es als Dialogfeld an, standardmäßig auf der Registerkarte Muster, wenn es vom Geschwister-Inserter geöffnet wird

Ich denke wir sind auf etwas hier!

@jasmussen , würden Muster auch in / erscheinen oder nur in Blöcken?

Das ist eine ausgezeichnete Frage. Möglicherweise, wenn separat kategorisiert. Aber vielleicht ist die große Vorschau für Muster notwendiger? "2 Muster gefunden" könnte den Dialog aufrufen?

@jasmussen , würden Muster auch in / erscheinen oder nur in Blöcken?

Vielleicht. Obwohl ohne Vorschau, bin ich mir nicht sicher, wie nützlich es wäre, sie innerhalb von / zu haben - es sei denn, sie wurden sehr eindeutig benannt (was ich bezweifle, dass dies der Fall sein wird, dh "Ungefähr 1", "Ungefähr 2"). oder wenn Benutzer sie nach eigenem Ermessen benennen könnten (auch da sind sie sich nicht 100% sicher).

Wenn wir einen „Favoriten“ -Funktion implementieren, wie @mikemcalister erwähnt früher in diesem Thread, vielleicht nur favorited Muster zeigen würde (solange sie eindeutig identifizierbar waren). Und wenn wir sie zulassen, benötigen Muster ein entsprechendes Symbol (ähnlich wie Blöcke)? Oder gibt es ein Standard-Symbol "Muster" zum Klassifizieren von Blockmustern?

Hallo zusammen, ich wollte nur meinen Kopf reinstecken und sagen, ich liebe es, wohin das führt. Die neuesten Modelle und Denkweisen sind wunderbar. Während ich darüber nachdenke, wie sich dies auf das native mobile Gutenberg übertragen lässt, denke ich, dass das letzte Modell von Problem in Bezug auf Hierarchie und Interaktion. Verzeihen Sie mir, wenn ich nicht den vollständigen historischen Kontext habe, aber ich denke, dass die mobile Perspektive in diesem Kontext nützlich wäre.

Über Akkordeons / Nav-Hierarchie

Ein Problem, das ich immer mit dem Inserter hatte, sind die Akkordeonabschnitte (am häufigsten verwendete, häufig verwendete Blöcke usw.). Der erste Abschnitt "Am häufigsten verwendet" ist klar genug, da er anfangs immer geöffnet ist. Er neigt jedoch dazu, die zusätzlichen Abschnitte zu begraben und die Auffindbarkeit zu beeinträchtigen, insbesondere auf Mobilgeräten.

Ich bin ein Fan davon, wie die linke Seitenleiste in Ihrem letzten Modell, @lumberman, angeordnet ist. Halten Sie es für sinnvoll, die Abschnitte als Listenelemente in der Navigationshierarchie der linken Seitenleiste hinzuzufügen? Mit anderen Worten, die Elemente unter Sections wären "Am häufigsten verwendet", "Kopfzeilen", "Fußzeilen" usw. (oder wie auch immer die Gruppennamen lauten)? Das könnte das Problem der "vergrabenen Abschnitte" lösen und es uns möglicherweise ermöglichen, die Notwendigkeit der Akkordeons im Wesentlichen zu beseitigen, aber ich verstehe, dass dies historisch gesehen eine große Abweichung von der Blockbibliothek darstellt, so dass andere diesen Vorschlag möglicherweise nicht mögen 😄

Auf "Favoriten"

Eines der diskutierten Konzepte (von @mikemcalister zunächst glaube ich) ist das der "Favoriten". Dies ist fast genau wie eine Idee, die ich vor einiger Zeit auf nativem mobilem GB untersucht habe , wo Sie Lieblingsblöcke auswählen würden, um "Meine Bibliothek" von Blöcken während des Onboarding-Prozesses in GB zu erstellen, und von dort aus würde sich die Blockbibliothek darauf konzentrieren diese in erster Linie, während sie immer noch einen offensichtlichen Weg zur vollständigen Blockbibliothek bieten. Das Hauptproblem dabei war die Auffindbarkeit, obwohl es meiner Meinung nach Möglichkeiten gibt, dies zu beheben.

In der Blockbibliothek, Overwhelm, IA usw.

In Bezug auf den Inserter im Allgemeinen komme ich immer wieder auf eine Sache zurück, die noch deutlicher wird, wenn wir ihn robuster machen. Bei Usability-Tests im mobilen Web haben wir (das mobile Team von Automattic) oft gehört, dass die Blockbibliothek überwältigend ist. Es gibt viele Möglichkeiten und Gruppierungen sind nicht sofort klar. Ich denke, die hier vorgeschlagenen neuen UI-Ideen helfen, weil sie etwas mehr "atmen", aber die Anzahl der Blöcke ist immer noch überwältigend und wird sich erst mit der Einführung einer anderen Gruppierung (Block Patterns) verschlechtern. Ich denke, wenn wir dies vergrößern (was meiner Meinung nach die richtige Richtung ist, könnte die Fähigkeit vom Typ "Favoriten" dies abmildern.

Es lohnt sich, einen Blick auf den Mobirise-Ansatz für Seitenlayouts zu werfen. Sie bieten eine Leinwand auf der linken Seite und einen Schieberegler für die Auswahl vertikaler Bedienfelder auf der rechten Seite, die in die natürlichen vertikalen Seitenelemente unterteilt sind Seitentyp (z. B. Kartenbedienfeld, Personenbedienfeld, wenn es sich um eine Seite "Über uns" handelt), dann Fußzeile und Fußzeile. Sie ziehen die Bedienfelder einfach per Drag & Drop von rechts nach links.

WARNUNG: Wenn Sie einen Beitrag zu Gutenberg leisten, lesen Sie die Mobirise-Bedingungen, bevor Sie sich entscheiden, Mobirise-Materialien zu lesen. Die

Sie versichern und garantieren, dass Sie nicht: Dienste kopieren, ändern, abgeleitete Werke erstellen, anpassen, zurückentwickeln, emulieren, zu einem anderen Dienst migrieren, Dienste übersetzen, kompilieren, dekompilieren oder disassemblieren;

Besser noch ... gehen Sie überhaupt nicht auf ihre Website.

Stattdessen können Sie sich die YouTube-Videos von Mobirise ansehen. Mir ist kein Begriff bekannt, der über die von YouTube geforderte Lizenz für Content-Uploader hinausgehen würde, aber Caveat Emptor ... Ich bin kein Anwalt.

Wenn Sie der Meinung sind, dass das Ansehen von YouTube-Videos für die Gutenberg-IP kein Risiko darstellt, finden Sie den Youtube-Kanal von Mobirise unter https://www.youtube.com/channel/UCt_tncVAetpK5JeM8L-8jyw/featured. Sie können eine themenspezifische Seitenerstellung durch Ziehen und Ablegen von Bedienfeldern in Aktion anzeigen.

@ Jasmussen , deine Modelle hier sehen toll aus. 😍 Ich würde sie gerne in einem funktionierenden Prototyp sehen, wenn möglich, um einige meiner folgenden Fragen zu beantworten.

Wie von @richtabor angegeben , ist es sinnvoll, die Kontexte zu ändern, wenn jemand einen Block aus der Symbolleiste hinzufügt, anstatt ein Muster aus dem Geschwister-Inserter hinzuzufügen. Ich mag, dass zusätzlicher Platz in einem Modal für die Muster gegeben wird!

Nächste Schritte

1. Der Begriff "Premade Blocks" fühlt sich etwas unangenehm an. Können wir dort "Block Patterns" ausprobieren, oder ist das genauso unangenehm?
2. Wie sieht es aus, wenn ich auf den Inserter in der oberen Symbolleiste klicke und dann auf die Registerkarte "Blockmuster" klicke? Verschiebt sich das Popover zu einem Modal? Ändert das Popover die Größe, bleibt aber ein Popover an derselben Position? Behält es die gleiche Größe und Position bei und zeigt jetzt nur Muster?
3. Wie sieht die Interaktion aus, wenn Sie im Editor auf den Geschwister-Inserter und dann auf die Registerkarte "Blöcke" klicken? Ändert sich das Modal von hier aus in Größe oder Position oder bleibt es ein Modal?
   
   
   
   1. Erstellen Sie einen Prototyp, der diese Fragen beantwortet. Gerne helfe ich Ihnen hier weiter, wenn Sie mir die Datei verlinken können.
   
   

@ Holzfäller danke auch für deine Modelle! Mir gefällt sehr, wie sie das vorhandene Inserter-Design nutzen und darauf aufbauen. 👍 Gibt es eine Möglichkeit, die Anzahl der Akkordeons zu reduzieren? Es fühlt sich an wie eine Menge Dinge, die sich öffnen können. Derzeit haben Usability-Tests ergeben, dass die Leute nicht auf die Akkordeons klicken, die wir bereits haben.

Der Begriff "Premade Blocks" fühlt sich etwas unangenehm an. Können wir dort "Block Patterns" ausprobieren, oder ist das genauso unangenehm?

Ja, versuchen wir es auf jeden Fall mit Block Patterns.

Ich persönlich denke, dass dieser Begriff unangenehmer ist, aber ich bin mir auch bewusst, dass er in den Design-Chats und anderswo diskutiert wurde und die Kosten für das Ausprobieren im Plugin sehr gering sind, also kein Grund, das nicht zu tun! Es könnte sich perfekt anfühlen oder sich als verbesserungsbedürftig herausstellen, und wir werden es uns noch einmal ansehen.

Wie sieht es aus, wenn ich auf den Inserter in der oberen Symbolleiste klicke und dann auf die Registerkarte "Blockmuster" klicke? Verschiebt sich das Popover zu einem Modal? Ändert das Popover die Größe, bleibt aber ein Popover an derselben Position? Behält es die gleiche Größe und Position bei und zeigt jetzt nur Muster?

Es würde keine Verschiebung passieren. Es wäre genauso wie das große Modal, aber auf kleinerem Raum. Vielleicht ist dort nur Platz für eine einzelne Spalte mit Blockmustern.

Aber ich denke immer noch, dass es sich lohnt, dieselbe Benutzeroberfläche sowie beide Blöcke und Muster an beiden Standorten verfügbar zu haben.

Wie sieht die Interaktion aus, wenn Sie im Editor auf den Geschwister-Inserter und dann auf die Registerkarte "Blöcke" klicken? Ändert sich das Modal von hier aus in Größe oder Position oder bleibt es ein Modal?

Eine gute Frage, die ein PR / Prototyp beantworten könnte. Ich stelle mir null Änderung vor, dass es nur mehr Platz gibt, um Blöcke zu betrachten, die manche vielleicht bevorzugen!

Erstellen Sie einen Prototyp, der diese Fragen beantwortet. Gerne helfe ich Ihnen hier weiter, wenn Sie mir die Datei verlinken können.

Hier ist die Figma-Datei: https://www.figma.com/file/fnyj380i05vGzuuH60frLQ/G2-Design?node-id=85%3A6975 - es ist etwas chaotisch, aber Sie können mich anpingen, wenn Sie Hilfe benötigen.

Hier sind einige Erkundungen, die auf den hervorragenden Ideen basieren, die Sie alle geteilt haben. Ich habe mich absichtlich gezwungen, innerhalb des vom aktuellen Blockeinfüger bereitgestellten Raums zu arbeiten. Ich habe dies aus zwei Gründen getan:

1. Dies erleichtert uns die Übersetzung dieser Benutzeroberfläche in kleine Bildschirme.
2. Für die durchschnittliche Bildschirmgröße habe ich das Gefühl, dass der aktuelle Inserter bereits genügend Bildschirmfläche einnimmt. Daher glaube ich, dass ein größeres, zentriertes Modal keinen großen Nutzen bringt.

** Das obige ist ein Screenshot, der bei 1200 x 800 aufgenommen wurde.

Angesichts der Größenbeschränkungen des Blockeinfügers habe ich versucht zu untersuchen, wie wir den verfügbaren Speicherplatz so gut wie möglich nutzen können. Das Hilfefenster funktioniert zwar gut für Blöcke, es stört jedoch, wenn wir versuchen, größere Miniaturansichten für Blockmuster anzuzeigen. Also habe ich versucht, es zu entfernen, ohne seinen Inhalt loszuwerden . Dies gibt uns mehr Platz, nicht nur für Blockmuster, sondern auch für Blöcke. Mir gefällt auch sehr gut, wie die Miniaturansichten der Vorschau in einigen der hier freigegebenen Modelle nach Blockmustern suchen. Da wir bereits Blockvorschauen im Hilfefenster durchführen, sollten Sie dies ausprobieren.

Es sieht ungefähr so ​​aus:

Wenn Sie einen Block fokussieren / bewegen, ändert sich der Inhalt der Tipps "Band" unten entsprechend:

Im Grunde bewege ich nur Dinge herum:

Die Blockvorschau nimmt wirklich nicht viel mehr Platz ein als die aktuellen Schaltflächen, und wir können jetzt mehr als 3 pro Zeile anzeigen.

Ich habe auch versucht, kleinere Miniaturansichten anzuzeigen, aber ich finde, dass die Vorschauen schwerer zu lesen sind:

Bei all dem könnte die Registerkarte "Blockmuster" ungefähr so ​​aussehen:

Wir können eine vertraute Benutzeroberfläche für Blöcke und Blockmuster haben, die den verfügbaren Platz im Inserter optimal nutzt.

Danke, dass du an diesem Enrique gearbeitet hast!

Ich habe mich absichtlich gezwungen, innerhalb des vom aktuellen Blockeinfüger bereitgestellten Raums zu arbeiten. Ich habe dies aus zwei Gründen getan:

• Dies erleichtert uns die Übersetzung dieser Benutzeroberfläche in kleine Bildschirme.
• Für die durchschnittliche Bildschirmgröße habe ich das Gefühl, dass der aktuelle Inserter bereits genügend Bildschirmfläche einnimmt. Daher glaube ich, dass ein größeres, zentriertes Modal keinen großen Nutzen bringt.

Ich bin damit nicht einverstanden. Wir haben gute Möglichkeiten, ein Modal in Telefone (Vollbild) zu übersetzen, und wir können eine Musterspalte anstelle von zwei und drei anzeigen.

Ich sage dies, nachdem ich Entwürfe untersucht habe, die Ihren eigenen nicht allzu unähnlich sind, und bin daher auch nicht mit meinem früheren Selbst einverstanden.

Was mir klar wurde, war, dass wir, wenn wir riesige, üppige Blockmuster zeigen wollen, den ganzen Raum brauchen, den wir bekommen können. Hierbei wurden die von Mark und Rich skizzierten Punkte miteinander verbunden, was zu diesen Modellen führte (

Ich habe einen Stich in eine Blockbibliothek gemacht, die den gesamten verfügbaren vertikalen Platz einnimmt, den Hilfetext entfernt und das Vorschaufenster in # 19836 abtrennt. Es kann als Prototyp für die Gesamtidee dienen.

Enrique Ich würde gerne mit Ihnen zusammenarbeiten, um etwas von Ihrer Finesse in die großen vertikalen Modelle zu bringen, die zuvor gezeigt wurden. Hier ist die Figma-Datei: https://www.figma.com/file/fnyj380i05vGzuuH60frLQ/G2-Design?node-id=85%3A6975 - insbesondere funktioniert sie gut auf dem Desktop-Haltepunkt, aber die mobilen Haltepunkte sind noch nicht konkretisiert . Ich bin auch immer für ein Gespräch bereit, wenn das überhaupt hilfreich ist.

hey @jasmussen! 👋

Hier ist ein kurzes Modell, das Ihre großen vertikalen Modelle mit einigen Blockmustervorschauen kombiniert:

Ich mag das. Die großen Vorschauen fühlen sich bei dieser Größe gut an. Ein Problem, das ich habe, ist, dass ich nicht sicher bin, ob Akkordeonkategorien für die Navigation und Auffindbarkeit gut funktionieren, wenn die Vorschauen so groß sind.

Ich habe einige Zeit damit verbracht, die Idee zu untersuchen, stattdessen die Kategorien nebeneinander zu haben:

Ich denke, dies erleichtert das Scannen der verfügbaren Kategorien, aber es drückt die Kategorien für Blockmuster nach unten, und ich bin mir nicht sicher, ob ich das für richtig halte.

Lass mich wissen was du denkst.

Hier ist ein kurzes Modell, das Ihre großen vertikalen Modelle mit einigen Blockmustervorschauen kombiniert:

Das ist großartig! Insbesondere das Sehen von Mustern in der vertikalen Oberfläche ist sehr aufschlussreich und funktioniert etwas besser als ich angenommen hatte.

Die Kategorien auf der Seite sind auch nicht schlecht, obwohl ich mich frage, ob sie in der Popover-Version oben links besser als Dropdown dienen, aber in der vom Geschwister-Inserter geöffneten Dialogversion möglicherweise gut funktionieren.

Danke dafür! Ich werde auch andere hereinlassen.

Hier sind einige weitere Erkundungen, die die jüngsten Modelle wiederholen:

1. Registerkarten für Blöcke und Blockmuster + Liste für Kategorien

2. Registerkarten für Blöcke und Blockmuster + Dropdown-Liste für Kategorien

Ich denke , 1 fühlt sich richtig an . Mir gefällt, wie die Liste der Kategorien vollständig sichtbar ist (besser für die Auffindbarkeit), und ich denke, dies sollte gut skaliert werden.

Während sich 2 aufgeräumter anfühlt, mache ich mir Sorgen, dass die Liste der Kategorien hinter einem Klick verborgen ist und somit die Auffindbarkeit beeinträchtigt.

@jasmussen @mapk @shaunandrews was denkst du?

Ich denke , 1 fühlt sich richtig an . Mir gefällt, wie die Liste der Kategorien vollständig sichtbar ist (besser für die Auffindbarkeit), und ich denke, dies sollte gut skaliert werden.

Während sich 2 aufgeräumter anfühlt, mache ich mir Sorgen, dass die Liste der Kategorien hinter einem Klick verborgen ist und somit die Auffindbarkeit beeinträchtigt.

Sieht gut aus @enriquesanchez! Nummer 1 fühlt sich auch richtig an.

Ein paar Gedanken:

ein. Wir müssen einen Mechanismus herausfinden, was passiert, wenn es eine lange Liste von Kategorien gibt.

b. Wie sollen Kategorien bestellt werden? Gibt es eine Priorität über das Thema, dann Plugin? Alphabetisch? Oder eine Kombination?

c. Wenn das Thema Muster für verschiedene Kategorien registriert, werden die Muster in der Kategorie "Von Thema" sowie in der angegebenen Kategorie jedes Musters angezeigt?

Ein Echo für Richs Kommentare und Fragen, wunderbare Zusammenfassung. Gute Arbeit!

Zu berücksichtigen ist, dass die Bibliothek gemäß der aktuellen Arbeit beim Öffnen über den Geschwister-Inserter als großer Dialog angezeigt wird und umgekehrt, wenn sie von oben links geöffnet wird, kleiner ist. Wir könnten standardmäßig die Kategorien auf der Seite verwenden und sie in ein Dropdown-Menü zusammenfassen, wenn es die reaktionsschnellen Herausforderungen erfordern.

b. Wie sollen Kategorien bestellt werden? Gibt es eine Priorität über das Thema, dann Plugin? Alphabetisch? Oder eine Kombination?

Wahrscheinlich wird es eine Kombination aus ein paar "gesegneten" oben und dann alphabetisch sein. Bis zu einem Punkt, an dem Plugins ihre Kategorien __Sweet Blocks oder 1. Sweet Blocks benennen. Es scheint eines dieser Dinge zu sein, die wir riskieren können, jetzt zu überdenken, und da es einfach ist, sich später anzupassen, können wir genauso gut die einfachste Lösung wählen und bei Bedarf optimieren.

@richtabor @jasmussen danke für das hervorragende Feedback.

ein. Wir müssen einen Mechanismus herausfinden, was passiert, wenn es eine lange Liste von Kategorien gibt.

Einverstanden. Mir ist nicht bekannt, ob für die Blockbibliothek etwas Ähnliches benötigt wurde und ob wir daraus lernen könnten.

b. Wie sollen Kategorien bestellt werden? Gibt es eine Priorität über das Thema, dann Plugin? Alphabetisch? Oder eine Kombination?

Ich stimme Joens Vorschlag zu. Es muss eine anfängliche Reihenfolge festgelegt und die Iteration überprüft werden, wenn das System defekt ist.

c. Wenn das Thema Muster für verschiedene Kategorien registriert, werden die Muster in der Kategorie "Von Thema" sowie in der angegebenen Kategorie jedes Musters angezeigt?

Meine erste Reaktion ist ja. Ich gehe davon aus, dass einige Muster unter verschiedenen Kategorien angezeigt werden. Ich denke das ist OK. Die Idee, eine Kategorie "Vom Thema" zu haben, ist keineswegs endgültig, aber ich dachte, es wäre eine einfache Möglichkeit, den Leuten zu helfen, ihre Website "wie die Demo aussehen zu lassen".

Ich werde das weiter wiederholen. Ich werde an einigen Prototypen arbeiten, um ein besseres Gefühl dafür zu bekommen, wie die Bibliothek aussehen und sich anfühlen wird.

Ich fand den Mobirise-Ansatz auf diesem Gebiet praktisch. Sie haben zwei Block-Panel-Auswahlspalten ... eine Gruppierung von Block-Panel-Miniaturansichten unter den allgemeinen Seitenkategorien (Kopfzeile, Menüs, Inhalt, Fußzeile usw.) mit einem angrenzenden Kategorieindex, sodass Sie alle Kategorien sehen und direkt zu a springen können Kategorie von Interesse.

Nicht als "DIE" Lösung zu pushen. Ich dachte nur, Sie könnten es als Beispiel nützlich finden und dann übersetzen, was Sie daran mögen / nicht mögen, auf das gewünschte Design übertragen.

Nur ein Vorschlag :-)

Danke, dass du es noch einmal probiert hast, @enriquesanchez!

Ich bin auch für Nummer 1. Wenn die Liste angezeigt wird, muss der Benutzer nicht durch eine Reihe von Klicks springen, um zum gewünschten Ergebnis zu gelangen. Es klingt sehr interessant, wenn es zusammenbricht, wie Joen es für reaktionsschnelle Bildschirme vorgeschlagen hat.

Ich kenne derzeit keinen Mechanismus in Gutenberg, der lange Listen verarbeitet. Das muss also durchdacht werden. Das Trennen der Blöcke von den Mustern durch die Verwendung von Registerkarten hilft bereits. Ein großes Lob dafür!

"Vom Thema" fühlt sich etwas seltsam an. Vielleicht "Themenmuster" oder nur "Thema" oder sogar "Thema: [Themenname]". Vielleicht sollten diese oben priorisiert werden? Ich bin damit einverstanden, sie unter der Kategorie "Thema" zusammenzuhalten UND sie auch unter den relevanten Kategorien zu veröffentlichen. Vielleicht wird dies so etwas wie eine "Sammlung"? https://github.com/WordPress/gutenberg/issues/19873

Im Modell ist mir aufgefallen, dass das Suchfeld, obwohl die Registerkarte "Muster" markiert ist, besagt, dass Sie nach Blöcken und Mustern suchen können. Ist das richtig? Oder sollte ich mich auf das Blockieren von Mustern unter der Registerkarte Muster beschränken?

Hier ist eine Mischung aus dem Drahtmodell, das Obenland geteilt hat:
https://github.com/WordPress/gutenberg/issues/17335#issuecomment -536109796

und Enriques Drahtmodellvorschlag Nummer 1:
https://github.com/WordPress/gutenberg/issues/17335#issuecomment -582673937

Hier ist der vorhandene Blockbereich sowie zusätzliche Optionen:

Wenn Sie die Registerkarte Blockvariationen auswählen, kann sich Folgendes ändern:

Bearbeiten: Wenn Sie die vorhandene Schnittstelle verwenden, sie jedoch um zusätzliche Optionen erweitern, bleibt die Auswahl der heutigen Blöcke konsistent. Man würde immer noch zum gleichen Inserter-Bereich gehen, um Blöcke auszuwählen. Diesmal kann man aber auch zwischen Blöcken (einzelne Blöcke) -> Blockvariationen (mehrere Blöcke) -> Seitenlayouts (Vorlagen) -> Site-Abschnitten (Kopf-, Fuß- usw.) wählen.

Eine zu berücksichtigende Sache ist die Platzierung des Suchfelds und was dies impliziert. Bei Ihren neuesten Designs @enriquesanchez wird das Suchfeld für jede der oberen Registerkarten (Blöcke und Muster) wiederholt, sodass ich denke, dass ich jeweils nur eine Gruppe durchsuchen kann. Meine anfängliche Hoffnung hier war, dass wir eine einzige Eingabe haben könnten, um die Suche über beide Blöcke und Muster hinweg zu ermöglichen.

Vielleicht ist das eine fehlgeleitete Hoffnung, oder vielleicht verstehe ich nicht, wie die Sucheingabe funktioniert.

Im Modell ist mir aufgefallen, dass das Suchfeld, obwohl die Registerkarte "Muster" markiert ist, besagt, dass Sie nach Blöcken und Mustern suchen können. Ist das richtig? Oder sollte ich mich auf das Blockieren von Mustern unter der Registerkarte Muster beschränken?

Bei Ihren neuesten Designs @enriquesanchez wird das Suchfeld für jede der oberen Registerkarten (Blöcke und Muster) wiederholt, sodass ich denke, dass ich jeweils nur eine Gruppe durchsuchen kann.

@mapk @shaunandrews Danke für das Feedback! Ich weiß nicht warum, aber irgendwo auf dem Weg habe ich das Suchfeld verschoben, weil ich es ursprünglich über den Registerkarten hatte (siehe https://github.com/WordPress/gutenberg/issues/17335#issuecomment-575835877).

Ich stimme @shaunandrews zu , ich denke, die Sucheingabe sollte das erste Element im Inserter sein (wie es derzeit ist). Es ist das erste, worauf ich mich konzentriere, nachdem ich den Inserter geöffnet habe. Es ist effizient und global.

Ich denke, die Sucheingabe sollte das erste Element im Inserter sein (wie es derzeit ist). Es ist das erste, worauf ich mich konzentriere, nachdem ich den Inserter geöffnet habe. Es ist effizient und global.

Können Sie auch untersuchen, wie dies aussehen könnte? Wie sieht das aus, wenn eine Suchabfrage Ergebnisse sowohl in Block- als auch in Mustern zurückgibt?

Ich habe einige Zeit damit verbracht, zu untersuchen, wie Blöcke angezeigt werden, wenn wir ein größeres Modal für die Blockbibliothek präsentieren, wie es zu diesem Thema untersucht wurde.

Ich neige immer wieder dazu, eine linke Liste für die Kategorien zu haben, wie das erste Beispiel in diesem vorherigen Kommentar.

Was wäre, wenn wir dem gleichen Muster folgen würden, außer für Blöcke? Dies bedeutet, dass wir nicht mehr Akkordeons verwenden würden, wie wir es derzeit tun. Dies bedeutet auch, dass für die meisten Kategorien VIEL ungenutzter Speicherplatz vorhanden ist:

Offensichtlich ist dies nicht ideal.

Eine weitere Iteration brachte mich auf die Idee, eine fortlaufende Liste aller Blockkategorien zu haben und die Links auf der linken Liste zu haben, um Sie zum entsprechenden Ort zu scrollen. Etwas wie das:

Ich stelle mir vor, dass der aktive Status auf der linken Liste entsprechend aktualisiert wird, wenn ich mit dem Scrollen begonnen habe (anstatt auf einen der Links zu klicken).

Diese Lösung nutzt den Platz viel besser und wir behalten ein paar Dinge bei, die mir gefallen:

1. Die Liste aller Kategorien ist immer sichtbar, was bedeutet, dass Auffindbarkeit und Erkundung von Vorteil sind.
2. Wir müssen nicht mehr klicken, um ein Kategorie-Akkordeon zu öffnen, und da die Liste aller Blöcke jetzt scrollbar ist, wird die Navigation einfacher.

Was denkst du?

@enriquesanchez Ich liebe diese Erkundung.

1. Würden wir die Vorschau in einem solchen Szenario loswerden? (Ich bin nicht unbedingt dagegen, nur neugierig)
2. Was würde passieren, wenn eine Kategorie zu lang wäre? (Beispiel: https://d.pr/i/DSsHTW). Würde es sich einfach in eine neue Zeile einfügen? In diesem Fall würde ich nur sicherstellen, dass die Kategorien mehr Platz zwischen sich haben, damit keine Verwirrung entsteht.
3. Ich liebe das kontinuierliche Scrollen im Gegensatz zu Akkordeons.

Gut aussehen. Frage aber. Müssen wir " Block " in " Block Patterns " klären?

Vielen Dank für das Feedback @jwold und @richtabor 👍

Würden wir die Vorschau in einem solchen Szenario loswerden?

Ich neige dazu, aber nur für Blöcke. Die Vorschau scheint für Muster sehr nützlich zu sein. Ich mag auch diese visuelle Unterscheidung zwischen beiden: Blöcke = kleine Symbole, Muster = größere Miniaturansichten

Was würde passieren, wenn eine Kategorie zu lang wäre?

Ich stimme zu, sie würden so etwas einpacken:

Ich liebe das kontinuierliche Scrollen im Gegensatz zu Akkordeons.

🙌

Frage aber. Müssen wir "Block" in "Block Patterns" klären?

@richtabor Das ist eine gute Frage. Sie schlagen also vor, dass wir "Blöcke" und "Muster" verwenden?

Übrigens denke ich, dass Patterns in Variationen umbenannt wurden.

Übrigens denke ich, dass Patterns in Variationen umbenannt wurden.

Variationen haben nichts mit Mustern zu tun - sie sind ein technischer Bestandteil von Bausteinen und werden in der Benutzeroberfläche nicht als Begriff angezeigt.

Ich habe verschiedene Variationen der Blockbibliothek untersucht, als ich von einem Geschwister-Inserter (irgendwo in der Mitte des Dokuments) aufgerufen wurde.

1. Popover

Dies ist sehr ähnlich zu dem, was wir derzeit haben, nur ein bisschen größer:

2. Big Modal

Sollte das Navigieren in Mustern erleichtern. Ich bin mir nicht sicher, ob mir die Tatsache gefällt, dass es den Inhalt dahinter abdeckt.

3. Einschubfeld

Vorgeschlagen von @mapk. Sehr ähnlich zu https://github.com/WordPress/gutenberg/issues/17335#issuecomment -585425675 in Bezug auf Größe und Platzierung. Ich frage mich, ob das Einschieben das Standardmuster sowohl für die obere Symbolleiste als auch für die Geschwister-Inserter sein könnte

Hier ist ein einfacher Click-through-Figma-Prototyp , der alles zusammenbringt.

Öffnen Sie die Blockbibliothek über die obere Symbolleiste, wechseln Sie zwischen den Registerkarten Block- und Blockmuster und suchen Sie. Versuchen Sie abschließend, die Blockbibliothek über das Geschwister oder die Mitte des Dokumenteinfügers zu öffnen.

❗️ _Hinweis: Das Einfügen von Blöcken und Mustern ist im Prototyp noch nicht verfügbar.

Hey Enrique @enriquesanchez

Ein einfacher Figma-Prototyp macht wirklich einen großen Unterschied. Da es wirklich ein Gefühl dafür gibt, wie sich eine fertige Version anfühlen würde.

Der Block-Bildschirm bietet wirklich einen besseren Überblick über das, was heute existiert. Man kann leicht verfügbare Blöcke sehen, ohne Akkordeons öffnen zu müssen, um zu sehen, welche Blöcke sie enthalten. Es steht auch mehr Platz zur Verfügung.

Eine Augen- und Gedankenübung am Samstagmorgen ... :)
Der Geist / die Augen bewegen sich herum und bemerken den Bereich der am häufigsten verwendeten und häufigsten Blöcke, der Symmetrie und Gleichgewicht enthält.

Wenn die Augen nach links wandern, wird eine Liste angezeigt, die mit "Meist verwendet" beginnt und mit "Einbetten" endet.

Am häufigsten wird in blau verwendet. Darüber befindet sich eine weitere blaue Farbe, eine Linie unter dem fett gedruckten Text der Blöcke (der Verstand weiß nicht, warum die blaue Linie dort ist, da sie so weit vom Wort der Blöcke entfernt ist, dass sie getrennt erscheint. Logisch weiß ich warum.). Rechts Blockmuster nicht fett gedruckt, ohne Linie darunter. Unten finden Sie einen am häufigsten verwendeten Text in Fettdruck. Weiter oben sehe ich den Randumriss eines Feldes und den darin enthaltenen Suchtext und kann mich wieder entspannen.

Das bedeutet, jedes kleine Element zu betrachten und wie es sich auf das bezieht, was sich in der Nähe befindet und in welchem ​​Gesamtbereich es sich befindet.

Hallo.

Es muss Platz für eine textbasierte Darstellung des Blockmusters geben.
Nicht allen Benutzern wird ein Vorschaubild helfen.

Danke für das Feedback @paaljoachim und @carolinan! 🙏

Es muss Platz für eine textbasierte Darstellung des Blockmusters geben.

Ich stimme mit Ihnen ein. Ich werde dem Prototyp mehr Wiedergabetreue hinzufügen, einschließlich Block- / Musterbeschreibungen beim Schweben. Wir müssen sicherstellen, dass diese Beschreibungen an AT übermittelt werden.

2. Big Modal

Sollte das Navigieren in Mustern erleichtern. Ich bin mir nicht sicher, ob mir die Tatsache gefällt, dass es den Inhalt dahinter abdeckt.

Für den Geschwister-Inserter fühlt sich dies am natürlichsten an, obwohl ein HiFi-Modell uns helfen kann, besser zu entscheiden. Vielleicht hilft die Verwendung des dunklen Kernhintergrunds des Modals dabei, den Fokus auf das Modal zu lenken (siehe Abbildung unten).

Bietet dem Benutzer genügend Anzeigebereich, um die einzelnen Muster richtig zu erkennen, sodass er eine klarere Vorstellung davon hat, was der Seite hinzugefügt wird. Wir könnten die Muster sogar auf zwei Spalten beschränken - um sicherzustellen, dass sie richtig sichtbar sind.

3. Einschubfeld

Vorgeschlagen von @mapk. Sehr ähnlich zu # 17335 (Kommentar) in Bezug auf Größe und Platzierung. Ich frage mich, ob das Einschieben das Standardmuster sowohl für die obere Symbolleiste als auch für die Geschwister-Inserter sein könnte

Das ist interessant, obwohl ich denke, dass es zu weit vom Geschwister-Inserter entfernt sein wird. Und wenn wir sowieso die Sicht auf den Inhalt / die Website dahinter blockieren, würde ich sagen, dass ein vollständiges Modal den Speicherplatz besser nutzt. Unsere Aufmerksamkeit sollte an dieser Stelle den Mustern / Insertern gewidmet sein.

Auch dies sind keine Screenshots - aber "Beispiele", ähnlich wie Stilvariationen Beispiele unterstützen - richtig?

Beispiel eines Beispiels:

@richtabor Das ist eine gute Frage. Sie schlagen also vor, dass wir "Blöcke" und "Muster" verwenden?

Ich würde es sagen.

Ich begann dies in kleine Iterationen zu zerlegen und fügte der Problembeschreibung eine Aufgabenliste hinzu. Dies ist keine vollständige Liste, und wir werden höchstwahrscheinlich Dinge entdecken, wenn wir mit der Implementierung fortfahren. Einige dieser Elemente werden möglicherweise nicht als Teil dieses Problems implementiert.

Für das, was es wert ist, wäre es wirklich hilfreich, den ursprünglichen Kommentar zu bearbeiten, um ihn kurz zu definieren
Was genau ist ein Blockmuster und wie unterscheiden sie sich von Blockvorlagen?

Dies wäre hilfreich, um den Prozess der Einbeziehung potenzieller Mitwirkender zu beschleunigen.
und die Kernmitglieder daran erinnern, dass sie in diesem Bereich auffrischen und sich auf dem Laufenden halten möchten; und um sicherzustellen, dass sich alle Mitwirkenden auf derselben Seite befinden (Wortspiel beabsichtigt).

Unter den bestehenden Kernmitgliedern gab es einige Verwirrung (lesen Sie auch die Kommentare, die unmittelbar auf den verknüpften Kommentar folgen) über die widersprüchliche Verwendung der Terminologie mit Vorlagen.

Beim Lesen der ersten paar Kommentare war ich mir nicht sicher, wie sich "Blockmuster" von inneren Vorlagen unterscheiden (die über mehrere Beitragstypen hinweg wiederverwendet werden können und nicht an einen bestimmten Teil einer Seite gebunden sein müssen).

Nach dem, was ich gesammelt habe; Blockmuster Reihe von Blöcken, die Layout sind; Der Inhalt innerhalb der Blöcke wurde jedoch noch nicht vom Benutzer definiert und der Inhalt ist der gleiche
und sollen sie template.php-Dateien ersetzen?
(Es ist kompliziert, dass eine Vorlage in WordPress fast die gesamte Seite darstellen kann oder in 3-4 zusätzliche Vorlagendateien (innere Vorlagen) abstrahiert werden kann.)

Würde ein Blockmuster einen Anwendungsfall lösen: "Ich benötige einen Callout-Block, der aus mehreren Blöcken besteht: eine Überschrift (deren Überschriftenebene ich basierend auf der Semantik anpassen könnte)
einen Absatzblock und einen Link zur Registrierung für eine Veranstaltung ")?

Mustervorschau

Ich habe das neulich gesehen. Dies ist ein Beispiel dafür, wie die Vorschau der vertikalen Position des Cursors folgt. Wenn wir den Weg einer getrennten Vorschau gehen, ist dies möglicherweise eine Erkundung wert.

Ein Beispiel dafür, wie die Vorschau der vertikalen Position des Cursors folgt. Wenn wir den Weg einer getrennten Vorschau gehen, ist dies möglicherweise eine Erkundung wert.

Ich denke tatsächlich, dass die Vorschau an einer festen Position das Scrubben von Elementen in der Liste erleichtern könnte - Sie können Ihr Auge im selben Bereich behalten.

Nur eine Frage. Ermöglichen Blockmuster das Definieren gesperrter Bereiche, sodass Benutzer die Grundstruktur in einem Blockmuster nicht ändern können? Können wir beispielsweise die Anzahl der Feature-Bereiche im angehängten Blockmuster sperren, sodass keine hinzugefügt oder gelöscht werden können? Ziehen Sie diesen Anwendungsfall in Betracht?

hi @mrleemon!

Wir haben dieses Szenario nicht berücksichtigt. Blockmuster sind ab sofort Abschnitte, die Benutzer nach Bedarf hinzufügen und bearbeiten können. Dies bedeutet auch, den Inhalt an ihre Bedürfnisse anzupassen.

Würde es Ihnen etwas ausmachen, etwas mehr über den Anwendungsfall zu erzählen, den Sie geteilt haben? Wann oder warum wäre es nützlich, es zu haben?

@enriquesanchez

Ich denke an ein einseitiges Design mit einer Reihe von Gruppenblöcken in einer bestimmten Reihenfolge, mit denen Benutzer (z. B. mit der Editor-Rolle) den Inhalt dieser Blöcke ändern, aber nicht löschen oder ihre Reihenfolge ändern können Menüanker oben auf der Seite stimmen weiterhin mit der Seitenstruktur überein.

Würde es Ihnen etwas ausmachen, etwas mehr über den Anwendungsfall zu erzählen, den Sie geteilt haben? Wann oder warum wäre es nützlich, es zu haben?

Aus früheren Kundenarbeiten habe ich diese Anfrage auch gehört, normalerweise von größeren Organisationen mit bestimmten redaktionellen Arbeitsabläufen. Normalerweise möchten sie ein genehmigtes Layout für einen bestimmten Inhaltstyp bereitstellen und dann Autoren haben, die den Inhalt (Bilder, Videos, Text usw.) innerhalb des Layouts bearbeiten können, aber das Layout selbst nicht ändern. Der Grund dafür ist normalerweise, ein einheitliches Design und Branding für Inhalte auf den Websites beizubehalten, selbst wenn viele verschiedene Personen Inhalte generieren und bearbeiten.

Autoren haben, die den Inhalt (Bilder, Videos, Text usw.) innerhalb des Layouts bearbeiten können, aber das Layout selbst nicht ändern

Ja, im Grunde wäre es großartig, Layoutblöcke (Gruppen, Spalten usw.) sperren zu können.

Ich weiß, dass dies schon früher aufgetaucht ist, und ich könnte schwören, dass Vorlagen einen Sperraspekt hatten, mit dem Sie dies erreichen können, aber es entgeht mir. In jedem Fall scheint der Anwendungsfall legitim und interessant zu lösen.

Dies ist definitiv beim Erstellen von Vorlagen verfügbar. Da es sich um eine API auf niedrigerer Ebene handelt, ist der Zugriff über die Mustererstellungsebene noch nicht möglich.

Hier ist ein Vorschlag, der auf dem neuesten Modell von Richs @richtabor basiert
Big Modal 2. https://github.com/WordPress/gutenberg/issues/17335#issuecomment -587951100

Großes Modul gegen kleines Modul. Möglicherweise gibt es irgendwo ein Symbol, das den Inserter-Bildschirm verkleinert. Man klickt auf das kleinere Symbol und der Block-Inserter wird klein, so dass man sich auf das Muster konzentrieren kann, das man in Bezug auf den Inhalt des Layouts verwenden möchte.

Ich habe Richs Modell fortgesetzt und Use and Edit und ein Schlosssymbol hinzugefügt.
Dies bedeutet, dass der Benutzer ein Muster oder einen wiederverwendbaren Block bearbeiten kann.
Bearbeiten ist nicht verfügbar, wenn der Administrator das Muster gesperrt hat.
Der Benutzer kann auf Verwenden, Titel des Musters oder das Muster selbst klicken, um es direkt zu verwenden / in das Layout einzufügen. Ich habe auch die blaue Unterstreichung näher an den ausgewählten Bereich verschoben.

Alternative.
Verwenden Sie ein Einstellungs-Gir, um ein Dropdown-Menü zu erstellen, in dem Bearbeiten (wenn das Objekt bearbeitet werden kann), Importieren und Exportieren usw. angezeigt wird.

Klicken Sie auf Bearbeiten. Fokussierter Bereich, um nur ein Muster / einen wiederverwendbaren Block zu bearbeiten.

Die erste Version davon ist fertig. Es gibt hier noch einige Folgeaufgaben (Suche, Kategorien ...). Ich werde dieses Problem jedoch schließen, da wir dieses # 21080 mit einer guten Liste von Folgemaßnahmen haben.