17 Oct

ACF Chat Fridays: Is It Possible to Extend WordPress Core Blocks?

By Mike Davey

Every second Friday we fling open the doors for ACF Chat Fridays, our open office hours with the ACF team and users dedicated to the best ways to build better WordPress sites with ACF.

The October 13th session looked at ways to extend core blocks, how ACF Blocks uses the editorStyles property, and much more.

Co-hosted by Iain Poulson, Matt Shaw, Anthony Burchell, and Liam Gladdy.

Sign up for the next session →

ACF Chat Fridays Banner Image.

Session Recording

Catch the highlights in the session summary, or watch the entire session in the player below.

Session Summary

The session began with brief opening remarks from Iain Poulson, who introduced the rest of the team and noted they were hard at work on a couple of point releases, as well as ACF 6.3, the next full release. ACF 6.3 will have a special focus on ACF Blocks.

In addition, Iain announced that Jason Bahl, founder of WPGraphQL would join the October 27th session of ACF Chat Fridays to discuss the beta release of WPGraphQL for ACF. The release includes support for ACF Blocks and the new Options Page UI released in ACF 6.2.

Q&A

Questions about the best way to use ACF, feedback about the plugin, or feature requests? ACF Chat Fridays is one of the best places to make sure your voice is heard and your questions answered. We’ve included some of the questions and answers from the latest session below, with minor edits made for clarity and style.

Q: Would it be possible to use ACF to add a secondary styling menu within core WordPress blocks? I build sites by using custom themes and adding ACF Blocks and WordPress core blocks. I love building this way, but one challenge is making the client experience as close as possible for the clients. Is it possible to add a secondary UI element in the sidebar of the block options for a second style that basically adds a class to the core block as an extension of that core block?

A: 10up has a doc on extending core blocks with their registerBlockExtension function. You could use something like that to extend a core block, and then inside of that call ACF data.

We believe there are going to be other ways to extend core blocks in the future. Rather than make a design pattern right now, it might be a good idea to see that there is a way to do it, rather than hacking away at it.

We’re still having internal discussions about how to make the ACF Block experience more like core blocks. The ultimate goal would be the ability to make, for example, your own Paragraph block that feels just like the one in core, but that does all the custom things you want it to.

Q: I’m using the Understrap theme to develop sites and the reusable plugin for my ACF Blocks. Is there a good way to get the blocks to recognize Bootstrap and the CSS variables in the page editor?

A: You should be able to do this by setting the editorStyle property in your block.json file. You can point this to a CSS file, and those styles are applied to your block in the editor view.

If that doesn’t work, try and see what classes the styles are being applied to, and see if there’s something specific that’s excluding them. You might find there a wrapper WordPress is putting on that’s overriding the styles. Look in the block editor view and see if your styles are actually there, but crossed out because they’re being overridden.

Q: I’m a “classic” WordPress + ACF guy. All the sites I do are highly customized from the ground up using custom designs, and I’ve struggled with making the transition to the block editor.

Do you have any examples of completely custom themes that utilize Gutenberg very well? I’ve seen a couple examples, but they’re extremely clunky, and seem to present far more challenges for both developers and the client. I’m sure there’s a good way to do it, but I want to see some well crafted examples before I make the leap.

A: There are some suggestions you could try. There’s Frost, developed by Brian Gardner. You can just spin it up and get a block template that has your header, area to work, and some good styling and controls. During the session, users in the chat also suggested Underscores, which creates a blank developer theme, and Powder, another theme by Brian Gardner.

We should note that none of these themes are ACF Block-related, but Gutenberg site editor native. It’s possible to build sites using the block editor, using native blocks, but this approach makes the person in the editor into the designer. They’ll have to pull everything together using the native blocks, maybe with columns or groups and loads of different images. Traditionally, that’s not really what the content editor wants to do.

Clients usually want just the right level of control, which is fairly small in most cases. We’ve found that when people talk about building blocks and block sections with ACF, they’ve often gone all out to put everything into one ACF Block…and then later realized they need a bit more control, or they need to give the client something closer to the native block experience. It comes down to what is right for your client (or whoever is going to be editing the site).

We share relevant resources during the call. We’ll sum them up here and try to provide a bit of context:

Coming Up on ACF Chat Fridays

Join us on October 27th at 2pm GMT for the next session of ACF Chat Fridays, featuring special guest Jason Bahl, creator of the WPGraphQL plugin! This plugin provides an extensible GraphQL schema and API for any WordPress site, allowing you to separate your CMS from your presentation layer. Combined with ACF, it becomes an ideal solution for creating headless WordPress sites.

What do you think we should cover at our sessions in November, December, and throughout 2024? Let us know on Twitter.

Sign up for the next session of ACF Chat Fridays here:

https://wpeng.in/acf-chat-fridays/

The list of upcoming sessions is below. You can watch the October 13th session on YouTube.

  • October 27, 2023
  • November 10, 2023
  • November 24, 2023
  • December 8, 2023

Tag or DM us on Twitter to let us know you’ll be there. Suggest new topics, let us know what you’d like to see, and send us feedback with #ACFChatFridays on Twitter.

About the Author