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
M A U R I C I O G E L V E S - @ m a u g e l v e s
Sviluppatore Freelance WP
Nomade Digitale
SiteGround Brand Ambassador
Ciao!
Sono Mauricio Gelves
🎬 youtube.com/c/mauriciog...
Come faccio per creare un blocco di Gutenberg con ACF?
Mani al codice
Esportare i campi a JSON e PHP
Registrare il blocco di Gutenberg
Creare campi personalizzati con ACF
Creare il mockup (HTM...
<?php
/**
* Creates Talk Gutenberg Block.
*/
function wcz_create_talk_gb_block() {
// register a testimonial block
acf_reg...
Creare campi personalizzati con ACF
Registrare il blocco di Gutenberg
Quale sono i passi?
Esportare i campi a JSON e PHP
C...
Campi Personalizzati con ACF
Creare campi personalizzati con ACF
Registrare il blocco di Gutenberg
Quale sono i passi?
Esportare i campi a JSON e PHP
C...
Creare campi personalizzati con ACF
Registrare il blocco di Gutenberg
Quale sono i passi?
Esportare i campi a JSON e PHP
C...
<?php
// Title.
?>
<div class="talk__meta">
<h3 class="talk__h"><?php the_field( 'wtr_gb_talk_title' ); ?></h3>
<p class="...
Creare campi personalizzati con ACF
Registrare il blocco di Gutenberg
Quale sono i passi?
Esportare i campi a JSON e PHP
C...
<?php
/*
* Enqueue the stylesheets for Gutenberg.
*/
function wtr_admin_styles() {
// Register the styles.
wp_register_sty...
Ora lo faremos passo a passo.
WORKSHOP
goo.gl/XKj95b
Scarica e importa questo file
La WordCamp ci chiede…
Creare un nuovo blocco per aggiungere gli assistenti dell'evento
nella Homepage del sito web.
Inclu...
Grazie
YouTube | Instagram | maugelves.com
Mi potete trovare in tutti posti come @maugelves
Sviluppo dei blocchi di Gutenberg per programmatori senza tempo
Sviluppo dei blocchi di Gutenberg per programmatori senza tempo
Sviluppo dei blocchi di Gutenberg per programmatori senza tempo
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

Sviluppo dei blocchi di Gutenberg per programmatori senza tempo

Download to read offline

Talk fatto alla WordCamp di Torino 2019

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • GiacomaAllegretta

    Apr. 7, 2019

Talk fatto alla WordCamp di Torino 2019

Views

Total views

238

On Slideshare

0

From embeds

0

Number of embeds

6

Actions

Downloads

0

Shares

0

Comments

0

Likes

1

×