Here is the code https://github.com/AtomicSmash/ACF-page-builder. I’ve bundled it into a plugin for easy testing.
So the code is pretty simple and probably a bit buggy (it’s about 12 lines of jQuery). Like I said before, I don’t particularly want to support this as it’s only a prototype, so please fork away.
Instruction on setup are in the repo readme.
When you see how little code it takes to modify the ACF Flex content field to do this, I think it speaks testament to what a great job @elliot Condon has done with ACF and how ‘flexible’ it truly is. *MEGA PROPS*
Oh yeah, one other thing. Including icons inside the initial page building steps, like selecting how many rows are in a column is really simple too: http://www.atomicsmash.co.uk/blog/adding-icons-to-acfs-flexible-content-popup-box/
@atomicsmash this prototype is great! Is it using the block layouts that appeared in 5.1.3? Above all I am scratching my head on how you did to have the sub-sub-block fields (your main modules) show every time you create a layout in the video.. Did you duplicate them each time and then change their field-name / ID ?
I guess you do it another way else it would create a huge template. If you don’t mind sharing your json (or php) file this would really help.
Thanks, so when I made this the block layout wasn’t around.
So the site that I built this for, there were a large number of different types of blocks, but only a few that actually appeared on every type of row. There is one in particular that was repeated often which I called a “Media Block”. This is used in multiple rows and multiple sizes per row, so I created a standard ‘media block’ and duplicated using a naming convention based on the row it was in:
I’ve attached the JSON for this.
In the template files there was no flexible content logic, I kept all that to a set of MVC style classes. So a controller that handles all of the flexible content selection, then a set of dumb views for actually outputting HTML from the controller.
Hope that helps.
I sadly can’t share this project due to client’s request. But the basic idea is explained here: http://stackoverflow.com/questions/15757448/can-i-create-own-php-class-in-wordpress-theme-function
Excellent stuff! Thanks AtomicShash, really been looking for something like this!
Been fiddling with this, and it looks promising, but there is one major issues that I have found.
If you are for example setting up the 3 rows flexible content row, you will add 3 new flexible content inside (one for each column)
Now, after you add blocks to each column, it’s possible to drag them up and down inside their own column (ie their own flexible content field). But in a real drag and drop scenario we would want to move every block anywhere – even between columns.
See this gif that illustrates the problem:
The question is, would this even be possible to do with ACF?
i’ve created a similar thing – called it “page designer”.
sneak preview: http://recordit.co/udTPhnSBVe
in fact, its a flexible layout in a row-repeater field.
it’s build on the bootstrap framework and you only can add one sub-level.
to add modules, you just have to add an folder in the theme directory and also create a view.
So no huuuuge flexible-fields madness in the backend. 🙂
at the moment it’s not open source but in a private repo. depending on elliot’s future plans on this topic maybe i should make it public.
Hey @all, thanks for the feedback, i really appreciate it.
the idea to push the whole thing into the open-source world exists. but there some problems i’m facing with:
thats the status quo. right now, the extensions is a private repo on bitbucket. so what would you say? should we try it? maybe the plugin will grow much better in a community.
@db9429: Yes, I’m using shortcake – the best thing by far to use shortcodes the right way. 🙂
@solverat Re: Themosis – super awesome; glad you’re finding some success with it. We’re using the Roots.io stack, which is a great way to build the “more conventional” WordPress themes IMO, but we plan on testing Themosis soon as it looks so nice, and very similar to Laravel.
Re: Page Designer – I would agree with @markus… (of course I would say that 🙂 ) but perhaps with more contributors, it would be easier to keep on top of the ACF core updates as well as integrate some nice things.
Re: Shortcake – great stuff 🙂
Hey guys, i just pushed the button, you can now reach the repo and download our “page-designer”:
What i’m doing to do:
– Writing an installation guide (the next 24h)
What you’re going to do:
– Download it!
– Do not violate the copyright!
– Be kind!
– Have fun!
Any issues or exiting conversations can be started here (maybe we should move our conversation from here anyway): https://bitbucket.org/dachcom/dachcom-page-designer/issues?status=new&status=open
BTW: If you’re using the new yoast seo plugin > 3.0, you can use acf (and of course the page-designer) with seo on-the-fly validation:
Great news. Thanks for this.
I’ll need a bit of time to just look around and find the boundaries of the plugin and where it is now, and then I can get in touch with you to discuss what you need help with (if anything), but otherwise will try and get it functional in a non-Themosis environment 🙂
The Yoast/ACF plugin looks great too; it’s something we have had a problem with in the past with V2.x of Yoast, and had to append all meta to the_content so the analysis would displaying *something* – it wasn’t pretty or perfect, so this is great too – thanks for sharing.
Hey @solverat – just a ‘quickie’ on the Yoast snippet – we had a couple of issues getting it to work (because of Yoast’s documentation, it seems!)
Details in this link: https://github.com/Yoast/YoastSEO.js/issues/181
But now that’s done it works like a charm.
Hope it helps 🙂
ah i see. i enqueued the script like so:
wp_enqueue_script('acf_yoast', get_template_directory_uri() . '/app/admin/assets/js/acf_yoast.js', array('yoast-seo'), false, true);
because the script is now loading after the yoast-seo.js, i didn’t had the problem like you. i changed the load event, thanks for the report.
Thanks for sharing your content it’s really helpful
Hi,I am attempting to work with the Layout Builder to affect a particular page or rather a product page for a eCommerce site without affecting the other pages.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
© 2021 Advanced Custom Fields. Subscribe