Basisstatus in einem WordPress -Block

Dieses Tutorial zeigt das Erstellen eines WordPress -Blocks, der die Basis -Webkomponente integriert und die Verfügbarkeit von Webplattform -Funktionen anzeigt. Der Autor Geoff Graham beschreibt den Prozess und hebt wichtige Schritte und Herausforderungen hervor.

Das Kernkonzept nutzt WordPress -Blöcke, um die wiederverwendbare <baseline-status></baseline-status> Webkomponente im WordPress -Editor leicht wiederholbar zu machen. Dies vermeidet die direkte Einbettung der HTML -Komponente und bietet eine bessere Wiederverwendbarkeit und das Management. Ein ähnlicher Ansatz gibt es für Hugo und Astro.

Projekt -Setup:

Das Projekt verwendet das @wordpress/create-block -Paket zur Initialisierung. Die Plugin -Registrierung erfolgt in baseline-status.php, wodurch der Blocktyp registriert wird. Diese Datei behandelt auch die erforderliche JavaScript (baseline-status.min.js) bedingt, um sicherzustellen, dass die Komponente nur bei Bedarf geladen wird. Eine entscheidende Funktion, csstricks_add_type_attribute, modifiziert das Skript -Tag, um dem Import des ES -Moduls zu ermöglichen.

// ... (baseline-status.php excerpt) ...
function csstricks_enqueue_block_assets() {
  wp_enqueue_script(
    'baseline-status-widget-script',
    'https://cdn.jsdelivr.net/npm/[email protected]/baseline-status.min.js',
    array(),
    '1.0.4',
    true
  );
}
// ...

Front-End- und Back-End-Markup:

Das Front-End-Rendering (render.php) verwendet die <baseline-status></baseline-status> -Komponente, wodurch das Attribut featureId dynamisch eingefügt wird:

// ... (render.php excerpt) ...
<baseline-status featureid="<?php echo esc_html( $featureID ); ?>"></baseline-status>

Die Back-End-Ansicht (edit.js) verwendet die useBlockProps -Funktion zum Debuggen und Rendern im WordPress-Editor. Die block.json Datei definiert die Attribute des Blocks, einschließlich featureID.

// ... (block.json excerpt) ...
"attributes": {
  "featureID": {
    "type": "string"
  }
},

Blockeinstellungen:

Die Datei edit.js enthält InspectorControls, PanelBody und TextControl von @wordpress/components zum Erstellen eines Einstellungsbereichs innerhalb des Editors. Auf diese Weise können Benutzer die featureID direkt angeben.

// ... (edit.js excerpt) ...
<textcontrol label="Feature ID" value="{" featureid onchange="{"> setAttributes( { featureID: value } ) }
/></textcontrol>

Styling:

Styling Die Komponente beinhaltet das Verständnis von Shadow DOM. Der Autor verwendet CSS -Variablen und direkte Auswahl des <baseline-status></baseline-status> -Elements, um Stile anzuwenden. Der Ansatz befasst sich mit Herausforderungen beim Styling von Schattendom -Elementen.

Plugin Verfügbarkeit und zukünftige Verbesserungen:

Das Plugin ist im WordPress -Plugin -Verzeichnis erhältlich. Zukünftige Verbesserungen umfassen Live -Updates, Variationen (Größenoptionen) und ein Umschalter für die Sichtbarkeit der Überschriften.

Der Artikel bietet einen umfassenden Leitfaden zum Erstellen eines WordPress-Blocks, der eine Webkomponente von Drittanbietern integriert und wertvolle Einblicke in die WordPress-Blockentwicklung und das Schattendom-Styling bietet.

Das obige ist der detaillierte Inhalt vonBasisstatus in einem WordPress -Block. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!