Gestione e creazione blocchi custom su Gutenberg - Andrea Grillo - WP Catania

Transcript

1. Gestione e creazione blocchi custom su Gutenberg WordPress Meetup Catania - 29/11/2018
2. About me: Andrea Grillo Computer engineer - Full Stack Developer @YITH - Trainer @Your Inspiration - WooCommerce e Jetpack Contributor - WordPress lover Contatti: https://twitter.com/GrilloAndrea https://www.linkedin.com/in/ing-andrea-grillo/ http://andreagrillo.it info@andreagrillo.it
3. Cosa impareremo oggi…. ➔ Come creare un blocco ➔ Come creare una categoria ➔ Come convertire uno shortcode esistente in un blocco ◆ Block save() ◆ Block edit() Che competenze mi servono per fare tutto questo ? • Voglia di imparare • Pillole di programmazione in PHP e Javascript/jQuery
4. L’idea
5. ReactJS React è una libreria Javascript creata da Facebook e Instagram (https://facebook.github.io/react/) che permette di realizzare un'applicazione single-page (Single Page Applications (SPA)) attraverso una struttura che la divide in componenti dinamici e riutilizzabili. (Fonte: React JS: newbies tutorial)
6. Creare un blocco custom su Gutenberg 4 semplici step... 1. Registrazione del blocco 2. Creazione nuova categoria 3. Creazione ed inclusione dello script del blocco 4. Block Preview
7. 1. Registrazione del blocco 2. Registrazione del blocco Registrazione del blocco register_block_type( $name, $args = array() ) • Utilizzare la funzione register_block_type all’init • Definire il nome del blocco. Nota: il nome del blocco deve essere nel formato: prefix/block-name • Array di argomenti da passare al blocco (opzionali). I più usati sono: ◦ style → handle del foglio di stile del blocco ◦ script → handle dello script del blocco ◦ editor_style → handle del foglio di stile per l’editor del blocco ◦ editor_script → handle dello scritto per l’editor del blocco
8. Creare una nuova categoria (opzionale) uso del filtro block_categories usare il filtro block_categories Per creare una nuova categoria basta semplicemente aggiunge un nuovo elemento all’array delle categorie di Gutenberg indicando slug e title della
9. Creazione ed inclusione dello script e preview del blocco action: enqueue_block_editor_assets Cambia l’action usata ma funziona allo stesso modo di wp_enqueue_scripts
10. Let’s start the game…. Codice sorgente: https://github.com/andreagrillo/ag-gutenberg-example Gutenberg Official Handbook: https://wordpress.org/gutenberg/handbook/
11. Grazie per l’attenzione! Ci sono domande ?