Chapitre 8.9 — Tutoriel : le bloc « Livre à la une »

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "wpr/livre-une",
  "title": "Livre à la une",
  "category": "widgets",
  "icon": "book",
  "textdomain": "wpr-books",
  "attributes": {
    "livreId":     { "type": "number" },
    "afficherPrix":{ "type": "boolean", "default": true }
  },
  "supports": {
    "html": false,
    "align": ["wide"],
    "color": { "background": true, "text": true },
    "spacing": { "padding": true }
  },
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "render": "file:./render.php"
}

import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ComboboxControl, ToggleControl, Spinner, Placeholder } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { __ } from '@wordpress/i18n';
 
export default function Edit( { attributes, setAttributes } ) {
    const { livreId, afficherPrix } = attributes;
    const blockProps = useBlockProps();
 
    // Charger la liste des livres (résolution auto → REST /wp/v2/livre)
    const { livres, chargement } = useSelect( ( select ) => {
        const query = { per_page: 50, _fields: 'id,title' };
        return {
            livres: select( coreStore ).getEntityRecords( 'postType', 'livre', query ),
            chargement: select( coreStore ).isResolving( 'getEntityRecords', [ 'postType', 'livre', query ] ),
        };
    }, [] );
 
    // Charger le livre sélectionné (titre + meta)
    const livre = useSelect(
        ( select ) => livreId ? select( coreStore ).getEntityRecord( 'postType', 'livre', livreId ) : null,
        [ livreId ]
    );
 
    const options = ( livres || [] ).map( ( l ) => ( {
        value: l.id,
        label: l.title.rendered || `#${ l.id }`,
    } ) );
 
    return (
        <>
            <InspectorControls>
                <PanelBody title={ __( 'Réglages', 'wpr-books' ) }>
                    <ComboboxControl
                        label={ __( 'Livre', 'wpr-books' ) }
                        value={ livreId }
                        options={ options }
                        onChange={ ( id ) => setAttributes( { livreId: id ? Number( id ) : undefined } ) }
                    />
                    <ToggleControl
                        label={ __( 'Afficher le prix', 'wpr-books' ) }
                        checked={ afficherPrix }
                        onChange={ ( v ) => setAttributes( { afficherPrix: v } ) }
                    />
                </PanelBody>
            </InspectorControls>
 
            <div { ...blockProps }>
                { chargement && ! livres && <Spinner /> }
                { ! livreId && (
                    <Placeholder icon="book" label={ __( 'Livre à la une', 'wpr-books' ) }
                        instructions={ __( 'Choisissez un livre dans les réglages.', 'wpr-books' ) } />
                ) }
                { livreId && ! livre && <Spinner /> }
                { livre && (
                    <div className="wpr-livre-une__apercu">
                        <strong>{ livre.title?.rendered }</strong>
                        { afficherPrix && livre.meta?.wpr_prix
                            ? <span> — { livre.meta.wpr_prix } €</span> : null }
                    </div>
                ) }
            </div>
        </>
    );
}

export default function save() {
    return null; // rendu par render.php
}

<?php
// $attributes, $content, $block disponibles
$livre_id = isset( $attributes['livreId'] ) ? absint( $attributes['livreId'] ) : 0;
if ( ! $livre_id || get_post_type( $livre_id ) !== 'livre' ) {
    return; // rien à afficher
}
$titre = get_the_title( $livre_id );
$url   = get_permalink( $livre_id );
$prix  = get_post_meta( $livre_id, 'wpr_prix', true );
$img   = get_the_post_thumbnail( $livre_id, 'medium' );
 
$wrapper = get_block_wrapper_attributes( array( 'class' => 'wpr-livre-une' ) );
?>
<div <?php echo $wrapper; ?>>
    <a href="<?php echo esc_url( $url ); ?>" class="wpr-livre-une__lien">
        <?php echo $img; // HTML d'image généré par le cœur (déjà sûr) ?>
        <span class="wpr-livre-une__titre"><?php echo esc_html( $titre ); ?></span>
    </a>
    <?php if ( ! empty( $attributes['afficherPrix'] ) && $prix ) : ?>
        <span class="wpr-livre-une__prix">
            <?php echo esc_html( number_format_i18n( (float) $prix, 2 ) ); ?> €
        </span>
    <?php endif; ?>
</div>

add_action( 'init', function () {
    register_block_type( WPR_BOOKS_PATH . 'build/livre-une' ); // dossier de build du bloc
} );