Den Gutenberg-Editor mit einer Block-Bibliothek erweitern – Tutorial – Teil 4

5 Antworten

  1. Heinrich sagt:

    Hallo,
    Sehr informative Tutorials, die bei meinen Überlegungen zum Gutenberg-Editor sehr hilfreich sind.
    Tutorial 4 Erweiterungen mit Block-Bibliotheken – hier generelle Frage zu den verlinkten Plugins:
    hinterlassen die vorgestellten WP5 Gutenberg Plugins der Block- (z.B. Advanced GB oder Kadence PB) und Design-Bibliotheken kryptische Sohortcodes, wie etliche „namhaften“ Pagebuilder für WP-Themes, wenn man diese Plugins wieder deinstalliert (erstelltes Design/Theme kann nicht benutzt oder muß mit großem Aufwand an Formatierungen im Code nachbearbeitet werden)?
    Ich habe es so verstanden, dass diese Plugins (im Gegensatz zu den „namhaften“ Pagebuildern) den Umfang des Gutenberg-Editors lediglich erweitern, der dabei erzeugte Code aber dem des Gutenberg-Editors auch nach Deinstallation weiter verwendbar bestehen bleibt.
    Ist dem so?

    Beste Grüße
    Heinrich

    • Hallo Heinrich! Zunächst mal danke für dein Lob und sorry für die verspätete Antwort. Beim Deinstallieren eines Block-Plugins gehen tatsächlich die Formatierungen verloren. Das ist natürlich unangenehm, vor allem, wenn Blockbibliotheken von ihren Entwicklern nicht weiter gepflegt werden. Eine Lösung sehe ich da im Moment nicht, hoffe aber, dass WordPress selber in einem der kommenden Releases die Möglichkeit bietet einzelne Blocktypen ähnlich wie ein Plugin aus einem Online-Repository heraus zu installieren. Noch besser wäre es, wenn die bei WordPress mitgelieferte Blockbibliothek allmählich so erweitert wird, dass man auf externe Bibliotheken verzichten kann.

    • Hallo Heinrich,
      dass die Informationen beim Deinstallieren der Blockbibliotheken verloren gehen liegt daran, dass die Blöcke Layout-Anweisungen in eigenen CSS-Dateien mitbringen, die nach dem Deaktivieren oder Deinstallieren nicht mehr zur Verfügung stehen.

      Soweit ich weiß, arbeitet WordPress an einer Lösung, die es den Entwicklern von Blocktypen ermöglicht, diese ähnlich den Plugins im Plugin-Verzeichnis zentral – also bei WordPress – in eine Art Blockbibliothek abzulegen. Ob das den Missstand aber beseitigen wird ist fraglich.

      Die einzige Möglichkeit, die ich sehe ist es, den entsprechenden Code in der Plugin-Bibliothek zu identifizieren und ihn dann manuell in die eigene WordPress-Instanz zu übertragen. Das dürfte aber ein ziemlich komplexes Unterfangen sein.

      Hier habe ich den Code für den Click-to-Tweet Block aus meinem Artikel herausgesucht (rechte Maustaste – Seitenquelltext anzeigen):

      <div style="height:44px" aria-hidden="true" class="wp-block-spacer"></div> <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fgoldpilz.de%2Fblock-bibliothek-gutenberg-tutorial%2F&#038;via=@crischo_cschoen&#038;text=Prima+Artikel+%C3%BCber+Block-Bibliotheken+f%C3%BCr+den+Gutenberg-Editor%21+Sehr+zu+empfehlen%21&#038;hashtags=gutenberg%2Cblocks%2Cblocklibrary" target="_blank" class='wp-block-advanced-gutenberg-blocks-clicktotweet'><div class='wp-block-advanced-gutenberg-blocks-clicktotweet__content'> Prima Artikel über Block-Bibliotheken für den Gutenberg-Editor! Sehr zu empfehlen!</div><div class='wp-block-advanced-gutenberg-blocks-clicktotweet__footer'> <span>Click to tweet</span> <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'> <path fill="#FFF" d='M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23'
       /> </svg></div> </a>


      — > Zusätzlich du dem spezifischen HTML-Code referenziert der Blocktyp noch verschiedene CSS-Klassen:


      ‚wp-block-advanced-gutenberg-blocks-clicktotweet‘
      ‚wp-block-advanced-gutenberg-blocks-clicktotweet__footer‘
      ‚wp-block-advanced-gutenberg-blocks-clicktotweet__content‘


      –> Diese finden sich in der Datei advanced-gutenberg-blocks/dist/blocks.style.build.css im Plugin-Verzeichnis von WordPress


      .wp-block-advanced-gutenberg-blocks-clicktotweet {
      display: block;
      -webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.07);
      box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.07); }

      .wp-block-advanced-gutenberg-blocks-clicktotweet__content {
      background: #44C6E8;
      padding: 1.3em 4em 1.3em 1.3em;
      color: white;
      font-size: 1.3em;
      border-top-right-radius: 3px;
      border-top-left-radius: 3px; }

      .wp-block-advanced-gutenberg-blocks-clicktotweet__footer {
      position: relative;
      background: #29A3C3;
      padding: 10px;
      color: white;
      font-size: .8em;
      text-align: right;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
      -ms-flex-align: center;
      align-items: center;
      border-bottom-right-radius: 3px; }

      .wp-block-advanced-gutenberg-blocks-clicktotweet__footer:after {
      content: “;
      display: block;
      position: absolute;
      left: 0;
      top: 100%;
      width: 0;
      height: 0;
      border-right: 16px solid transparent;
      border-top: 20px solid #29A3C3; }

      .wp-block-advanced-gutenberg-blocks-clicktotweet__footer svg {
      display: inline-block;
      height: 30px; }


      Wenn du jetzt den HTML Code oben direkt in deinen Post reinkopierst – (in der „HTML-Ansicht“) und dann den CSS-Code mittels Customizer als zusätzlichen CSS-Code einfügst, dann wird der Blocktyp korrekt angezeigt, auch nachdem du das Plugin deaktiviert hast.

      Vielen Dank für diesen Hinweis. Ich werde in meinem Tutorial auf jeden Fall einen entsprechenden Hinweis unterbringen.

  2. Thomas sagt:

    Ganz herzlichen Dank für diese ausführlichen und verständlichen Tipps.
    Ich plane schon lange den Umstieg von DIVI zu Gutenberg.
    Habe es bereits einmal versucht und habe wieder aufgegeben. Ich konnte z.B. den Abstand zwischen den Blöcken nicht einstellen – die Absätze waren zu dicht.
    Werde es nun im neuen Jahr nochmals versuchen.
    Gibt es aus deiner Sicht empfehlenswerte (deutsche) Theme ?
    Die Struktur dieser Seite gefällt mir sehr gut – würde ich gern übernehmen.

    • Hallo Thomas,
      es freut mich, dass du daraus einen Nutzen ziehen kannst. Das Theme das ich verwende heißt „Hueman Pro“. Die Einstellungen im Customizer werden mir auf deutsch angezeigt. Die Entwickler selber sind in Frankreich ansässig, haben das Theme aber anscheinend übersetzt. Von der gleichen Firma gibt es noch ein Theme das sich „Customizr Pro“ nennt und das ebenfalls nicht schlecht zu sein scheint. Ich habe mir ursprünglich beide angeschaut – es gibt für beide Themes kostenlose Versionen – mich dann aber für „Hueman“ entschieden, weil das meine Bedürfnisse am besten abgedeckt hat. Mit anderen Themes habe ich jetzt nicht so viel Erfahrung gesammelt, dass ich dir eines davon empfehlen mag. Das Standard-Theme Twenty-Fourteen von WordPress ist auch ganz gut, wenn man eine Webseite im Magazin-Stil aufbauen will. Das habe ich mehrere Jahre lang benutzt, bis ich dann auf „Hueman“ umgestiegen bin. Customizr und Hueman gibt es hier —> https://presscustomizr.com/

Schreibe einen Kommentar

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.