Utilizarea unui sistem de design cu Editorul de blocuri WordPress Pt 2: Tipuri și stiluri de bloc

În partea 1 a seriei noastre de bloguri în două părți, am abordat cum să configurați sistemele de proiectare în theme.json. Pe baza acestui lucru, acum putem utiliza controale suplimentare prin cod pentru a elimina blocurile și stilurile implicite nedorite.

De exemplu, dezvoltatorii unui site WordPress care utilizează un sistem de design ar putea dori să elimine blocul audio sau blocul norului de etichete din editor dacă acestea nu vor fi folosite pentru a asigura coerența evitând în același timp lucrările de proiectare inutile. Alte stiluri de bloc încorporate neutilizate pot fi, de asemenea, ajustate sau eliminate pentru a construi un set coerent de opțiuni de design în editor. Limitarea blocurilor și a stilurilor poate reduce, de asemenea, cheltuielile generale pentru crearea de noi postări în editorul de blocuri, oferind un set mai mic de opțiuni de design.

În această postare, vom acoperi strategiile care pot fi folosite de plugin și codul tematic pentru a integra un sistem de design cu editorul de blocuri.

Eliminarea tipurilor de blocuri

Editorul de blocuri WordPress include un număr mare de blocuri încorporate. Poate fi util să eliminați unele blocuri implicite pentru a reduce munca de proiectare și pentru a simplifica crearea de conținut. Acest lucru poate fi realizat în client cu JavaScript sau utilizând PHP pe partea serverului.

1. Pentru a începe, identificați blocul sau blocurile de eliminat din editor. În acest exemplu, blocul „Ultimele comentarii” va fi neînregistrat:

2. Apoi, găsiți numele blocului corespunzător în ghidul de referință pentru blocurile de bază Gutenberg. Pentru blocul „Ultimele comentarii”, acesta este de bază/ultimele-comentari:

3. Folosind numele de bază/latest-comments, îl putem elimina din editor.

În JavaScript, utilizați wp.blocks.unregisterBlockType:

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

JavaScript pentru editorul de blocuri ar trebui pus în coadă utilizând cârligul enqueue_block_editor_assets în 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' );

O configurare mai complexă poate fi utilizată pentru a construi și gestiona automat dependențele de bloc cu pachetul @wordpress/scripts.

Notă: În timp ce această postare se concentrează în primul rând pe interacțiunea cu blocurile prin intermediul API-ului JavaScript, cele mai bune practici pentru utilizarea PHP de pe partea serverului vs. JavaScript client pentru blocuri se modifică în funcție de utilizarea dvs.:

• Când modificați un bloc încorporat, utilizați API-urile JavaScript.
• Când modificați un bloc terță parte, utilizați API-urile JavaScript.
• Când creați un bloc personalizat, utilizați register_block_type cu block.json în PHP. Acest lucru va permite atât codul serverului, cât și codul clientului să interacționeze cu blocul dvs.

Vă recomandăm să utilizați JavaScript pentru a interacționa cu blocurile, deoarece acest lucru permite modificarea atât a blocurilor înregistrate la nivelul clientului, cât și la nivelul serverului. În plus, unele API-uri de bloc sunt disponibile numai în JavaScript.

Anularea înregistrării blocurilor de bază este posibilă și folosind în PHP cu filtrul allow_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'; } ); }

Rețineți că filtrul allow_block_types_all din PHP poate fi folosit și pentru a furniza o listă explicită de blocuri permise, excluzând toate celelalte de la utilizarea în 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 */ ]; }

Notă: Fiți atenți la această abordare, deoarece această listă va trebui menținută și actualizată cu blocurile de bază sau personalizate dorite. După cum sa menționat mai sus, această abordare poate fi utilizată numai pentru a limita blocurile care sunt înregistrate pe partea serverului (de exemplu, folosind block.json). Blocurile personalizate care sunt pe partea clientului trebuie gestionate doar în JavaScript folosind wp.blocks.unregisterBlockType.

Înlocuirea stilurilor de bloc încorporate

Mai multe blocuri de bază din WordPress includ stiluri de bloc prestabilite situate în bara de instrumente contextuală și controale de inspecție din partea dreaptă a editorului:

În JavaScript, utilizați wp.blocks.unregisterBlockStyle cu wp.blocks.registerBlockStyle pentru a înlocui stilurile implicite:

 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', } ); } );

Codul de mai sus va elimina stilurile de butoane „Umplere” și „Contur” încorporate și va adăuga un nou stil „Primar” (implicit) și un stil „Secundar”:

Butoanelor noi li se va atribui automat stilul „Primar”. Stilul „Primar” aplică clasa `.is-style-primary` la containerul de butoane, iar „Secondary” aplică `.is-style-secondary`. Aceste stiluri pot fi apoi implementate în CSS. Acest articol de la WordPress conține mai multe informații despre crearea stilurilor de bloc.

Există o funcție PHP disponibilă pentru anularea înregistrării stilurilor de bloc în unregister_block_style, dar nu o recomandăm. Multe stiluri de bloc, inclusiv blocuri de bază, sunt înregistrate în JavaScript la nivelul clientului, așa că nu este posibil să eliminați aceste stiluri folosind PHP. După cum sa menționat mai sus în „Eliminarea tipurilor de blocuri”, preferăm JavaScript la nivelul clientului pentru a gestiona blocurile existente pentru consecvență.

Eliminarea variațiilor de bloc

Variațiile sunt setări prestabilite pentru blocuri care pot fi grupate pentru a configura rapid un bloc. Acestea sunt rare, dar unele blocuri de bază includ variații nedorite. De exemplu, blocul de coloane încorporat include mai multe opțiuni de aspect:

Poate fi de dorit să eliminați presetările variației. Pentru acest exemplu, vom elimina varianta „25 / 50 / 25”. În JavaScript, variațiile pot fi eliminate prin wp.blocks.unregisterBlockVariation:

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

„Three-colons-wider-center” este numele variației care corespunde aspectului „25 / 50 / 25”. Acest lucru poate fi găsit căutând fișierul variations.js al blocului de bază și proprietatea „nume” care corespunde cu variația nedorită. Acest lucru va duce la limitarea variațiilor de bloc disponibile:

In concluzie

Între personalizarea theme.json și API-urile furnizate în această postare, este posibil să combinați ecosistemul larg al editorului de blocuri WordPress cu un sistem de design și să-l reduceți la o dimensiune ușor de gestionat.

Consultați postările noastre conexe despre cum gestionăm sistemele de design la WordPress VIP:

• Partea 1: Organizarea unui sistem de proiectare cu Gutenberg – theme.json
• Exportarea simbolurilor sistemului de design de la Figma la WordPress

Autorii

Alec Geatches, Senior Software Developer la Automattic

Dezvoltator Enterprise WordPress și pasionat de sisteme de proiectare care locuiește în Taipei, Taiwan.

Gopal Krishnan, Senior Software Developer la Automattic

Gopal lucrează la oferta WordPress decuplată a WordPress VIP, cu un interes pentru sistemele de design și Gutenberg. Are sediul în Sydney, Australia și s-a mutat recent din Canada.