I’m looking to put together a proof-of-concept front end editor for AFC. Before I make a start, I figure I’d put this out there to the community who I’m sure collectively have more knowledge than just myself.
Here’s how I’d ideally like to UI to work:
1) A logged in user visits a post (this could be a page, post or CPT) on the front-end of the site
2) When a user hovers over a field a pencil icon or similar would appear (or perhaps there’s just a permanently fixed icon next to all the fields)
3) The icon (on click) triggers a modal window which loads in the standard UI that comes with AFC that we see in the backend for that particular field
4) Edits are made and an accept button is clicked
5) Importantly, when a field is saved, it does not save the new data to the post but rather just reflects the changes to preview
6) When all the edits are made, a separate save changes button is clicked which then saves the new data to the post/page and therefore to the front-end for all visitors
For me and my clients, this would be excellent. I frequently get requests about front-end editing but I’ve never found a solution that works well for me, they’re either half-baked or just don’t really work. Often, the authors have tried to reinvent how the editing UI works i.e. with inline editors but this seems like reinventing the wheel when so much effort and time has been put into getting the AFC UI just right. For example, I would love to be able to use a repeater field on the front-end using the AFC repeater UI, then when I OK the modal, I see the repeater rendered within the actual front-end of the website to preview.
What does everyone think, possible? There’s obviously Live Edit (https://wordpress.org/plugins/live-edit/screenshots) but the main issue I have here is that for me the main purpose of a front-end editor is to preview the content in situ before pushing it live and with Live Edit you have to save to see the changes. I found this today: https://github.com/HorionDigital/advanced-custom-fields-front-end-editor which is great and previews the content before saving but it replaces the AFC editing tools and only supports text, text area and WYSIWYG fields.
your approach is actually not that hard to do as ACF has form tag that you can use in the front end. the preview before save might be a bit trickier with this approach but i am sure we could figure something out.
my approach of inline editing was meant for tweaking content and fixing typos rather than creating new sections and i wanted it to be super intuitive without extra ui elements.I have an idea how to make repeaters work, which would allow to use flexible content and all that, just dont have time for that at the moment.
Hey, great to hear from you. Also great to hear that you’ve got some ideas moving forward. Feel free to get in touch on here or I think you tweeted me as well if you need a second pair of eyes to look over anything or to run any ideas past me. Would love to help out.
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!