Gutenberg, der neue Herausgeber von WordPress, wird seit mehr als einem Jahr ver?ffentlicht. Jetzt scheint die Kontroverse, die es umsetzt, nachgelassen zu haben. Mit viel Zeit, um die Benutzererfahrung und die Benutzerfreundlichkeit zu verbessern, sehen die Menschen ihr Potenzial klarer. Wir k?nnen nicht zurückblicken.

Autoren wie Haris Zulfiqar drückten Optimismus darüber aus, w?hrend Nick Hamze glaubte, Bl?cke seien die Richtung des Redakteurs der n?chsten Generation.

Ich denke, es gibt zwar immer noch einige M?ngel (z. B. warum k?nnen Sie in einer Blockreferenz keine Liste hinzufügen? Warum k?nnen Sie keinen Klassen für einen Link hinzufügen? Warum k?nnen Sie den Blockwahlschalter nicht mit den Pfeiltasten durchsuchen?), Naken Sie es im Allgemeinen sehr. Und es sind nicht nur konzeptionelle Likes. Ich habe die CSS-Tricks-Migration nach Gutenberg als eines meiner 2020-Ziele aufgelistet und begann im Januar sofort mit der Umsetzung.

Habe die Sü?e zum ersten Mal probiert

Da wir die Erlebniserfahrung für die Erstellung von Pressemitteilungen in einen neuen Redakteur umgewandelt haben, haben wir mit Gutenberg Erfahrung gesammelt. Unsere Pressemitteilung ist ein benutzerdefinierter Artikeltyp auf CSS-Tricks, der auf ?ffentlichen URLs ver?ffentlicht wird, einen benutzerdefinierten RSS-Feed enth?lt und von MailChimp gekrabbt und gelesen wird.

Wir k?nnen Gutenberg leicht für unsere Pressemitteilungen durch das Gutenberg Ramp Plugin aktivieren. Dies funktioniert sehr gut für benutzerdefinierte Beitragstypen und Beitr?ge mit einer einzelnen ID, aber ich m?chte Gutenberg nur für neue Inhalte aktivieren. Schlie?lich habe ich das Plugin ge?ndert. Wenn Sie der Meinung sind, dass dies eine gute Idee ist, sehen Sie sich meine Pull -Anfrage an.

Dies ist mir wichtig, da wir Zehntausende alter Artikel mit alten Redakteuren erstellt haben, und obwohl Gutenberg sie bei der ?ffnung für die Bearbeitung nicht verf?lscht, bietet es keine Bearbeitungserfahrung für diese Artikel sowie einen "klassischen" Editor (zum Beispiel haben wir spezielle Schaltfl?chen für spezielle Codebl?cke usw.).

Alte Inhalte bew?ltigen

Es w?re gro?artig, wenn Gutenberg beim ?ffnen einen alten Pfosten in einen geeigneten Block umwandeln k?nnte, aber es scheint momentan ein Traum zu sein. Dies bedeutet, dass es HTML analysieren muss, feststellen muss, welche Bl?cke wie Bl?cke aussehen, herausfinden, welcher Block am besten geeignet ist, einschlie?lich unserer wichtigsten benutzerdefinierten Bl?cke, und dies genau auf eine Weise tun, die nicht schief geht.

Derzeit verwendet alte Inhalte immer noch den alten Editor. Es gibt sogar eine einfache M?glichkeit, Gutenberg für einen einzelnen Artikel des Herausgebers zu erm?glichen. (Ich k?nnte die Werte von Gutenberg Rampe in die Verwendung von Gutenberg -Rampen festigen, aber das ist etwas langweilig.)

Ich bin ein wenig besorgt, dass sich der alte Redakteur verschlimmern wird. Zum Beispiel ist einer der Hauptgründe, warum ich damit begonnen habe, dass der alte Editor auf dieser Website zuf?llig zum Ende der Seite scrollt. Ich habe keine Ahnung warum, aber ich fühle mich sehr schmerzhaft zu kreieren. Es ist nur ein trivialer Fehler, der mich dazu bringt, ihn mit einem Editor zu erleben, der sich aktiv entwickelt.

Aber selbst wenn die alten Redakteure wirklich schlecht werden, ist es nicht so schlimm, Gutenberg für alles zu erm?glichen. Alle alten Inhalte werden in einem gro?en "klassischen" Block sein und alles wird in Ordnung.

Wie auch immer - es funktioniert gut!

Das Aktivieren von Gutenberg für einen neuen Artikel ist für sich eine gro?e Herausforderung, aber wir haben ihn aktiviert und verwenden ihn, um alle neuen Inhalte zu erstellen. Ich spreche hier nur alleine, aber ich liebe es so sehr . Es ist ein gro?es Upgrade für die Erstellung von Inhalten und ich bin ein wenig besessen davon. Das Team ist auch sehr glücklich.

