I want to create a minimal page builder for Advanced Custom Fields, what i want to do is simply assign some custom fields values to a grid divided in columns and rows.
To get this done i need to assign an option to the fields inside the Edit Field Group section in order to get the fields value available for the layout grid.
Now the questions:
1. Is there a way to assign a custom option to acf fields ? Something like a checkbox with a “make this field available for the page builder” label. I need this because I don’t want to make all the fields values available for the grid.
2. Is there a way to get a javascript event when a custom field value is created / displayed / edited ? I need this to create the elements to assign to the grid for the available fields records.
Update : Just discovered this VERY useful post, i think i should be able to manage the state of the fields values with these events.
You can add custom field settings to any fields using the acf/render_field_settings hook, more here https://www.advancedcustomfields.com/resources/adding-custom-settings-fields/.
You can then use the value of the setting to determine whether or not to show the field in an acf/prepare_field filter, returning false from your filter will remove the field.
Awesome, Thanks !
I will code some test tomorrow.
Here a quick update : the user interface (not final)
I’ve just stumbled onto this thread, and its very interesting. As a design/development agency, we’ve looked at a few front end builders and themes (Beaver Builder, Divi, etc.) to be able to allow our clients (the site owners) the ability to create their own layouts. However, many times, those builders are way to flexible and allow too much customization for tweakers and button pushers. They inevitably end up making pages look bad and off-brand.
ACF’s Flexible Content has been amazing for us being able to control layouts, and allow users to simply update their content, and even move around content layout modules, as they see fit. However, not having a drag & drop, and graphical interface to illustrate certain layouts is something that seems to be missing from this admin experience.
@luglio7 – I’d love to be able to check out the process and code you’re using to have some success with this “page builder” approach. Do you by chance have time to write up a sort of tutorial?
Hi @joshcarey
I’m just at the beginning of this adventure and I don’t have anything to show right now. I will update this post with updates and github repo link as soon as I have something working to show 🙂
Hope to release an alpha version within a month.
Hi, I have a question if you can spare a few moments: a couple of years ago I created a page builder using flexible and repeater fields – while I kept things very simple (around 5-6 layouts with a couple of fields each), I had no issues. Alas, once I started adding complexity (doubled the layouts, each with 15-20ish fields) saving a post started taking 10-20 seconds (or even more), while the overall browser performance rendered the interface barely usable (very low framerate/browser begging me to kill it).
Given this issue, I went for a different approach:
- For post & pages I used a “lite” page builder with very few fields.
- For the front-page (which usually has more content and diversity), i created a custom post type called “blocks” and loaded field-groups depending on the taxonomy (e.g. “block-gallery”, “block-map”, etc).
Now, what I wanted to ask you is: while I’m pretty sure ACF performance has improved since 2 years ago, I can’t help but wonder – do you think there’s a chance you may end up hitting a wall where too many layouts & fields may hinder/ruin the users experience (specifically on mobile devices or old computers)? Do you have a different approach in mind?
I do not use flexible nor repeater fields. this is a custom wp metabox which “analyze” the fields present in the page, i don’t think i will hit a wall since everything will be very minimal with a small footprint.
