Utilizzo di un sistema di progettazione con l'editor di blocchi di WordPress Parte 2: tipi e stili di blocco

Nella parte 1 della nostra serie di blog in due parti, abbiamo spiegato come configurare i sistemi di progettazione in theme.json. Sulla base di questo, ora possiamo utilizzare controlli aggiuntivi tramite codice per rimuovere blocchi e stili predefiniti indesiderati.

Ad esempio, gli sviluppatori di un sito WordPress che utilizzano un sistema di progettazione potrebbero voler rimuovere il blocco audio o il blocco tag cloud dall'editor se non verranno utilizzati per garantire la coerenza evitando inutili lavori di progettazione. Altri stili di blocco incorporati inutilizzati possono anche essere regolati o eliminati per creare un insieme coerente di opzioni di progettazione nell'editor. La limitazione di blocchi e stili può anche ridurre il sovraccarico per la creazione di nuovi post nell'editor di blocchi fornendo un insieme più piccolo di opzioni di progettazione.

In questo post tratteremo le strategie che possono essere utilizzate dal plugin e dal codice del tema per integrare un sistema di progettazione con l'editor a blocchi.

Rimozione dei tipi di blocco

L'editor di blocchi di WordPress include un numero enorme di blocchi integrati. Può essere utile rimuovere alcuni blocchi predefiniti per ridurre il lavoro di progettazione e semplificare la creazione di contenuti. Questo può essere realizzato nel client con JavaScript o utilizzando PHP lato server.

1. Per iniziare, identifica il blocco o i blocchi da rimuovere dall'editor. In questo esempio, il blocco "Ultimi commenti" verrà annullato:

2. Quindi, trova il nome del blocco corrispondente nella guida di riferimento ai blocchi principali di Gutenberg. Per il blocco "Latest Comments", questo è core/latest-comments:

3. Usando il nome core/latest-comments, possiamo rimuoverlo dall'editor.

In JavaScript, usa wp.blocks.unregisterBlockType:

 wp.domReady( function() { wp.blocks.unregisterBlockType( 'core/latest-comments' ); } );

JavaScript per l'editor di blocchi dovrebbe essere accodato usando l'hook enqueue_block_editor_assets in PHP:

 function wpvip_enqueue_block_js() { wp_enqueue_script( 'wpvip-block-js', plugin_dir_url( __FILE__ ) . 'js/block.js', array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ), '0.0.1', ); } add_action( 'enqueue_block_editor_assets', 'wpvip_enqueue_block_js' );

Una configurazione più complessa può essere utilizzata per creare e gestire automaticamente le dipendenze dei blocchi con il pacchetto @wordpress/scripts.

Nota: sebbene questo post si concentri principalmente sull'interazione con i blocchi tramite l'API JavaScript, le best practice per l'utilizzo di PHP lato server rispetto a JavaScript client per i blocchi cambiano a seconda dell'utilizzo:

• Quando modifichi un blocco integrato, utilizza le API JavaScript.
• Quando modifichi un blocco di terze parti, utilizza le API JavaScript.
• Quando crei un blocco personalizzato, usa register_block_type con block.json in PHP. Ciò consentirà sia al codice lato server che a quello client di interagire con il tuo blocco.

Si consiglia di utilizzare JavaScript per interagire con i blocchi, poiché ciò consente la modifica dei blocchi registrati sia lato client che lato server. Inoltre, alcune API di blocco sono disponibili solo in JavaScript.

