Gutenberg compatibility for PHP/AJAX Validation

[elliotcondon]

Description

A highly used feature in ACF is our PHP validation powered via AJAX. This allows developers to highly customize the validation process via PHP whist providing convenient feedback to the user when a field value does not meet its requirements.

To do this, we use JS to intercept the "submit" action on the form and stop it. We then send all $_POST data via an AJAX request and use the returned JSON to either display errors or re-submit the form.

It is important for UX that we validate the form data only when the user clicks the "publish" button.

Issues

• The form "submit" event is never fired, so our AJAX validation is never triggered.

Questions

• What can we "hook" into to prevent the post from being submit in order to validate via AJAX and then re-submit?
• How can we get all the $_POST data about the post (title, content, etc)?
• How can we re-submit the form after validation is complete?
• Is there an API for displaying an error message in Gutenberg?

[elliotcondon]

@noisysocks Adding Gutenberg compatibility for PHP/AJAX Validation will be our next focus.

Thanks for the info provided over on the original ticket. I added an extra note in the topic above:
"It is important for UX that we validate the form data only when the user clicks the "publish" button."

Can we work on a solution for validating the form data via AJAX that also keeps the above in mind?

[noisysocks]

Copying some answers over from WordPress/gutenberg#12692 (comment).

• How can we get all the $_POST data about the post (title, content, etc)?

select() and getEditedPostAttribute() are what we want again for this. The REST API reference is useful here for figuring out what post attributes are available.

const { getEditedPostAttribute } = wp.data.select( 'core/editor' );
const title = getEditedPostAttribute( 'title' );
const content = getEditedPostAttribute( 'content' );

• Is there an API for displaying an error message in Gutenberg?

Yes, the Notices API is what we'll want here. Namely, createErrorNotice().

wp.data.dispatch( 'core/notices' ).createErrorNotice( 'Something is not good!' );

[noisysocks]

Can we work on a solution for validating the form data via AJAX that also keeps the above in mind?

Got it. I don't think this is currently possible but it's a new hook that we can discuss adding over in the Gutenberg project.

To clarify: do we need to hook into when the post is being saved, or when the post is being published?

[elliotcondon]

Hi @elliotcondon

We validate the custom field values only when publishing a post, or when updating a published post.
Autosaves and drafts are not validated.

At the moment, we listen to the "form submit" action, and "prevent default" to stop the form from submitting. We then validate the form data via AJAX, and either display errors or re-submit the form (but this time allow the event to run).

[noisysocks]

My current thinking is that ACF could use PluginPrePublishPanel to render a component in the pre-publish panel that:

• Dispatches lockPostSaving() when the component is mounted so that the user can not click Publish.
• Displays some intermittent UI (e.g. a Spinner) to indicate to the user that the post is currently being validated.
• Sends off the AJAX request which validates the current post.
  • If the post is valid, dispatches unlockPostSaving().
  • If the post is invalid, displays some UI which indicates to the user which fields need attention.

Very quick mockup of what this could look like:

Does that make sense? Would this be a workable approach?

[elliotcondon]

Hi @noisysocks

This is a great idea, but will this also work for updating a published post?

[noisysocks]

Hey @elliotcondon. That's a good point. No, unfortunately this won't handle the case where a published post is updated. We may have to add a new filter for this after all. I've suggested this over in WordPress/gutenberg#13413.

[elliotcondon]

Hi @noisysocks

Just following up on this one. Did we get anywhere with a solution to "validate" and "prevent" the form from being submit?

If not yet explored, would it be possible to use a promise object + a JS filter to allow 3rd party (or core) logic to stop/trigger the saving process?

[noisysocks]

Hey @elliotcondon! I like your new avatar 🙂

I haven't been actively working on this. WordPress/gutenberg#13413 tracks adding the API which I prefer which is a promise object + JS filter. WordPress/gutenberg#13718 is an unrelated PR that also had a need for such an API.

@talldan: What's the status on WordPress/gutenberg#13718? Do you think we can include the mentioned API?

[matgargano]

Any update here?

[elliotcondon]

@matgargano - Not from my end. I'm still waiting for WordPress to add in some sort of action/filter to hook in and customize the saving process.

[benbowler]

Is there a ticket on the Wordpress side we can comment on/contribute to?