Erstellen Sie benutzerdefinierte Bl?cke

Schauen Sie sich unseren ausgefallenen Textblock an:

Sie denken vielleicht, oh, cool, die Chance, benutzerdefinierte Bl?cke zu erstellen. Tats?chlich haben wir sogar Methoden zum Lernen und Herstellen von Gutenberg -Bl?cken in einer gro?en Serie eingeführt. Dies wirft jedoch eine sehr relevante Frage auf: Wenn Sie keine Bl?cke erstellen . Das einzig Einzigartige an diesem Block ist, dass er einen speziellen Klassennamen hat, den unser CSS verwendet, um den Block zu stylen. Das ist alles. Das Hinzufügen von Klassennamen ist eine integrierte Funktion für jeden Block, sodass hier keine benutzerdefinierten Bl?cke erforderlich sind.

Tats?chlich k?nnen wir noch einen Schritt weiter gehen und einen Textblock mit genau dieser Klasse als "wiederverwendbarer Block" erstellen, damit wir uns nicht einmal an den Klassennamen erinnern oder eingeben müssen. Nachdem ich mit dieser Klasse einen Textblock erstellt hatte, habe ich aus dem Kebab -Menü "Konvertieren in wiederverwendbares Block" ausgew?hlt, und jetzt wird er dauerhaft als wiederverwendbares Block gespeichert.

Wir haben es jetzt für ein paar andere Dinge wie unseren "Artikelserie" -Block verwendet (einen mit besonderen)<div> -With-a-Class-Wrapper<code><ul></ul> Und<ol></ol> ) und Fu?note und so weiter. Aber wir brauchen auch einige benutzerdefinierte Bl?cke. Dafür habe ich Guten-Block verwendet, um ein spezielles Plugin zu erstellen, um sie zu erstellen. Ich denke, ein Block, der für uns sehr wichtig ist, ist der Codeblock. Es gibt bereits einen nativen Block für Codebl?cke. Es bringt den Code im Grunde in einen

<code>標簽中，并且來自Gutenberg的內(nèi)容默認情況下已經(jīng)轉(zhuǎn)義。</code> Unsere ausgefallenen Codebl?cke erm?glichen es uns, ihre Sprache auszuw?hlen, bestimmte Zeilen hervorzuheben und benutzerdefinierte Tags bereitzustellen. Dies alles ist in unserem alten Editor über HTML -Attribute m?glich, daher bietet dieser Block nur eine sch?ne Benutzeroberfl?che darüber hinaus.



<p>Der Block ist sehr spezifisch für CSS-Tricks, daher ist es nicht viel Sinn, ihn zu er?ffnen. Aber der andere Block, den ich erstellt habe, ist Open Source, dh Codepen -Einbettbl?cke. Ich habe darüber im Codepen -Blog geschrieben.</p>



<p>Sie k?nnen eine Codepen -URL einfügen, die in eine Codepen -Einbettung umgewandelt wird. OEMbed macht dies bereits standardm??ig, aber mit diesem Plugin k?nnen Sie alles wie H?hen-, Themen- und Standard -Registerkarten steuern.</p>



<p>Es ist toll, tats?chlich eingebettete Stifte beim Erstellen zu sehen!</p>



<h3>Ungel?ste Herausforderungen</h3>



<p>Die gr??te Herausforderung ist derzeit die Verarbeitung von Bildern. Im alten Herausgeber haben wir ein sehr, sehr ausgefallenes Cloudinary -Setup integriert. Die Bilder werden automatisch auf wolkinhaltige Hochzeiten hochgeladen, Haltepunkte werden programmgesteuert ermittelt, mehrere Gr??en werden erstellt, reaktionsschnelle Bildsyntax werden erstellt, und was in HTML endet, ist die perfekte reaktionsschnelle Bildsyntax mit wolkinhaltigen Bildern. Dies erm?glicht es uns, CDN zu nutzen und Bilder im besten Format zu liefern.</p>



<p>Dies geschieht nicht in Artikeln, die mit Gutenberg erstellt wurden. ?</p>



<p>Ich muss ein neues System finden oder entwickeln, das überall auf der Website Bilder gut abwickelt und ein leichter gepflegter nicht kundenspezifisches System verwendet. Ich k?nnte Cloudinary verwenden, um dieses Problem zu l?sen, ich k?nnte andere Dienste ausprobieren. Ich k?nnte WordPress direkt umgehen lassen, das von der Jetpack -Site Accelerator betrieben wird. Ich bin mir noch nicht sicher. Es gibt immer etwas zu tun.</p>



<ol><li>Ich sehe, dass WordPress selbst auch am Block -Gerüstspiel teilnimmt. Ihr Konzept "Wordpress-Block" -Konzept hat das Gutenberg-Repository selbst eingegeben, und Sie k?nnen es mit `npm init @wordpress/block [options] [slug]` beginnen.</li></ol>