{"id":782,"date":"2020-06-12T21:05:35","date_gmt":"2020-06-12T21:05:35","guid":{"rendered":"https:\/\/carrousel.studio\/?p=782"},"modified":"2020-08-21T16:13:34","modified_gmt":"2020-08-21T16:13:34","slug":"acf-gutenberg-blocks","status":"publish","type":"post","link":"https:\/\/carrousel.studio\/en\/acf-gutenberg-blocks\/","title":{"rendered":"Introduction to ACF Gutenberg Blocks"},"content":{"rendered":"\n

ACF Gutenberg implementation for beginners.<\/h2>\n\n\n\n

This article assumes that you are somewhat familiar with Gutenberg blocks and Advanced Custom Fields.<\/p>\n\n\n\n

Using Gutenberg blocks, editing a WordPress site has become the new way to go.
These blocks gives bloggers the ultimate tool to create with ease of use any piece of content<\/p>\n\n\n\n

\"\"<\/figure>
\n

Here is what the default Gutenberg tool selector looks like.

And now, with ACF, you can now add your custom made blocks that serves a specific purpose.<\/p>\n<\/div><\/div>\n\n\n\n

Supercharging your Gutenberg blocks with ACF.<\/h2>\n\n\n\n

Here are the primary steps for you to add new custom fields to your Gutenberg toolset.<\/p>\n\n\n\n

  1. Register your new ACF block<\/li>
  2. Create your ACF field group<\/li>
  3. Build the block output of how it will appear<\/li><\/ol>\n\n\n\n

    1. Register your new ACF block<\/h3>\n\n\n\n
    \n
    \n

    Basic code sample to register the acf block.<\/p>\n<\/div>\n\n\n\n

    \n
    add_action('acf\/init', 'my_acf_init_block_types');\nfunction my_acf_init_block_types() {\n\n    \/\/ Check function exists.\n    if( function_exists('acf_register_block_type') ) {\n\n        \/\/ register a testimonial block.\n        acf_register_block_type(array(\n            'name'              => 'testimonial',\n            'title'             => __('Testimonial'),\n            'description'       => __('A custom testimonial block.'),\n            'render_template'   => 'template-parts\/blocks\/testimonial\/testimonial.php',\n            'category'          => 'formatting',\n            'icon'              => 'admin-comments',\n            'keywords'          => array( 'testimonial', 'quote' ),\n        ));\n    }\n}<\/code><\/pre>\n\n\n\n
    <\/h2>\n\n\n\n
    <\/p>\n<\/div>\n<\/div>\n\n\n\n
    2. Create your ACF field group<\/h3>\n\n\n\n
    \n
    \n
    Add every ACF elements you which to be available in your custom block.<\/p>\n<\/div>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
    3. Build the block output of how it will appear<\/h3>\n\n\n\n
    \n
    \n
    For this step, make sure to create a file with the same name defined in step 1.<\/p>\n\n\n\n
    template-parts\/blocks\/testimonial\/testimonial.php<\/strong><\/p>\n<\/div>\n\n\n\n
    \n
    <?php\n\n\/**\n * Testimonial Block Template.\n *\n * @param   array $block The block settings and attributes.\n * @param   string $content The block inner HTML (empty).\n * @param   bool $is_preview True during AJAX preview.\n * @param   (int|string) $post_id The post ID this block is saved to.\n *\/\n\n\/\/ Create id attribute allowing for custom \"anchor\" value.\n$id = 'testimonial-' . $block['id'];\nif( !empty($block['anchor']) ) {\n    $id = $block['anchor'];\n}\n\n\/\/ Create class attribute allowing for custom \"className\" and \"align\" values.\n$className = 'testimonial';\nif( !empty($block['className']) ) {\n    $className .= ' ' . $block['className'];\n}\nif( !empty($block['align']) ) {\n    $className .= ' align' . $block['align'];\n}\n\n\/\/ Load values and assign defaults.\n$text = get_field('testimonial') ?: 'Your testimonial here...';\n$author = get_field('author') ?: 'Author name';\n$role = get_field('role') ?: 'Author role';\n$image = get_field('image') ?: 295;\n$background_color = get_field('background_color');\n$text_color = get_field('text_color');\n\n?>\n<div id=\"<?php echo esc_attr($id); ?>\" class=\"<?php echo esc_attr($className); ?>\">\n    <blockquote class=\"testimonial-blockquote\">\n        <span class=\"testimonial-text\"><?php echo $text; ?><\/span>\n        <span class=\"testimonial-author\"><?php echo $author; ?><\/span>\n        <span class=\"testimonial-role\"><?php echo $role; ?><\/span>\n    <\/blockquote>\n    <div class=\"testimonial-image\">\n        <?php echo wp_get_attachment_image( $image, 'full' ); ?>\n    <\/div>\n    <style type=\"text\/css\">\n        #<?php echo $id; ?> {\n            background: <?php echo $background_color; ?>;\n            color: <?php echo $text_color; ?>;\n        }\n    <\/style>\n<\/div><\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
    Fun facts<\/h2>\n\n\n\n