[elliotcondon]

@benbowler - There are a few GitHub threads listed in previous replies on this thread.

If you're reading this via email, click the GitHub link to view this issue in your browser so you can scroll up and check those links.

For example: WordPress/gutenberg#13413

[firda-yana]

Hi all, Do we have any update here?

[jenilk]

Hi @elliotcondon,

Any update on this? As the WordPress 5.3 has been released, You probably able to fix the issue now.

Best
Jenil

[elliotcondon]

@jenilk I'm not aware of any changes in WP 5.3 that introduced an API for PHP validation. If you can provide some reference, that would be great :)

[jenilk]

Hi @elliotcondon I am also in a same phase as you're. However, I have created a ticket to WordPress where we can all contribute there. As this issue goes to a blocker we need to find the solutions as earliest.

Ticket: https://core.trac.wordpress.org/ticket/48959

Best
Jenil

[adamsilverstein]

Hi @elliotcondon - although there is no specific API for PHP side validation, you should be able to achieve something close to what you want with the existing extensibility provided in Gutenberg (unless I am missing something):

1. Use post saving lock to prevent updates/publishing when validation fails, this works for updating or publishing.
2. subscribe to data changes (example code), or field changes explicitly, then when a field is changed/blurred, send an ajax request to perform PHP validation
3. when everything validates, unlock saving, otherwise keep it locked and display the validation issues. use can use an alert, a sidebar, display the errors inline or some combination of those.

If this doesn't work for your use case, can you explain why? Can you identify exactly what type of hook or filter in GB would enable your use case?

This plugin might be useful to look at: https://github.com/humanmade/publication-checklist

[elliotcondon]

Hi @adamsilverstein

Thanks for the information. The "Post saving lock" API and the example plugin look very promising and I'll begin some testing with this shortly!

[isuke01]

Hey, I was using non Gutenberg fo so long, but I decided to use ... some part of if.
Today I tested it, I make it a bit without content, just title ...

But I noticed this issue ... and I was a bit not happy of it.
So I fixed it.
I tested it on ACF PRO 5.8.8 and WP 5.3.2, I did not test every use case yet. But seems like working, hope it will help someone.

function enhancement_gutenberg_isu(){
?>
    <script type="text/javascript">

        jQuery(document).ready(function($) {
            wp.domReady(function(){
                //acf Custom Validation for Gutenberg
                var postSaveButtonClasses = '.editor-post-publish-button';
                $(document).on('click', postSaveButtonClasses , function(e){
                        e.stopPropagation();
                        e.preventDefault();
                        var $button = $(this)
                        acf_validate_fields($button);
                })
            })

            function acf_validate_fields($button){
                var editorInfo = wp.data.select( 'core/editor' );
                var isPublishSidebarOpened = wp.data.select('core/edit-post').isPublishSidebarOpened();
                var tmpButtonText = $button.text();
                wp.data.dispatch( 'core/editor' ).lockPostSaving( 'acfValidateFields' );
                //$button.text('Fields validation ...');
                return acf.validateForm({
                    form: jQuery('#editor'),
                    reset: true,
                    failure: function( $form, validator ){
                        var notice = validator.get('notice').data.text
                        wp.data.dispatch( 'core/notices' ).createErrorNotice( notice, { id: 'ACF_VALIDATION', isDismissible: true}  );
                        if(isPublishSidebarOpened){
                            wp.data.dispatch('core/edit-post').closePublishSidebar()
                        }
                    },
                    complete: function( $form, validator ){
                        //$button.text(tmpButtonText)
                        wp.data.dispatch( 'core/editor' ).unlockPostSaving( 'acfValidateFields' );
                    },
                    success: function(){
                        //remove notices if there are any from acf validation
                        wp.data.dispatch( 'core/notices' ).removeNotice('ACF_VALIDATION');
                        //save post if is ok to save
                        if(editorInfo.isEditedPostSaveable()){
                            if(!editorInfo.isCurrentPostPublished() && ~['draft','auto-draft'].indexOf(editorInfo.getEditedPostAttribute( 'status' ))){
                                //for some reason if post is draft we must update manually  post status
                                //otherwise post will be saved but not published;
                                wp.data.dispatch('core/editor').editPost({status: 'publish'})
                            }
                            wp.data.dispatch( 'core/editor' ).savePost()
                        }
                    }
                })
            }
        });
    </script>
    <?php
}
add_action('admin_footer', 'enhancement_gutenberg_isu');

