FM-Wiki
Dark/Light
Log in

Creating ACF Gutenberg Blocks

by: Ally | Published: 2021-06-15

Getting to Know the Files:

STEP 1 :

In order to create an acf field into a Gutenberg block we first need to create the block template.
I created a directory inside 'parts' and named it 'blocks'. This is where all the custom acf block templates are located.
FMbuildr4.0 > parts > blocks

A little sidenote: This same template will be rendered BOTH in the frontend and in the backend.

  • I've been prefixing the filed with "block-" followed by the acf field name.
  • This template is no different than how you would add the acf code in flexible content template.

STEP 2:

  • Create the block stylesheet. I created a directory in assests called 'custom-blocks'.

  • This is where all the scss files for the blocks are located

    • FMbuildr4.0 > assets > styles > scss > custom-blocks

Helpful Tip: Only add styles that belong to that block.

STEP 3:

  • Update the Gulp File.

  • Define the location of the new scss file created for the block, and give it an appropriate name.
    Example:
    accordionStyles: [
    'assets/styles/scss/custom-blocks/accordion-block-styles.scss',
    ]
    These are accordions block styles, the variable name is 'accordionStyles' and within the brackets I defined the file location.

  • Within const ASSETS = {} I have defined a variable for the custom-blocks directory location called 'blockStyles'.
    This variable can be used in the styles script like so:

	// BLOCK STYLES
	gulp.task('accordionStyles', function() {
		return gulp.src(SOURCE.accordionStyles)
			.pipe(plugin.plumber(function(error) {
				gutil.log(gutil.colors.red(error.message));
				this.emit('end');
			}))
			.pipe(plugin.sourcemaps.init())
			.pipe(plugin.sass())
			.pipe(plugin.autoprefixer({
				browsers: [
					'last 2 versions',
					'ie >= 9',
					'ios >= 7'
				],
				cascade: false
			}))
			.pipe(plugin.cssnano({safe: true, minifyFontValues: {removeQuotes: false}}))
			.pipe(plugin.sourcemaps.write('.'))
			.pipe(gulp.dest(ASSETS.blockStyles))
			.pipe(touch())
			.pipe(browserSync.stream());
	});

So for your new scss file, we can replicate the above script and define the task to match the new block.

We will mainly be changing 'accordionStyles' to the new varible you defined for your block:

  • line 39: gulp.task('accordionStyles', function() {

  • line 40: return gulp.src(SOURCE.accordionStyles)

  • in line 57: pipe(gulp.dest(ASSETS.blockStyles)) we can see that the file will be compiled into the blockStyles directory.

++ NEXT:
We need to add this new gulp task in the browsersync, watch and run it within the default task.

++ LASTLY:
Run the gulp file task to compile the newly added scss block file into css. Ex: gulp accordionStyles.

  • Verify that the file was compiled by going to assets > styles > css > main-styles > custom-blocks and check if the new file exists.

STEP 4:

Resgiter the new block.

  • Go to functions > theme-gutenberg-blocks.php and register the block with it's styles.
acf_register_block(array(
	'name'				=> 'Gallery With Text Block',
	'title'				=> __('Gallery With Text (Gallery Pages) Block'),
	'description'		=> __('A custom block styled for gallery post pages.'),
	'render_template'   => '/parts/blocks/block-gallery-w-text.php',
	'category'			=> 'common',
	'icon'				=> 'format-aside',
	'keywords' => array('reviews', 'acf', 'testimonials'),	
	'enqueue_assets'	=> function(){	
		wp_enqueue_style( 'galleries-block-styles', get_template_directory_uri() . '/assets/styles/css/main-styles/custom-blocks/gallery-w-text-styles.css', array(), null, 'all');
	},
));

STEP 5:

In the site make sure that in the acf field settings, are set to "block" and make it equal to the new block template that was created.

(If this isn't done, then you won't see the template in the backend when you're trying to add it as a block on a page)

Other Things to Know:

The following file theme-gutenberg-block-styles.php is located in the functions directory.

This file enqueues css and js files for both the admin editor and frontend. Here is where we can define a settings file
to be used universally throughout the blocks.

Right now I'm enqueuing the same file throughout frontend and admin panel.

Helpful Links:

Back to All Notes