État de base dans un bloc WordPress

Ce didacticiel montre la création d'un bloc WordPress qui intègre le composant Web de base, affichant la disponibilité des fonctionnalités de la plate-forme Web. L'auteur, Geoff Graham, détaille le processus, mettant en évidence les étapes clés et les défis rencontrés.

Le concept de base exploite les blocs WordPress pour rendre le composant Web réutilisable <baseline-status></baseline-status> facilement reproductible dans l'éditeur WordPress. Cela évite d'intégrer directement la composante HTML, offrant une meilleure réutilisabilité et gestion. Une approche similaire existe pour Hugo et Astro.

Configuration du projet:

Le projet utilise le package @wordpress/create-block pour l'initialisation. L'enregistrement du plugin se produit dans baseline-status.php, qui enregistre le type de bloc. Ce fichier gère également la condition de condition de façon conditionnelle de JavaScript (baseline-status.min.js), garantissant que le composant n'est chargé que lorsque cela est nécessaire. Une fonction cruciale, csstricks_add_type_attribute, modifie la balise de script pour autoriser l'importation du module ES.

// ... (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
  );
}
// ...

Marquage frontal et back-end:

Le rendu frontal (render.php) utilise le composant <baseline-status></baseline-status>, en insérant dynamiquement l'attribut featureId:

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

La vue arrière (edit.js) utilise la fonction useBlockProps pour le débogage et le rendu au sein de l'éditeur WordPress. Le fichier block.json définit les attributs du bloc, y compris featureID.

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

Paramètres de blocs:

Le fichier edit.js intègre InspectorControls, PanelBody, et TextControl depuis @wordpress/components pour créer un panneau de paramètres dans l'éditeur. Cela permet aux utilisateurs de spécifier directement le featureID.

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

Styling:

Le style du composant implique de comprendre Shadow Dom. L'auteur utilise les variables CSS et la sélection directe de l'élément <baseline-status></baseline-status> pour appliquer des styles. L'approche relève des défis dans le style des éléments de l'ombre DOM.

Disponibilité du plugin et améliorations futures:

Le plugin est disponible sur le répertoire du plugin WordPress. Les améliorations futures incluent les mises à jour en direct, les variations (options de taille) et une bascule pour la visibilité de la tête.

L'article fournit un guide complet pour construire un bloc WordPress qui intègre un composant Web tiers, offrant des informations précieuses sur le développement de blocs WordPress et le style de Dom Shadow.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!