ACF WYSIWYG-Editor kompakter machen und Höhe manuell ändern

ACF-WYSIWYG-Felder sind im WordPress-Backend standardmäßig relativ hoch.
Das wird schnell unübersichtlich, wenn eine Bearbeitungsseite mehrere
WYSIWYG-Felder enthält, in denen jeweils nur wenige Zeilen Text stehen.

Mit dem folgenden Snippet werden ACF-WYSIWYG-Editoren deutlich kompakter
dargestellt. Über den Griff rechts unten können sie bei Bedarf weiterhin
mit der Maus vergrößert werden.

Der normale WordPress Classic Editor bleibt dabei unverändert.

Code

<?php

/**
 * ACF-WYSIWYG-Editoren kompakter darstellen
 * und manuell vergrößerbar machen.
 *
 * Classic Editor bleibt unverändert.
 */
add_filter('tiny_mce_before_init', function ($settings, $editor_id) {

    // Nur ACF-WYSIWYG-Editoren
    if (strpos($editor_id, 'acf') !== 0) {
        return $settings;
    }

    // Kompaktere Ausgangshöhe
    $settings['height'] = 100;

    // Resize-Griff rechts unten aktivieren
    $settings['resize'] = true;

    return $settings;

}, 10, 2);


/**
 * ACF setzt für WYSIWYG-Editoren selbst min-height: 200px.
 * Diese Mindesthöhe reduzieren.
 */
add_action('acf/input/admin_head', function () {
    ?>

    <style>
        .acf-field-wysiwyg .acf-editor-wrap iframe {
            min-height: 100px !important;
        }
    </style>

    <?php
});

Ergebnis

• ACF-WYSIWYG-Felder werden deutlich kompakter dargestellt.
• Die Editoren können über den Griff rechts unten manuell vergrößert werden.
• Alle ACF-WYSIWYG-Felder werden automatisch erfasst.
• Der normale WordPress Classic Editor bleibt unverändert.
• Die Lösung ist nicht an einen bestimmten CPT oder eine bestimmte Feldgruppe gebunden.

Wichtig: 100 Pixel sind nicht die tatsächliche Editorhöhe

Die Werte height = 100 und min-height: 100px
bedeuten nicht, dass das fertige Editor-iframe anschließend exakt
100 Pixel hoch ist.

TinyMCE berechnet beim Initialisieren selbst eine endgültige Höhe.
Im getesteten Fall hatte das iframe trotz der Einstellung von 100 Pixeln
anschließend beispielsweise eine tatsächliche Höhe von 184 Pixeln.

Die Einstellungen dienen deshalb in erster Linie dazu, die standardmäßig
sehr hohen ACF-Editoren deutlich kompakter zu machen. Für eine exakt
definierte Endhöhe wäre eine zusätzliche Anpassung nach der
TinyMCE-Initialisierung notwendig.

Warum sind zwei Anpassungen notwendig?

ACF-WYSIWYG-Felder verwenden TinyMCE. Über
tiny_mce_before_init bekommt TinyMCE eine kompaktere
Ausgangshöhe und das manuelle Vergrößern wird aktiviert.

ACF setzt zusätzlich selbst eine Mindesthöhe für das Editor-iframe:

.acf-editor-wrap iframe {
    min-height: 200px;
}

Diese ACF-Vorgabe verhindert, dass kleinere TinyMCE-Einstellungen
vollständig greifen. Deshalb wird die Mindesthöhe zusätzlich reduziert:

.acf-field-wysiwyg .acf-editor-wrap iframe {
    min-height: 100px !important;
}

Warum wird nach acf geprüft?

ACF verwendet für seine TinyMCE-Instanzen unterschiedliche Editor-IDs.
Auf einer Bearbeitungsseite können diese beispielsweise so aussehen:

acf_content
acf-editor-47
acf-editor-48
acf-editor-49

Der normale WordPress Classic Editor verwendet dagegen beispielsweise:

content

Deshalb wird geprüft, ob die Editor-ID mit acf beginnt:

if (strpos($editor_id, 'acf') !== 0) {
    return $settings;
}

So werden nur die ACF-WYSIWYG-Editoren verändert. Der normale
Classic Editor bleibt unangetastet.

Hinweis

Die Lösung ist bewusst pragmatisch: Sie soll ACF-lastige
Bearbeitungsseiten kompakter und übersichtlicher machen, ohne die
Bedienbarkeit der WYSIWYG-Felder einzuschränken.

Eine pixelgenau definierte Editorhöhe ist dafür nicht notwendig.
Wenn mehr Platz benötigt wird, kann der jeweilige Editor einfach
über den Resize-Griff größer gezogen werden.