Dekorative Bilder im WordPress-Bildblock kennzeichnen
Bilder können Inhalte erklären oder eine Seite gestalterisch begleiten. Eine zusätzliche Option im WordPress-Bildblock unterscheidet beide Fälle direkt bei der redaktionellen Pflege und unterstützt eine zugängliche Ausgabe auf der Website.
Der WordPress-Editor stellt für viele Aufgaben bereits passende Core-Blöcke bereit. Zusätzliche Einstellungen erweitern sie für wiederkehrende Redaktionsaufgaben und halten die Funktion an der Stelle, an der sie verwendet wird.
Dieses Beispiel ergänzt den Bildblock um die Option «Bild ist dekorativ». Sie kennzeichnet Bilder, die eine Gestaltung begleiten. Im Frontend erhält das Bild einen leeren Alternativtext und die Rolle presentation. Screenreader können es dadurch als dekoratives Element einordnen, während informative Bilder weiterhin ihren beschreibenden Alternativtext verwenden.
Option am Bildblock speichern
Die Einstellung wird als eigenes Block-Attribut registriert. WordPress speichert den Wert zusammen mit dem Bildblock im Beitrag und stellt ihn im Editor bereit.
add_filter( 'register_block_type_args', function( $args, $block_type ) {
if ( 'core/image' !== $block_type ) {
return $args;
}
if ( ! isset( $args['attributes'] ) ) {
$args['attributes'] = [];
}
$args['attributes']['isDecorative'] = [
'type' => 'boolean',
'default' => false,
];
return $args;
}, 10, 2 );Das Attribut isDecorative ergänzt ausschliesslich den Core-Bildblock. Der gespeicherte Wert steht damit sowohl der Bearbeitungsoberfläche als auch der Ausgabe im Frontend zur Verfügung.
Auswahl in der Seitenleiste anbieten
Das Editor-Skript ergänzt beim ausgewählten Bildblock ein Panel für die Zugänglichkeit. Der Schalter speichert das neue Attribut und setzt für dekorative Bilder einen leeren Alternativtext. Die verwendeten Komponenten stammen aus den WordPress-Paketen und fügen sich in die vorhandene Editor-Oberfläche ein.
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ToggleControl } from '@wordpress/components';
import { createHigherOrderComponent } from '@wordpress/compose';
import { addFilter } from '@wordpress/hooks';
const withDecorativeImageControl = createHigherOrderComponent(
( BlockEdit ) => ( props ) => {
if ( 'core/image' !== props.name ) {
return <BlockEdit { ...props } />;
}
const { alt, isDecorative } = props.attributes;
return (
<>
<BlockEdit { ...props } />
{ props.isSelected && (
<InspectorControls>
<PanelBody title="Zugänglichkeit">
<ToggleControl
label="Bild ist dekorativ"
checked={ isDecorative }
onChange={ ( checked ) => props.setAttributes( {
isDecorative: checked,
alt: checked ? '' : alt,
} ) }
/>
</PanelBody>
</InspectorControls>
) }
</>
);
},
'withDecorativeImageControl'
);
addFilter(
'editor.BlockEdit',
'ud-decorative-images/controls',
withDecorativeImageControl
);Die Redaktion trifft die Entscheidung direkt beim Bild. Dadurch bleibt erkennbar, welche Bilder Inhalte vermitteln und welche den Aufbau einer Seite gestalterisch unterstützen.
Ausgabe im Frontend ergänzen
Das gespeicherte Attribut beschreibt die redaktionelle Einordnung. Der Filter render_block_core/image überträgt diese Information beim Rendern in das HTML des Bildblocks. Die WordPress HTML API setzt am img-Element den leeren Alternativtext und role="presentation".
add_filter( 'render_block_core/image', function( $block_content, $block ) {
if ( empty( $block['attrs']['isDecorative'] ) ) {
return $block_content;
}
$processor = new WP_HTML_Tag_Processor( $block_content );
if ( $processor->next_tag( 'img' ) ) {
$processor->set_attribute( 'alt', '' );
$processor->set_attribute( 'role', 'presentation' );
}
return $processor->get_updated_html();
}, 10, 2 );Der Bildblock bleibt damit der vertraute Ort für Bildauswahl, Alternativtext und weitere Einstellungen. Die zusätzliche Option ergänzt die vorhandene Pflege um eine eindeutig benannte Funktion für dekorative Bilder.
Ergebnis
Bildinhalte und Gestaltung direkt im Bildblock einordnen
Die Erweiterung verbindet die redaktionelle Auswahl im WordPress-Editor mit einer zugänglichen Ausgabe im Frontend. Bilder erhalten dadurch die Einordnung, die ihrer Funktion innerhalb des Inhalts entspricht.
Dekorative Bilder kennzeichnen
Der Bildblock erhält eine verständliche Option für Bilder, die eine Seite gestalterisch begleiten.
Auswahl im Beitrag speichern
Das Block-Attribut hält die redaktionelle Einordnung direkt beim jeweiligen Bild fest.
Zugängliche Ausgabe ergänzen
Leerer Alternativtext und Präsentationsrolle kennzeichnen dekorative Bilder im Frontend.