Annullare la registrazione dei blocchi core è anche possibile utilizzando in PHP con il filtro enabled_block_types_all:

 add_filter( 'allowed_block_types_all', 'wpvip_unregister_blocks' ); function wpvip_unregister_blocks( $allowed_block_types ) { return array_filter( $allowed_block_types, function( $block_type ) { // Remove 'core/latest-comments' from allowed blocks return $block_type !== 'core/latest-comments'; } ); }

Si noti che il filtro enabled_block_types_all in PHP può anche essere utilizzato per fornire un elenco esplicito di blocchi consentiti, escludendo tutti gli altri dall'utilizzo nell'editor:

 add_filter( 'allowed_block_types_all', 'wpvip_unregister_blocks' ); function wpvip_unregister_blocks( $allowed_block_types ) { return [ 'core/paragraph', 'core/heading', 'core/group', /* ... other blocks to allow */ ]; }

Nota: prestare attenzione a questo approccio, poiché questo elenco dovrà essere mantenuto e aggiornato con i blocchi core o personalizzati desiderati. Come accennato in precedenza, questo approccio può essere utilizzato solo per limitare i blocchi registrati lato server (ad esempio, utilizzando block.json). I blocchi personalizzati lato client devono essere gestiti solo in JavaScript utilizzando wp.blocks.unregisterBlockType.

Sostituzione degli stili di blocco incorporati

Diversi blocchi principali in WordPress includono stili di blocco preimpostati situati nella barra degli strumenti contestuale e controlli dell'ispettore sul lato destro dell'editor:

In JavaScript, usa wp.blocks.unregisterBlockStyle con wp.blocks.registerBlockStyle per sostituire gli stili predefiniti:

 wp.domReady( function() { wp.blocks.unregisterBlockStyle( 'core/button', 'fill' ); wp.blocks.unregisterBlockStyle( 'core/button', 'outline' ); wp.blocks.registerBlockStyle( 'core/button', { name: 'primary', label: 'Primary', isDefault: true, } ); wp.blocks.registerBlockStyle( 'core/button', { name: 'secondary', label: 'Secondary', } ); } );

Il codice precedente rimuoverà gli stili dei pulsanti "Riempi" e "Contorno" incorporati e aggiungerà un nuovo stile "Primario" (predefinito) e uno stile "Secondario":

Ai nuovi pulsanti verrà assegnato automaticamente lo stile "Primario". Lo stile "Primary" applica la classe `.is-style-primary` al contenitore del pulsante e "Secondary" applica `.is-style-secondary.` Questi stili possono quindi essere implementati nei CSS. Questo articolo di WordPress contiene ulteriori informazioni sulla creazione di stili di blocco.

È disponibile una funzione PHP per annullare la registrazione degli stili di blocco in unregister_block_style, ma non è consigliabile. Molti stili di blocco, inclusi i blocchi principali, sono registrati in JavaScript lato client, quindi non è possibile rimuovere questi stili utilizzando PHP. Come accennato in precedenza in "Rimozione dei tipi di blocco", preferiamo JavaScript lato client per gestire i blocchi esistenti per coerenza.

Rimozione delle variazioni di blocco

Le variazioni sono preimpostazioni delle impostazioni del blocco che possono essere raggruppate per configurare rapidamente un blocco. Questi sono rari, ma alcuni blocchi principali includono variazioni indesiderate. Ad esempio, il blocco colonne integrato include diverse scelte di layout:

Potrebbe essere desiderabile rimuovere i preset di variazione. Per questo esempio, rimuoveremo la variazione "25 / 50 / 25". In JavaScript, le varianti possono essere rimosse tramite wp.blocks.unregisterBlockVariation:

 wp.domReady( function() { wp.blocks.unregisterBlockVariation( 'core/columns', 'three-columns-wider-center' ); } );

"Tre colonne più larghe al centro" è il nome della variante che corrisponde al layout "25/50/25". Questo può essere trovato cercando il file variants.js del blocco principale e la proprietà "name" che corrisponde alla variazione indesiderata. Ciò comporterà la limitazione delle variazioni di blocco disponibili:

Insomma

Tra la personalizzazione di theme.json e le API fornite in questo post, è possibile combinare l'ampio ecosistema dell'editor di blocchi di WordPress con un sistema di progettazione e ridurlo a una dimensione gestibile.

Dai un'occhiata ai nostri post correlati su come gestiamo i sistemi di progettazione su WordPress VIP:

• Parte 1: organizzare un sistema di progettazione con Gutenberg – theme.json
• Esportazione dei token del sistema di progettazione da Figma a WordPress

Autori

Alec Geatches, sviluppatore software senior presso Automattic

Sviluppatore di WordPress aziendale e appassionato di sistemi di progettazione che vive a Taipei, Taiwan.

Gopal Krishnan, sviluppatore software senior presso Automattic

Gopal lavora sull'offerta WordPress disaccoppiata di WordPress VIP, con un interesse per i sistemi di progettazione e Gutenberg. Ha sede a Sydney, in Australia e si è recentemente trasferito dal Canada.