Support » Allgemeine Fragen » Gutenberg inline style entfernen

  • Gelöst didi110

    (@didi110)


    Hallo, …
    … wie kann ich im Gutenberg Editor den inline Style “ style=“white-space: pre-wrap;““ entfernen oder ggfl. in „normal“ ändern.
    Hintergrund ist das im Editor die Ansicht bei FF nicht korrekt ist. Chrome und Edge stellen die Seite korrekt dar.

    ## Code ##
    <p role=“group“ aria-multiline=“true“ aria-label=“Absatz-Block“ class=“block-editor-rich-text__editable block-editor-block-list__block wp-block is-selected rich-text“ contenteditable=“true“ id=“block-5737dfda-881f-4fd4-952b-6efca800a175″ tabindex=“0″ data-block=“5737dfda-881f-4fd4-952b-6efca800a175″ data-type=“core/paragraph“ data-title=“Absatz“ style=“white-space: pre-wrap;“>Text …</p>

Ansicht von 12 Antworten - 1 bis 12 (von insgesamt 12)
  • Hallo,
    grundsätzlich kannst du allerdings auch rechts über den Code-Editor den HTML-Code bearbeiten:
    code-editor
    Wenn du noch die URL oben einträgst, dann können wir uns das auch ansehen und dir sicher besser helfen.
    Viele Grüße
    Hans-Gerd

    Thread-Starter didi110

    (@didi110)

    Hallo, …
    … bei ein paar Blöcken wäre ja OK … aber ein Kunde von mir, der Buchautor ist, möchte alles in Blocksatz formatieren (was man ja über div. Plugins und/bzw. eigene „Gutenberg.css“ auch hinbekommt)

    Das Problem ist das eben das FF den Blocksatz nicht korrekt darstellt solange style=“white-space: pre-wrap;“ drin steht …

    Auf der Webseite selbst wird alles korrekt dargestellt (style=“white-space: pre-wrap;“ ist dann auch nicht mehr im Quelltext), bloß im Editor nicht!!!

    Ich würde gerne ein paar Screenshots hochladen, dann wird das Problem deutlich sichtbar – geht das wenn ja wie? (bin ja noch neu hier 😉

    Beste Grüße
    Dietmar

    Hallo,

    Kunde von mir, der Buchautor ist, möchte alles in Blocksatz formatieren

    bei Print-Produkten ist das ja üblich, aber auf Webseiten? Hinsichtlich Barrierefreiheit ein Problem, siehe z. B. hier.
    Bilder einfügen – siehe FAQ: Wie kann man hier Bilder in einen Forenbeitrag einfügen?.
    Viele Grüße
    Hans-Gerd

    Thread-Starter didi110

    (@didi110)

    .. über das für und wieder von Blocksatz brauchen wir nicht zu diskutieren (das sollte jedem selbst überlassen sein ob er es verwenden möchte oder nicht)

    Im Bild wird ersichtlich das im Editor selber der inline Style raus muss oder abgeändert werden sollte damit bei allen Browsern das gleiche zu sehen ist …

    Der „Code Editor“ in diesem Fall nicht!

    Thread-Starter didi110

    (@didi110)

    … nochmal als Link damit alles zu erkennen ist 😉

    … über das für und wieder von Blocksatz brauchen wir nicht zu diskutieren (das sollte jedem selbst überlassen sein ob er es verwenden möchte oder nicht)

    Du kannst WordPress nutzen wie du magst und auch Blocksatz verwenden wo und wie du möchtest. Wenn du aber um Hilfe bittest, ist der Hinweis angebracht, dass Blocksatz im Webdesign hinderlich ist. Webseiten sollen heute auf jeder Display-Größe funktionieren und damit kannst du im Gegensatz zum Printdesign keinen Satzspiegel vorgeben und auch keine Zeilenlänge festlegen. Im Ergebnis bildet Blocksatz sehr unschöne, erzwungene Leerräume, die für das Lesen und das Verständnis des Texts zumindest hinderlich sind.

    Statt Screenshots mit ausschnittsweise HTML und CSS des Block-Editors wäre mir ein Blick in die Webseite lieber. Leider hast du keine URL zu einer Beispielseite angegeben, was es dann schwieriger macht zu helfen.

    Grundsätzlich ist es schwer, Inline-Style zu überschreiben. Oft bleibt dann nur das Hilfsmittel, CSS-Regel mit !important durchzusetzen. Aner sowas würde ich mir auch lieber erst einmal an einer Webseite anschauen.

    Thread-Starter didi110

    (@didi110)

    Wie schon gesagt: auf der Webseite selbst ist alles so wie es sein soll.
    Dort gibt es keinen inline Style!!!
    http://nostalgieradioweltweit.de/

    Das Problem liegt im Editor (deshalb auch von diesem die Screenshots)
    und inline Style mit !important zu „Überschreiben“ wird nicht funktionieren …

    Gruß
    Dietmar

    Hallo,
    vielleicht hilft dir der folgende Beitrag. Hier wird beschrieben, wie man eigene CSS-Styles bzw. Stylesheets im WordPress-Admin-Bereich verwenden kann.
    Ich kann mich daran erinnern, dass ich vor kurzer Zeit noch einen aktuelleren Beitrag gelesen habe, ich habe den Beitrag allerdings leider nicht mehr gefunden.
    Viele Grüße
    Hans-Gerd

    Thread-Starter didi110

    (@didi110)

    … hilft leider auch nicht weiter, hab auch schon alle (mir bekannten und gegoogelten) möglichkeiten über die functions.php ausprobiert – leider ohne Erfolg 🙁

    … hab auch schon sämtliche PHP, JS, .. Dateien durchforstet wo der Code generiert werden könnte … auch kein Erfolg 🙁

    Vielleicht kennt ja jemand eine möglichkeit und postet diese hier …

    Gruß & Schönes WE
    Dietmar

    Wenn du das Folgende in die functions.php des Child-Themes einfügst, sollte es das gewünschte Ergebnis bringen:

    /*-----------------------------------------------------------------------------------*/
    /** Remove pre-wrap from paragraph */
    /*-----------------------------------------------------------------------------------*/
    
    add_action('admin_head', 'remove_pre_wrap');
    
    function remove_pre_wrap() {
      echo '<style>
    	p {
    		white-space: normal !important;
    	}
    	
      </style>';
    }
    Thread-Starter didi110

    (@didi110)

    SUPER und vielen Dank – es funktioniert 🙂

    Beste Grüße
    Dietmar

    Gerne 🙂

Ansicht von 12 Antworten - 1 bis 12 (von insgesamt 12)
  • Das Thema „Gutenberg inline style entfernen“ ist für neue Antworten geschlossen.