Baseline Status in a WordPress Block

This tutorial demonstrates creating a WordPress block that integrates the Baseline web component, displaying web platform feature availability. The author, Geoff Graham, details the process, highlighting key steps and challenges encountered.

The core concept leverages WordPress blocks to make the reusable <baseline-status></baseline-status> web component easily repeatable within the WordPress editor. This avoids directly embedding the HTML component, offering better reusability and management. A similar approach exists for Hugo and Astro.

Project Setup:

The project uses the @wordpress/create-block package for initialization. The plugin registration occurs in baseline-status.php, which registers the block type. This file also handles enqueuing the necessary JavaScript (baseline-status.min.js) conditionally, ensuring the component is only loaded when needed. A crucial function, csstricks_add_type_attribute, modifies the script tag to allow ES module import.

// ... (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 and Back-end Markup:

The front-end rendering (render.php) uses the <baseline-status></baseline-status> component, dynamically inserting the featureId attribute:

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

The back-end view (edit.js) uses the useBlockProps function for debugging and rendering within the WordPress editor. The block.json file defines the block's attributes, including featureID.

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

Block Settings:

The edit.js file incorporates InspectorControls, PanelBody, and TextControl from @wordpress/components to create a settings panel within the editor. This allows users to specify the featureID directly.

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

Styling:

Styling the component involves understanding Shadow DOM. The author utilizes CSS variables and direct selection of the <baseline-status></baseline-status> element to apply styles. The approach addresses challenges in styling Shadow DOM elements.

Plugin Availability and Future Improvements:

The plugin is available on the WordPress Plugin Directory. Future improvements include live updates, variations (size options), and a toggle for the heading's visibility.

The article provides a comprehensive guide to building a WordPress block that integrates a third-party web component, offering valuable insights into WordPress block development and Shadow DOM styling.

The above is the detailed content of Baseline Status in a WordPress Block. For more information, please follow other related articles on the PHP Chinese website!