Support » Plugins » Gutenberg Widgets als HTML bearbeiten

  • matze112

    (@matze112)


    Hi,

    ich würde gerne einige Widgets von Gutenberg Kadence wie beispielsweise ein Akkordion oder RSS-Feed als HTML bearbeiten.

    1) Ein angefertigtes Akkordion möchte ich per HTML Code über den Widget-Bereich in meine Sidebar einfügen. Wenn ich den Block als HTML bearbeiten und den Code herauskopieren möchte, dann zeigt er mir folgende Fehlermeldung an:

    Dieser Block enthält unerwarteten oder ungültigen Inhalt

    Wenn ich den Code mit allen gewünschten Attributen über den Widget-Bereich einfüge, wird in der Sidebar das Ausgangsstyling des Akkordions angezeigt.

    Im Content-Bereich sieht man dann das blaue Akkordion und in der Sidebar das graue, obwohl dies der selbe HTML (Copy & Paste) ist.

    2) Auch beim Widget RSS-Feed gibts Probleme. Wenn ich beispielsweise auf eine Nachricht im Feed klicke, dann öffnet der Link im selben Fenster. ich würde dies gerne über HTML umstellen, damit dieser im Neuen öffnet aber auch da zeigt er mir wieder diese Fehlermeldung an….

    Vielen Dank für Unterstützung

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 17)
  • Moderator Bego Mario Garde

    (@pixolin)

    Wenn du im Editor einen Rich-Content-Block einfügst (also das, was z.B. über eine Zwischenüberschrift, einen Absatz oder eine Liste hinausgeht), wird dir links im Editor angezeigt, wie der Inhalt aussieht, während du rechts davon Einstellungsoptionen im Kontext mit dem gerade bearbeiteten Block-Element angezeigt bekommst. Änderst du nun über die Menüauswahl „Als HTML bearbeiten“ das HTML-Konstrukt, das den Block ausmacht, passen die zugehörigen Einstellungen nicht mehr. Der Editor „kommt durcheinander“ und meldet dir, dass der Block unerwarteten („Hey, da sollte doch was anderes kommen?!“) oder ungültigen („Das passt nicht zu meinem JavaScript!!1!“) Inhalt enthält. Wenn du darauf bestehst, dieses HTML trotzdem zu verwenden, kannst du es per Button „zu HTML umwandeln“ – nur passen dann eben nicht mehr die Einstellungsmöglichkeiten.

    „Als HTML bearbeiten“ ist (so habe ich es zumindest verstanden) nicht so gemeint, dass du die Funktionalität eines Gutenberg-Blocks änderst, sondern dass diejenigen, die es gewohnt sind, z.B. eine Tabelle rasch als HTML einzufügen, das auch im Editor machen können.

    matze112

    (@matze112)

    Hi Bego,
    danke für die umfangreiche Erklärung.

    Was mache ich wenn ich z.B. das Akkordion in der Sidebar haben möchte und dieses nicht im Widget Bereich angezeigt wird, wo es ich es dann per drag and drop in die gewünschte Seitenleiste hätte ziehen können?
    Hab es auch schon probiert über den Seitenquelltext zu kopieren, aber er zeigt immer nur die Ausgangsfarben… an

    Moderator Bego Mario Garde

    (@pixolin)

    Das kann ich dir nicht sagen.

    Im Moment gibt es im Gutenberg-Plugin ein experimentelles Featur, mit dem du Blöcke als Widgets in der Sidebar nutzen kannst. Dabei werden aber die per Plugin ergänzten Blöcke bisher nicht unterstützt.

    Wenn du partout ein Akkordion in der Sidebar verwenden möchtest, würde ich ein Plugin wie Shortcodes Ultimate nutzen und das ggf. mit eigenen CSS-Regeln ergänzen.

    matze112

    (@matze112)

    Schade bislang fand ich Gutenberg ganz gut, aber jetzt. Wenn so etwas Einfaches so schwierig wird….

    Ich kann zu dem Widget die Klasse nicht ermitteln. Kannst du mir da helfen?
    In der rechten Sidebar, der graue Button auf halber Höhe „Beliebte Seiten“.
    Das CSS-Styling bekomme ich dann selber hin.
    https://tinyurl.com/y4zs7hvs

    Vielen Dank für die Unterstützung

    Moderator Bego Mario Garde

    (@pixolin)

    Schade bislang fand ich Gutenberg ganz gut, aber jetzt. Wenn so etwas Einfaches so schwierig wird….

    Das ist alles noch in Entwicklung. Irgendwann kannst du dann beliebig Blöcke in der Sidebar platzieren. Im Moment beschränkt sich das aber noch auf die Standard-Blöcke.

    Über den Begriff „einfach“ könnten wir lange diskutieren. Mit Blick auf den Code, der hinter den Blöcken steht, empfinde ich das persönlich nicht als einfach; aber das ist natürlich sehr subjektiv.

    Ich kann zu dem Widget die Klasse nicht ermitteln. Kannst du mir da helfen?

    Da gibt es nicht nur eine und da ich nicht weiß, was du jetzt im Detail anders ausgeben möchtest, kann ich dazu nichts sagen.

    Die CSS-Klassen kannst du aber mit den Entwickler-Tools deines Browsers ermitteln: Rechtsklick auf den Button > Element untersuchen – im dann geöffneten Browser-Abschnitt siehst du links das HTML und rechts das zugehörige CSS.

    matze112

    (@matze112)

    Ja das mit den Dev.Tools habe ich schon probiert. Folgende CSS-klasse, die oben angezeigt wird und in der Regel auch funktioniert, gilt für alle Elemente dieses Widgets.

    .kt-blocks-accordion-header:hover

    Muss ich da womöglich eine ID zuordnen…?
    Ich möchte nur die Farbe von Hintergrund und Schrift + Icon ändern

    Moderator Bego Mario Garde

    (@pixolin)

    #kt-accordion-header-196454 {
        color: orange;
        background: aquamarine;
    }

    (Die Farbwerte sind natürlich nur willkürlich gewählt.)

    Eine gute Einführung in CSS findest du hier.

    matze112

    (@matze112)

    Da tut sich auch mit !important nichts.
    Ich finde bei mir folgende Klassen und ID

    class="kt-blocks-accordion-header kt-acccordion-button-label-show" id="kt-accordion-header-793228" aria-controls="kt-accordion-panel-793228" data-kt-accordion-header-id="0" aria-expanded="false"><div class="kt-blocks-accordion-title-wrap"><div style="display:inline-flex;justify-content:center;align-items:center" class="kt-btn-svg-icon kt-btn-svg-icon-ic_star kt-btn-side-left">

    matze112

    (@matze112)

    Ich hab das Widget auch ganz unten auf der Seite eingefügt (hellblau), so wie es im Content-Bereich aussieht. Da erkennt man sofort die Klasse und kann das Styling prima ändern:

    .kt-accordion-id_14f23c-43 .kt-blocks-accordion-header

    Moderator Bego Mario Garde

    (@pixolin)

    Scheinbar wird dem Button bei jedem Seitenaufruf eine andere ID zugewiesen.

    Du kannst auch die CSS-Klasse ansprechen, nur gilt dann die Farbanpassung für alle Vorkommen dieser CSS-Klasse:

    .kt-blocks-accordion-header {
      color: orange;
      background:aquamarine;
    }
    matze112

    (@matze112)

    Ja so habe ich das bisher auch hinbekommen. Entweder ich ändere alle oder keine.
    Also ist das ein Gutenberg-Fehler und das einzige was ich machen kann ist ein Plugin zu nutzen?

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator Bego Mario Garde

    (@pixolin)

    Du könntest natürlich auch

    .widget-area .kt-blocks-accordion-header {
      color: orange;
      background:aquamarine;
    }

    verwenden, um das auf Akkordions in der Sidebar zu beschränken.

    matze112

    (@matze112)

    Jawoll das funktioniert!! Vielen Dank. Dies gilt dann wahrscheinlich für alle Akkordions in der Sidebar, falls ich noch welche einfügen sollte.

    Noch eine weitere Frage zu Gutenberg. Ich würde gerne einen Block mit z.B. zwei Videos in einen wiederverwendbaren Block umgestalten und diesen auf anderen Seiten einfügen. Das Umgestalten… klappt gut, jedoch werden beim Einfügen auf anderen Seiten anstelle der Videos nur die URLs angezeigt. Wenn ich den eingefügten Block dann wieder in einem „normalen Block§ umwandle, wird alles korrekt dargestellt.
    Hat Gutenberg da auch eine Macke oder..?

    Hast du denn mal geschaut, ob die beiden URLs im Front-End als eingebettete Videos dargestellt werden?

    Hier und da gibt es noch ein paar Kleinigkeiten, die beim neuen Block-Editor nicht perfekt sind. 😉

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 17)