Hi @studiowizjo, @davelee and @adamb glad it might be of use.
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*
Dave.
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.
Hi @antk3,
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:
- half_width_blocks__half__media
- half_width_blocks__quarter__media
- two_thirds_one_third_blocks__two_thirds__media
- two_thirds_one_third_blocks__one_third__media
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.
@atomicsmash Thanks for sharing 😉 Although I wished there were simpler ways to duplicate/rename modules or keeping the file simpler.. I have too many layouts and modules for this setup.
@atomicsmash – I’ve just really started to dive into OOP, and I’m fascinated with how you built this using an MVC approach. Is there any chance you’d consider putting that project on Github for someone like myself to learn from? -Rich
Hi @jrstaatsiii,
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
Cheers,
Dave.
Excellent stuff! Thanks AtomicShash, really been looking for something like this!
Hey again!
@atomicsmash would you mind rehosting the JSON file of the layout? I can’t find it anywhere here on the forum..
Thanks!
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?
Hi @SnitchHomer,
Yeah that is an issue I found as well. I’m pretty sure this wouldn’t be a simple JS tweak. Sadly I don’t have the time currently to look into this. Keep us posted if you make any developments 🙂
Dave.
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.
@solverat That looks awesome!
@solverat really nice, is it possible to use it? Do you plan to release/publish it?
@solverat Very nice; we’re looking to build something exactly like that to make it user-friendly for our clients.
Are you using shortcake as well to render elements (like the button)?
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:
- i’m using the awesome themosis framework to develop good and professional wordpress webpages. so, the plugin will probably work without it, but i can’t ensure it for now.
- also there is no translation, because we (me eg. companies i’m working for) only needs it in german – until now 🙂 )
- with each new version of ACF there is a lot of work to do because elliot is changing the backend-markup heavily. that’s ok, because normally no one needs it – but as the plugin is rearranging the markup also by javascript, we need to keep an eye on it.
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 you/we should try it. I can support german => english translations and development as well.
@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”:
https://bitbucket.org/dachcom/dachcom-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:
http://support.advancedcustomfields.com/forums/topic/acf-yoast-seo-3-0/
Cheers.
Hey @solverat
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.
group_53e8a6....json