I have learned I can subscribe for editor ... but I think this way is much easier :D
EDIT: issue with button naming, need more tweaks, but not important feature

[elliotcondon]

Hi @isuke01

Thank you very much for your contribution here. I too have thought about using a click event listener, but ultimately scrapped the idea as it would not comply with Gutenberg's keyboard accessibility features.

If you are able to find a more holistic way to listen for (and prevent) the "save process", this would be greatly appreciated!

[isuke01]

Thanks @elliotcondon,

yes, I totally forgot about that thing! I'll look into it.

EDIT:
Actually I can't solve it using subscribe events, it is too late to prevent a save.
For now I could not find any better solution, since there is no pre_save hook or something for Gutenberg yet. When they fix that ... if they fix that we can update it :D

Anyway I have solved that thing using wp.keycode api.
Her is my a bit updated code (this example also contain example of required Featured image)`

function enhancement_gutenberg_isu(){
    $imageIsRequired = __('Featured image is required', 'wpvue')
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
             //Make sure wp.Dom is ready
            wp.domReady(function(){
                //TODO: Check if it is post type where we want to use this logc
                //check if there is data
                if(!wp.data) return null;
                var removeElement = wp.data.dispatch( 'core/edit-post').removeEditorPanel
               
                //acf Custom Validation for Gutenberg  
                gutenbergWatchEventsSave()
            })

            /**
            * Watch events of Gutenberg
            */
            function gutenbergWatchEventsSave(){
                var postSaveButtonClasses = '.editor-post-publish-button';
                //Handle button
                $(document).on('click', postSaveButtonClasses , function(e){
                    saveValidations(e)
                })

                //Handle keyshorts
                document.addEventListener('keydown', function(e){
                    //https://developer.wordpress.org/block-editor/packages/packages-keycodes/
                    // remove other bubbling element in DOM
                    e.stopImmediatePropagation()
                    if(wp.keycodes.isKeyboardEvent.primary(e, 's')){
                        saveValidations(e)
                    }

                }, true);
            }

            /**
            * Just trigger validations required to save post
            */
            function saveValidations(e){
                e.stopPropagation()
                e.preventDefault()

                var hasImage = requiredFeaturedImage(['recipe', 'post', 'clinic'])
                if(hasImage){
                    acf_validate_fields();
                }
            }

            /**
            * Make featured image required
            */
            function requiredFeaturedImage($types){
                var isImage = true;
                var editor = wp.data.select('core/editor')
                var currentPostType = editor.getCurrentPostType()

                if(~$types.indexOf(currentPostType)){
                    var featuredImage = editor.getEditedPostAttribute('featured_media');
                    if(!featuredImage  || featuredImage === 0){
                        //Remvoe previous notices
                        wp.data.dispatch( 'core/notices' ).removeNotice('REQUIRE_FEATURED_IMAGE');
                        wp.data.dispatch( 'core/editor' ).lockPostSaving( 'featuredImageIsRequired' );
                        wp.data.dispatch( 'core/notices' ).createErrorNotice( '<?php echo $imageIsRequired ?>', { id: 'REQUIRE_FEATURED_IMAGE', isDismissible: true}  );
                        isImage = false;
                        setTimeout(function() {
                            wp.data.dispatch( 'core/editor' ).unlockPostSaving( 'featuredImageIsRequired' );
                        }, 150);
                    }
                }
                return isImage;
            }

            /**
            * Gutenberg Save action trigger
            */
            function gutenbergSavePost(){
                var editor = wp.data.select('core/editor')
                if(editor.isEditedPostSaveable()){
                    if(!editor.isCurrentPostPublished() && ~['draft','auto-draft'].indexOf(editor.getEditedPostAttribute( 'status' ))){
                        //for some reason if post is draft we must update manually  post status
                        //otherwise post will be saved but not published;
                        wp.data.dispatch('core/editor').editPost({status: 'publish'})
                    }
                    wp.data.dispatch( 'core/editor' ).savePost()
                }
            }

            /**
            * ACF Validation
            */
            function acf_validate_fields(){
                var editorInfo = wp.data.select( 'core/editor' );
                var isPublishSidebarOpened = wp.data.select('core/edit-post').isPublishSidebarOpened();

                wp.data.dispatch( 'core/editor' ).lockPostSaving( 'acfValidateFields' );

                return acf.validateForm({
                    form: jQuery('#editor'),
                    reset: true,
                    failure: function( $form, validator ){
                        var notice = validator.get('notice').data.text
                        wp.data.dispatch( 'core/notices' ).createErrorNotice( notice, { id: 'ACF_VALIDATION', isDismissible: true}  );
                        if(isPublishSidebarOpened){
                            wp.data.dispatch('core/edit-post').closePublishSidebar()
                        }
                    },
                    complete: function( $form, validator ){
                        
                        wp.data.dispatch( 'core/editor' ).unlockPostSaving( 'acfValidateFields' );
                    },
                    success: function(){
                        //remove notices if there are any from acf validation
                        wp.data.dispatch( 'core/notices' ).removeNotice('ACF_VALIDATION');
                        //save post if is ok to save
                        gutenbergSavePost()
                    }
                })
            }
        });
    </script>

add_action('admin_footer', 'enhancement_gutenberg_isu');

EDIT: wp.data check

[elliotcondon]

Hi @isuke01

Thanks for looking into the keyboard shortcut issue. I'll be sure to test out something similar.
Covering the "click" and "key" events should work for the most part, but I wonder if there are any other situations where the "save" function is called by WP core... perhaps when previewing, etc?

[isuke01]

Hi @elliotcondon

Actually one more save of post that should we take care is switch from any status to private but not all the way around. For some reason save is called if you switch from "Public" to "Private" only. It also display document alert, I have no clue why it is solved like that, looks strange.

Another thing. "Preview" it does not call save for current post, so no problem but I noticed Preview in this case is not saving any meta. (Tested on Posts, not custom CTP), maybe because fields are not register_meta, I don't know. Also functions related on save for $_POST are not gonna work. .... AHgghh F Gutenberg ;{
Edit: I did more tests, looks like even meta with register_meta and register in test are not saved, also auto save don't save any meta =,="

And about clicking "mod+s" shortcut to save, it works only when something is edited. But actually this does not work on ACF fields, so if you edit something inside ACF only, not in Gutenberg container, you're unable to save post using key commands. BUT! Since in my above function I'm not checking for isEditedPostDirty(), it solves this issue 😄

Would be nice to have pre_save_hook for Gutenberg but yet, I cant find solution for that.
Maybe someday! 😄

[elliotcondon]

Hi @isuke01

Thank you for all the extra info!

It looks like we are not the only ones looking for a solution to this problem. Here are some GithUb issues you might be interested in looking over / following:

• Add a hook for plugins to perform tasks once a post is updated but prior it is saved WordPress/gutenberg#15568
• Extensibility: Add a way for third parties to perform additional save validation WordPress/gutenberg#13413

I agree that the best case scenario would be a pre_save_hook for Gutenberg. I wonder if this is something that you might be able to help with? Your knowledge of the Gutenberg editor and API seem very strong.

If you have some free time, please read over those GitHub issues mentioned above, and let me know if you see anything that might be useful 😄.

[isuke01]

Hey @elliotcondon

Thanks, actually my first experience with Gutenberg was 4 days ago, and I just spend few hours on it ... and it was painfully (I hope they will fix docs at some point it is agrrggrr)😄 I just cant deliver to client something that does not work so I tried quick fix it.

Anyway I have find out Gutenberg is not saving meta fields during preview/autosave/auto-draft save. WordPress/gutenberg/#20755.

So basically until I find a way how to solve saving those meta for preview, Gutenberg is not usable for me :/ Thing is, without Gutenberg everything works fine.

Im out of time to solve this issue by now, I'll look into that issues as soon as I can find some time, but for next couple of days Im totally occupied, and simply I'll use classic editor instead for now :)

[ituki]

hi @isuke01

I was so in trouble, tried your code.
It may be a known problem for you,
Paragraph Does not work new line by below code.

                //Handle keyshorts
                document.addEventListener('keydown', function(e){
                    //https://developer.wordpress.org/block-editor/packages/packages-keycodes/
                    // remove other bubbling element in DOM
                    e.stopImmediatePropagation()
                    if(wp.keycodes.isKeyboardEvent.primary(e, 's')){
                        saveValidations(e)
                    }
                }, true);

[elliotcondon]

@altendorfme Thanks for the feedback!

[elliotcondon]

@todd-uams Please note this validation improvement is not for "ACF Blocks". The code mentioned above will validate metaboxes.

[todd-uams]

Sorry for the mixup. The code did work for metaboxes on a Gutenberg page. Thanks

[todd-uams]

@elliotcondon I'll look at @benfrem 's code for a potential solution for ACF Blocks.

[elliotcondon]

@todd-uams Fantastic! Block validation will be coming soon, but only after metabox validation is considered stable :)

[ggedde]

I can confirm that a mixture of the code above works great when using 'edit' mode. It also works when in 'preview' mode and editing a specific block, but only validates that block and not the others. Thanks!

However, I am still looking for a way to get this working in 'preview' mode for all blocks. @elliotcondon I know your working on a solution (Thank You), but since we don't have an ETA
is there any way that I can get all the fields and their values with the ACF JS API or with Gutengergs JS API so I can just perform a basic validation and loop through them and if the 'required' attribute is set and value is empty then I can set a notice. I am not really needing a way to open the block settings. I think I will just use some css to add a red outline around the wp-block that has the error so the user knows which block to edit. So a way to reference the error and block would be helpful. The locking and preventing updates and publish is working. I just need to validate all of the fields, but I find it difficult to figure out the gutenberg api and what options there are.

[ggedde]

@elliotcondon I have downloaded v5.9.0-beta1.

The Preview mode Validation does work, but only when viewing the block being edited and when the Settings window is open. If I start to edit another block with passing validation and Publish the Page no Validation Errors get reported for the blocks that do not pass Validation. Also if I close the Settings window then no Validation errors get show. It should still report the Validation Errors and prevent the post from being updated.

[EDITED]
Never mind, I forgot to remove my custom acf validation code :(
v5.9.0-beta1 Validation does not work for me at all. No Validation errors are getting reported not even in 'edit' mode.

Also I think when there is an error on a block there should be a class added to the "wp-block" tag or the "acf-block-component" tag like 'acf-validation-error' and some sort of error indicator like a red outline etc. That way the User can see which blocks have errors and click on them to resolve. Probably only needed for 'preview' mode or 'auto' mode when block is in preview state. I am writing a custom class for my clients so I will most likely override the styles for my own and that is why a css class is important for me.

Let me know if there is a better place to report issues for v5.9.0-beta
Thanks

[elliotcondon]

Hi @ggedde. Please note the "Gutenberg Validation" feature in 5.9.0-beta1 is for metaboxes only - not "ACF Blocks".

Block validation will be coming soon in a future update 👍.

[andjoen]

@elliotcondon Any updates on block validation?

[elliotcondon]

Hi @andjoen 👋. Block validation is planned or a "post 5.9" release. For now, we will focus on just the entire post/page validation. Looking forward to the challenge when we do dip our toes into that pond!

[ggedde]

@elliotcondon

Block validation is planned or a "post 5.9" release

I have seen a few updates to 5.9, but nothing mentions this issue. Do you have an idea as to when you might start working on this issue for 5.9.x.

I am willing to test anything if needed.
Thanks

[elliotcondon]

Thanks @ggedde. No updates just yet.

[StudioAl]

Just to clarify, I am seeing neither block validation nor "entire post/page validation" working as of 5.10.x. Is that correct? Is this still actively being worked on? Thanks for all your hard work so far.

[mattgrshaw]

@StudioAl that's strange. We don't yet have block validation, but regular validation (with fields attached to the post/page itself) should work fine. Could you please share an export of a field group where post/page validation doesn't work for you?

[StudioAl]

@mattgrshaw, yes, strange — I just went back to verify and, and now the post/page field validation is working. I'm not sure what the issue was for me at the time that prevented it from working — I was definitely on the latest version of the plugin.

[RiskyVector]

Still no solution for this. Has WordPress said anything about this? It's a very important feature...

I'll dig through the code and see how the post/page field validation is implemented, and see if there's something we can do about the block editor itself.

[alexandre-tobia]

Hi @elliotcondon any updates about this ?

We are talking about this bug since 2019 and still not working it's a major issue. Your page https://www.advancedcustomfields.com/resources/known-issues/ talking about it say : "Status: Similar to above, this feature is no longer working and is scheduled to be fixed in ACF 5.8." We are in 5.12.2... what's going on ?

I know Gutenberg is very involved in this problem and I know you haven't found an "elegant" solution but can't you make a temporary "less elegant" fix in the mean time?

I don't want to sound like an angry guy, I can understand that some things take time, but we are talking about more than 2 years on a major problem.

Thanks

[isuke01]

@alexandre-tobia I think the issue is "I know Gutenberg is very involved in this problem" that sentence is not true. The Gutenberg team is holding this back, they have to fix issue in their end ;/
You can always try temp solution that are proposed in this threat, they are pretty good described I think so just try one of those temp solutions :)
I see you are angry, like w all, but this is GT issue/limitation at this point not ACF, and I bet if @elliotcondon could fix that in stable-good way, he would have done it already :)

[alexandre-tobia]

@isuke01 Thanks for your answer Sorry if my message was rude, not intented. Why not add thoses "temp" solution in the acf plugin ? it's better than nothing, no ? I don't see any update from gutenberg workign on this since 2020, so if acf don't include this temp solution i think we will never reach the end of the tunnel...

[ggedde]

Sorry for the rant,
If this is an issue mainly with Gutenberg, can we at least get some feedback on the conversations that are going on with Gutenberg's team and ACF's team. Can you provide a link to the Gutenberg Issue for this as I am not finding it? Or other links that we can use for reference and possibly support? What is the ETA for a solution?

@benbowler, have you found a solid solution yet?

it seems like this Issue is just getting ignored and it is a vital problem in my opinion. My client's keep asking, can you make that field required? Then I have to give them this long explanation. It honestly sounds like, to them, that I don't know what I am doing. "Why can't you just make the field required?" they say, and I don't blame them. I have already been looking at different solutions and have started migrating to building custom Gutenberg Blocks, but they are much more difficult to manage and create. The main issue with them is that they are much more difficult for clients to manage. It almost is like they need to go through a dedicated course to learn it. Not to mention keeping up to date on all the changes that happen on every WP update. It doesn't work for most clients.

ACF Block's is the way to go and I appreciate the work and dedication that Elliot has provided and that Delicious Brains has taken on. We just need this last feature to tie it all in.

I am willing to test / research / and work on this issue with others to find a solid solution. With the Temp solutions above it gets us 70% of the way there. I have worked on this, but I am not familiar with ACF's and Gutenberg's underlining js code and need help with getting each block's fields and submitted values and checking for required and conditionals, then reference the ACF field settings. I am able to do this with an open edited ACF block, but having a difficult time with the others. If you have some insights to that, then please let me know.

Thanks

[TheDesignerXD]

Any update? Why has Wordpress not added a simple hook before saving forms on the admin side that ACF can hook into? This seems like a simple simple simple fix. And over 4 years of waiting seems like a ridiculous amount of time to wait for such a small addition. During this time we have seen both ACF, and Wordpress go through countless updates, and new {insert year here} themes (that nobody I know uses) but no new simple little hook prior to saving forms on the admin side. For ACF being one of Wordpress' #1 plugins it is really surprising to me how little time or effort they put into helping ACF succeed when it was something WP did that borked the whole thing.

[christianMiguez]

Any of you have solved or hacked this? I'm trying to require a field if a block is present, but validation doesn't work

[627426p]

Is there any update regarding this issue? What is the current status? Does it still lie with wordpress/core or gutenberg? What are the relevant tickets/issues so we can add our support there?

Its absolutely incomprehensible why this critical issue doesnt have at least a functioning workaround after more than 4 years.

[landwire]

Just encountered that issue. Anyone has a solution for this?

[MattOndo]

Also just came across this issue, and it's a pretty big one. I'm surprised it's still lingering...

[eballeste]

about 5 years later, it's finally happening!

[isuke01]

Isn't it fixed yet?
Wasn't this introduced into ACF #113 (comment) ?
I'll check it tomorrow If I got time :D