Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sviluppo dei blocchi di Gutenberg per programmatori senza tempo

109 views

Published on

Talk fatto alla WordCamp di Torino 2019

Published in: Internet
  • Be the first to comment

Sviluppo dei blocchi di Gutenberg per programmatori senza tempo

  1. 1. Sviluppo dei blocchi di Gutenberg per programmatori senza tempo M A U R I C I O G E L V E S - @ m a u g e l v e s
  2. 2. Sviluppatore Freelance WP Nomade Digitale SiteGround Brand Ambassador Ciao! Sono Mauricio Gelves 🎬 youtube.com/c/mauriciogelves 📸 instagram.com/maugelves 🌎 maugelves.com
  3. 3. Come faccio per creare un blocco di Gutenberg con ACF? Mani al codice
  4. 4. Esportare i campi a JSON e PHP Registrare il blocco di Gutenberg Creare campi personalizzati con ACF Creare il mockup (HTML/CSS) per renderizzare il blocco Aggiungere i stili del tema nel backend Quale sono i passi?
  5. 5. <?php /** * Creates Talk Gutenberg Block. */ function wcz_create_talk_gb_block() { // register a testimonial block acf_register_block( [ 'name' => 'talk', 'title' => __( 'Talk', $DOMAIN_NAME ), 'description' => __('Block with basic info of the talk.', $DOMAIN_NAME), 'render_callback' => 'talk_block_render_callback', 'category' => ‘wctorino', 'mode' => ‘auto', 'icon' => 'image-filter', 'keywords' => [ 'talk', 'quote' ], ] ); } add_action('acf/init', 'wcz_create_talk_gb_block');
  6. 6. Creare campi personalizzati con ACF Registrare il blocco di Gutenberg Quale sono i passi? Esportare i campi a JSON e PHP Creare il mockup (HTML/CSS) per renderizzare il blocco Aggiungere i stili del tema nel backend
  7. 7. Campi Personalizzati con ACF
  8. 8. Creare campi personalizzati con ACF Registrare il blocco di Gutenberg Quale sono i passi? Esportare i campi a JSON e PHP Creare il mockup (HTML/CSS) per renderizzare il blocco Aggiungere i stili del tema nel backend
  9. 9. Creare campi personalizzati con ACF Registrare il blocco di Gutenberg Quale sono i passi? Esportare i campi a JSON e PHP Creare il mockup (HTML/CSS) per renderizzare il blocco Aggiungere i stili del tema nel backend
  10. 10. <?php // Title. ?> <div class="talk__meta"> <h3 class="talk__h"><?php the_field( 'wtr_gb_talk_title' ); ?></h3> <p class="talk__b"><?php the_field( ‘wtr_gb_talk_description' ); ?></p> </div><!-- END .talk__meta -->
  11. 11. Creare campi personalizzati con ACF Registrare il blocco di Gutenberg Quale sono i passi? Esportare i campi a JSON e PHP Creare il mockup (HTML/CSS) per renderizzare il blocco Aggiungere i stili del tema nel backend
  12. 12. <?php /* * Enqueue the stylesheets for Gutenberg. */ function wtr_admin_styles() { // Register the styles. wp_register_style('style', get_bloginfo('template_url') . '/style.css', array(),false); // Enqueue the styles. wp_enqueue_style('style'); } add_action( 'enqueue_block_editor_assets', ‘wtr_admin_styles' );
  13. 13. Ora lo faremos passo a passo. WORKSHOP
  14. 14. goo.gl/XKj95b Scarica e importa questo file
  15. 15. La WordCamp ci chiede… Creare un nuovo blocco per aggiungere gli assistenti dell'evento nella Homepage del sito web. Includere campi per il nome, foto e il account di Twitter. Mostrare (come volete) gli assistenti nel Frontend del sito web. 🚨 goo.gl/KYU5Cr Code Snippets 📂 goo.gl/yigK2u Scarica il File da qui WP Backend User: admin Password: admin
  16. 16. Grazie YouTube | Instagram | maugelves.com Mi potete trovare in tutti posti come @maugelves

×