Maybe (actually, quite probably) I’m doing it wrong, but so far I haven’t been able to coax any field to be required while using the Gutenberg editor (WordPress 5 Beta 4), if the fieldset position is not defined as “normal, below content”.
Is there a way to make a field required if it is to be used in a Gutenberg Block, or as classic metadata in the somewhat more gutenbergy “side” position?
(BTW, this might complicate things, but being old-fashioned about these kind of things I wouldn’t mind a way to tell an ACF Block to save its data to wp_postmeta instead of the data array inside the blocks html comment).
did you maybe find the solution I have the exact same problem, required fields no longer required with Gutenberg enabled
Besides putting the required field in the classic below-the-post-content position, nope.
Haven’t tested ACF Pro 5.8 Beta 3 yet, but I’m not really expecting this to be fixed anyway.
thank you philby, I actually thought “classic” meant switching back to classic editor lol, I am going to give the below content position for the fields a try again, thank you!
I can’t see this as an open/resolved issue on Github.
https://github.com/AdvancedCustomFields/acf/issues
Have a look through the issues. If it’s not on there, might be worth submitting it?
The solution I came up with as a fix was to use jquery to disable the publish / update button if the forms on the page don’t validate. It’s only briefly tested so I wouldn’t recommend on a production site without testing.
Make sure that this script is enqueued via file or is in <script> tags in the admin footer on the gutenberg edit page.
jQuery(document).ready(function($) {
$(window).bind("load", function () {
switch_publish_button_on_valid()
});
$("form :input").change(function() {
switch_publish_button_on_valid();
});
function switch_publish_button_on_valid(){
if($('form.metabox-location-normal')[0].checkValidity()){
$('button.is-primary').removeAttr('disabled');
} else {
$('button.is-primary').attr('disabled', 'disabled');
}
}
});
Has anyone found another solution to this?
@philby what did you mean by “Besides putting the required field in the classic below-the-post-content position” ?
My ACF fields are below the post editor (I understand that the fields *inside* of Gutenberg blocks can’t be required https://github.com/AdvancedCustomFields/acf/issues/90). But still when I attempt to publish, I get no errors if the required fields are blank.
Is that the issue you were experiencing as well?
I just had our QA report this same issue. I’ll check the GitHub, hopefully this has a resolution. I hat thinking about having to go back to not using the Block Editor.
This is a known issue when using gutenberg editor. As far as I know there is no fix yet from ACF and waiting on any kind of a solution from WP. There is another topic around here somewhere that has the link to the list
You can also check here https://www.advancedcustomfields.com/resources/known-issues/
And I found the other link as well https://github.com/WordPress/gutenberg/issues/12692
Are there any updates or workarounds available? The “known-issues” page says in “Field validation does not work in Gutenberg” that there is a fix scheduled for ACF 5.8. but I still got the same issue.
Bump — just curious if there’s been any progress on this deficiency?
Thanks!
Still no solution for this. It’s kind of an important feature, eh?
I am not sure why this is still an issue and can only apologise for not requiring (pardon the pun) this feature earlier.
The issue is due to the Validation not accepting anything but directly assigned fields, it ignores acf_blocks_{UNIQUE_ID}.
So… Until ACF Dev updates the core code, add the below snippet to functions.php as a workaround. DEMO
add_action( 'acf/validate_save_post', '_validate_save_post', 5 );
function _validate_save_post() {
// bail early if no $_POST
$acf = false;
foreach($_POST as $key => $value) {
if (strpos($key, 'acf') === 0) {
if (! empty( $_POST[$key] ) ) {
acf_validate_values( $_POST[$key], $key);
}
}
}
}
@seriphyn Just trying out your solution, but it doesn’t appear to be working… Do you know if this is still a viable solution with the latest ACF and WordPress? Thanks!
Edit – I’ve found it is working for Publish/Update – but not Save Draft. Is there a different hook available for saving drafts?
It seems this is the expected behaviour for ACF, so it does not validate drafts regardless. Thanks for posting a solution, much appreciated.
@seriphyn Amazing thank you – but don’t go mad – being able to finally use required fields in GB blocks is good enough for me.
I am curious though – this looks like a pretty simple solution for a bug that’s been open 4 years – yet it only exists on this page, and hasn’t gained much attention. Am I missing something? I don’t understand why this hasn’t been added to core yet?
Also, can you explain what $acf = false;
does?
Thanks!
I am not sure why it has yet to be fixed in core,
Also the $acf = false;
is a oversight, I have a slighlty different implementation myself and forgot to remove when copying it over
@pamplemousse instead of using acf/validate_save_post
as the hook use acf/validate_value
unstested but let me know
@seriphyn Sorry for the late reply – just tested, but unfortunately is doesn’t work – for drafts or published pages… But I really appreciate you looking into this for me.
FYI – I queried the efficacy of your function with ACF support, and they said:
We’re currently looking at how we can implement validation in Gutenberg Blocks either by ourselves, or by contributing to Gutenberg as we agree we’ve had to wait too long to be able to implement this. There are many upcoming changes to Gutenberg’s saving system we hope will be hook into
The example code is too broad, and affects non-gutenberg content too, and happens too late in the chain than we’d expect, which is why we’re aiming to get a solution that works properly in the block editor – at the point the rest of page validation occurs.
@bitlife Yes, you can make a field required when using the Gutenberg editor. To do this, you can use the isRequired property of the field configuration object.
For example, if you are using the TextControl component to create a text field, you can set the isRequired property to true like this:
import { TextControl } from '@wordpress/components';
function MyTextControl( { label, onChange } ) {
return (
<TextControl
label={ label }
onChange={ onChange }
isRequired
/>
);
}
This will make the text field required and display an error message if the user tries to submit the form without entering a value.
If you are using Advanced Custom Fields (ACF) to create your fields, you can also make a field required by setting the required parameter to true when you register the field. For example:
acf_add_local_field(array(
'key' => 'field_123',
'label' => 'My Field',
'name' => 'my_field',
'type' => 'text',
'required' => true,
));
As for saving the data to wp_postmeta instead of the blocks HTML comment, you can use the save callback function when registering your block. This function allows you to specify how the block data should be saved when the post is updated.
Here is an example of how you could use the save callback function to save the block data to wp_postmeta:
register_block_type( 'my-plugin/my-block', array(
'save' => function( $attributes ) {
update_post_meta( $attributes['postId'], 'my_block_data', $attributes );
},
) );
Hey folks, we’ve shipped validation support for ACF Blocks fields ACF PRO 6.3 🎉
https://www.advancedcustomfields.com/blog/acf-6-3-0-released/
The topic ‘Required fields in Gutenberg editor’ is closed to new replies.
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!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.