Gutenberg Blocks Development for Programmers with no time
0 likes196 views
The document discusses creating a custom Gutenberg block for WordPress. It involves: 1) Creating custom fields using Advanced Custom Fields (ACF) to store block data. 2) Exporting the ACF fields to JSON and PHP. 3) Writing HTML and CSS to display the block using the custom fields.
![<?php
function wcath_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' => 'wcathens',
'icon' => 'image-filter',
'mode' => 'auto',
'keywords' => [ 'talk', 'quote' ],
'enqueue_style' => get_template_directory_uri() . 'blocks/testimonial/
testimonial.css',
] );
}
add_action('acf/init', 'wcath_create_talk_gb_block');](https://image.slidesharecdn.com/gutenberg-blocks-development-for-programmers-with-no-time-wcathens-2019-190518103524/85/Gutenberg-Blocks-Development-for-Programmers-with-no-time-4-320.jpg)
Gutenberg Blocks Development for Programmers with no time
- 1. #WCATH2019 Gutenberg Blocks Development for programmers with NO time Mauricio Gelves - @maugelves
- 2. #WCATH2019 Mauricio Gelves @maugelves Software Engineer Freelance WordPress Developer Brand Ambassador at Web: maugelves.com YouTube: mauriciogelves Instagram: @maugelves Twitter: @maugelves
- 3. #WCATH2019 Register the Gutenberg block Which are the steps? Create custom fields with ACF Export fields to JSON y PHP Create HTML/CSS to render the block
- 4. <?php function wcath_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' => 'wcathens', 'icon' => 'image-filter', 'mode' => 'auto', 'keywords' => [ 'talk', 'quote' ], 'enqueue_style' => get_template_directory_uri() . 'blocks/testimonial/ testimonial.css', ] ); } add_action('acf/init', 'wcath_create_talk_gb_block');
- 5. #WCATH2019 Register the Gutenberg block Which are the steps? Create custom fields with ACF Export fields to JSON y PHP Create HTML/CSS to render the block
- 8. #WCATH2019 Register the Gutenberg block Which are the steps? Create custom fields with ACF Export fields to JSON y PHP Create HTML/CSS to render the block
- 9. #WCATH2019 Register the Gutenberg block Which are the steps? Create custom fields with ACF Export fields to JSON y PHP Create HTML/CSS to render the block
- 10. <?php // Title. ?> <div class="talk__meta"> <h3 class="talk__h"><?php the_field( 'wcath_gb_talk_title' ); ?></h3> <p class="talk__b"><?php the_field( 'wcath_gb_talk_description' ); ?></p> </div><!-- END .talk__meta -->