WordPress: Ist es möglich, Post-Type als Teil eines CSS-Selektors im Blockeditor-Stylesheet zu verwenden?

Lesezeit: 6 Minuten

Benutzer-Avatar
Johannes

Ich habe ein WordPress-Theme erstellt und arbeite jetzt an einem Editor-Stylesheet für den Blockeditor, um das Aussehen des Themas im Editor besser widerzuspiegeln. Dazu muss ich in der Lage sein, verschiedene Post-Typen dort anzusprechen.

Für das Frontend gibt es die body_class() in Vorlagen zu verwendende Funktion, die unter anderem eine Klasse einfügt, die den Post-Typ identifiziert und in kombinierten Selektoren verwendet werden kann, um bestimmte Elemente nur in einem bestimmten Post-Typ anzusprechen.

Nun, die Post-Type-Klasse ist im Body-Tag der Seite, auch im Bearbeitungsmodus, aber anscheinend wird das Editor-Stylesheet-CSS auf eine Art “isolierte” Weise angewendet – kombinierte Selektoren, die Klassen enthalten, die im Body-Tag enthalten sind, funktionieren im Editor nicht.

Also suche ich nach etwas Ähnlichem, das im Blockeditor funktionieren würde, damit ich es in kombinierten Selektoren verwenden kann, die nur für bestimmte Elemente in einem bestimmten Post-Typ gelten.

Irgendwelche Ideen, wie man das macht?


Übrigens habe ich auch versucht, den Post-Typ mit Javascript/jQuery zu überprüfen:

wp.domReady(function() {
        var postType = jQuery('form.metabox-base-form input#post_type').attr('value');
        if(postType == 'post'){
            alert("It's a post!");//in real life some other action...
        }
});

Aber obwohl es logisch wäre, zumindest den Alarm auszulösen, den ich dort eingefügt habe, passiert nichts, wenn ich die Bearbeitungsseite eines Beitrags lade, wo dieses Eingabeelement einschließlich seines “post” -Werts eindeutig vorhanden ist. (?)


Ergänzung: Ich habe alles versucht, was mir einfällt, um eine Problemumgehung zu finden, und habe auch dieses Skript ausprobiert, um nur zu sehen, ob ich überhaupt nach Körperklassen suchen kann, wenn ich den Editor verwende:

jQuery(document).ready(function() {
    if(jQuery('body').hasClass('post-type-page')) {
        alert("It's a page!");
    } else {
        alert("It's not a page");
    }
});

Das Ergebnis auf Editorseiten (d. h. die Website Anzeige des WP-Block-Editors): Überhaupt keine Warnung! Warum das??? Blockiert/verhindert der Blockeditor Javascript alle anderen Javascripts?


PS: Ich habe den ersten Teil dieser Frage schon einmal zur StackExchange-WordPress-Entwicklung gepostet, aber überhaupt keine Reaktionen erhalten, also versuche ich es hier …

  • Wenn ich Ihren Javascript-Codeblock im Konsolenfenster von Chrome ausführe, erhalte ich die richtige Warnung "It's a page!" Können Sie Ihren Beitrag bearbeiten, um uns zu zeigen, wie Sie die Skripte und Stile in die Warteschlange stellen, die auf den Bearbeitungsbildschirmen der Admin-Seite angezeigt werden sollen?

    – JobiWon9178

    10. Februar 2020 um 12:04 Uhr

  • @JobiWon9178 Hast du diese Warnung erhalten, als du eine Seite im (Block-)Editor geladen hast? Denn davon rede ich. Die Warnung tut angezeigt, wenn ich die Seite öffne/anschaue, aber nicht, wenn ich die Seite im Editor öffne – in jedem Browser, und dort brauche ich sie (im Bearbeitungsmodus). Übrigens, ich habe dieses Skript ganz unten in meinem abgelegt functions.php Datei, und das CSS, von dem ich spreche, befindet sich in dem Stylesheet, das ich als Editor-Stylesheet für den Blockeditor definiert habe (was ansonsten gut funktioniert).

    – Johannes

    10. Februar 2020 um 12:19 Uhr


  • Ich spreche vom Blockeditor, ja. Möglicherweise müssen Sie das Skript über die hinzufügen admin_enqueue_scripts Hook, da Skripte, die für das Frontend einer Site geladen werden, im Allgemeinen nicht auf der Backend-Administratorseite geladen werden.

    – JobiWon9178

    10. Februar 2020 um 12:26 Uhr


  • Für das, was es wert ist, vielleicht diese Anleitung könnte helfen?

    – JobiWon9178

    10. Februar 2020 um 12:30 Uhr

Benutzer-Avatar
Johannes

Ich habe selbst eine Lösung gefunden (aber mit einem Hinweis von @JobiWon9178 – danke!!!). Nicht reines CSS, aber mit etwas JS/jQuery. Es ist ein Skript ähnlich dem, das ich bereits in der Frage gepostet habe, mit den notwendigen Ergänzungen, um Klassen dynamisch zu relevanten HTML-Elementen hinzuzufügen:

$(document).ready(function() {
    if($('body').hasClass('post-type-page')) {
        $('#editor').addClass('post-type-page');
    } else if($('body').hasClass('post-type-post')) {
        $('#editor').addClass('post-type-post');
    }
});

Dies fügt das Relevante hinzu post-type-xxxx Klasse zum #editor DIV, einer der äußeren Container des Blockeditors. Im Gegensatz zum body Klassen, die Klassen dieses Elements sind relevant für die Editorinhalte und können in kombinierten Selektoren im Editor-Stylesheet verwendet werden.

(Hinweis: Anfangs habe ich versucht, die Klasse dem Wrapper DIV hinzuzufügen, der die Klassen enthält edit-post-visual-editor editor-styles-wrapperaber das würde nicht funktionieren – die Post-Type-Klasse wurde einfach nicht hinzugefügt.)

Ein Beispiel: Die folgende CSS-Regel im Editor-Stylesheet gilt jetzt für alle Absatzblöcke im Editor, aber nur, wenn der Beitragstyp eine Seite ist:

.post-type-page .wp-block-paragraph {
   /* (CSS settings here) */
}

Ein wichtiges Detail, auf das @JobiWon9178 in einem Kommentar hingewiesen hat: Das obige jQuery-Skript muss mit hinzugefügt werden admin_enqueue_scripts , nicht zusammen mit den Skripten für das Frontend. Also habe ich dieses Skript in eine Datei namens admin_scripts.js und das wie folgt in die Warteschlange gestellt functions.php:

function my_admin_scripts($hook) {
    if ( 'post.php' != $hook ) {
        return;
    }
    wp_register_script('adminscripts', get_template_directory_uri() . '/js/admin_scripts.js', '', null, true);
    wp_enqueue_script('adminscripts');
}
add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );

Das ist also meine funktionierende Lösung. Wenn jemand noch eine reine CSS-Lösung findet, würde ich mich sehr freuen, aber ich vermute, dass es im Moment (dh in WordPress 5.3) keine reine CSS-Methode dafür gibt.

Benutzer-Avatar
Bazdin

Ich konnte dies mit reinem CSS tun. Sind Sie sicher, dass Ihr CSS korrekt hinzugefügt wird?

add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
      echo '<style>
              .post-type-page .wp-block-paragraph {
                   font-size: 5rem;
               }
      </style>';
 }

Wenn ich in den Editor gehe, wird dieser Absatztext nur unter einer Seite geändert.

Hier läuft WP 5.3.2.

add_editor_style wird technisch für benutzerdefinierte TinyMCE verwendet.

Die Verwendung von enqueue_block_editor_assets wurde in WP 5.0 hinzugefügt, um Stile und Funktionen zu Blöcken hinzuzufügen.

https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/

Bearbeiten: Nur CSS-Version

function custom_block_editor_styles() {
    wp_enqueue_style( 'legit-editor-styles', get_theme_file_uri( '/css/style-editor.css' ), false, '1.0', 'all' );
}
add_action( 'enqueue_block_editor_assets', 'custom_block_editor_styles' );

  • Das ist interessant: Beim Einfügen von a style Tag verwenden admin_head wie du es getan hast, es funktioniert tatsächlich. Dieselbe CSS-Regel funktioniert jedoch nicht, wenn ich sie in mein Editor-Stylesheet einfüge, was definitiv ist hinzugefügt, da alle anderen CSS-Regeln darin funktionieren. Seltsames Verhalten … Aber mit “reinem CSS” meinte ich wirklich die Verwendung des Editor-Stylesheets, nicht die Verwendung einer PHP-Funktion, um ein Style-Tag dynamisch hinzuzufügen. Trotzdem: Vielen Dank für deine Antwort!

    – Johannes

    10. Februar 2020 um 20:07 Uhr

  • Hmm, wie fügst du das Style-Stylesheet hinzu?

    – Basdin

    10. Februar 2020 um 20:23 Uhr

  • Mit diesen beiden Zeilen in der functions.php: add_theme_support( 'editor-styles' ); add_editor_style( 'gb_editor_styles.css' );

    – Johannes

    10. Februar 2020 um 20:31 Uhr

  • Ich würde tatsächlich zu dieser Verwendung wechseln. add_action( ‘enqueue_block_editor_assets’, ‘legit_block_editor_styles’ ); und fügen Sie Ihr eigenes Stylesheet hinzu. add_editor_style wurde in WP 3.4 für TinyMCE-Editor-Stylesheets hinzugefügt. developer.wordpress.org/reference/functions/add_editor_style

    – Basdin

    10. Februar 2020 um 20:51 Uhr


  • Hmm – Genau hier ist add_editor_style als “offizieller” Weg aufgeführt: developer.wordpress.org/block-editor/developers/themes/… Aber ich werde versuchen, was Sie empfohlen haben – danke!

    – Johannes

    10. Februar 2020 um 21:53 Uhr

1353870cookie-checkWordPress: Ist es möglich, Post-Type als Teil eines CSS-Selektors im Blockeditor-Stylesheet zu verwenden?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy