Sviluppo dei blocchi di Gutenberg per programmatori senza tempo
•
1 like•288 views
Talk fatto alla WordCamp di Torino 2019
![<?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');](https://image.slidesharecdn.com/sviluppo-dei-blocchi-di-gutenberg-per-programmatori-senza-tempo-190406133825/85/Sviluppo-dei-blocchi-di-Gutenberg-per-programmatori-senza-tempo-6-320.jpg)
Sviluppo dei blocchi di Gutenberg per programmatori senza tempo
- 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. Sviluppatore Freelance WP Nomade Digitale SiteGround Brand Ambassador Ciao! Sono Mauricio Gelves 🎬 youtube.com/c/mauriciogelves 📸 instagram.com/maugelves 🌎 maugelves.com
- 3. Come faccio per creare un blocco di Gutenberg con ACF? Mani al codice
- 5. 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?
- 6. <?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');
- 7. 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
- 8. Campi Personalizzati con ACF
- 10. 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
- 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. <?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 -->
- 13. 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
- 14. <?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' );
- 16. Ora lo faremos passo a passo. WORKSHOP
- 17. goo.gl/XKj95b Scarica e importa questo file
- 18. 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
- 19. Grazie YouTube | Instagram | maugelves.com Mi potete trovare in tutti posti come @maugelves