---
description: >-
  https://app.gitbook.com/@wordpress-lionel/s/wordpress-advand/how-to-create-a-gutenberg-block-with-advanced-custom-fields-acf
---

# How to Create a Gutenberg Block with Advanced Custom Fields (ACF)

wp-content/themes/twentytwentyone/functions.php

```
function acf_portfolio_item_block() {
  // check function exists
  if( function_exists('acf_register_block') ) {
    // register a portfolio item block
    acf_register_block(array(
      'name'				=> 'portfolio-item',
      'title'				=> __('Portfolio Item'),
      'description'		=> __('A custom block for portfolio items.'),
      'render_template'	=> 'template-parts/blocks/portfolio-item/block-portfolio-item.php',
      'category'			=> 'layout',
      'icon'				=> 'excerpt-view',
      'keywords'			=> array( 'portfolio' ),
    ));
  }
}
add_action('acf/init', 'acf_portfolio_item_block');
```

wp-content/themes/twentytwentyone/template-parts/blocks/portfolio-item/block-portfolio-item.php

```
<?php
$logo = get_field( 'logo' );
$title = get_field( 'title' );
$description = get_field( 'description' );
echo '<div class="portfolio-item">';
if( !empty( $logo ) )
  echo wp_get_attachment_image( $logo['ID'], 'thumbnail', null, array( 'class' => 'portfolio-logo alignleft' ) );
if( !empty( $title ) )
  echo '<h3 class="portfolio-title">' . $title . '</h3>';
if( !empty( $description ) )
  echo '<div class="portfolio-description">' . $description . '</div>';
echo '</div>';
?>
```

![](https://2370029328-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWPtKFbhw0XehxVuoiZ%2F-Mgs7N3cLVGYmWmc8xhQ%2F-Mgs7rotMpmoXDfWlkZU%2FScreenshot_4.jpg?alt=media\&token=7c22d2c8-60c8-4179-a550-46290566c791)

![](https://2370029328-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWPtKFbhw0XehxVuoiZ%2F-Mgs7N3cLVGYmWmc8xhQ%2F-Mgs7uuKnwwJucju_U1s%2FScreenshot_5.jpg?alt=media\&token=6f62efa9-114f-4e89-a1fe-f33d489c8d43)

![](https://2370029328-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWPtKFbhw0XehxVuoiZ%2F-Mgs7N3cLVGYmWmc8xhQ%2F-Mgs7xyTrbMgpPOrt2G5%2FScreenshot_6.jpg?alt=media\&token=9b26a05e-d382-4b09-9076-f53674e50445)

![](https://2370029328-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWPtKFbhw0XehxVuoiZ%2F-Mgs7N3cLVGYmWmc8xhQ%2F-Mgs8-u4LcfUMbqZPNSg%2FScreenshot_7.jpg?alt=media\&token=550ae717-cb29-421a-a914-a9b9fcc8c2d1)
