Support

Account

Register Login

Home › Forums › Gutenberg › Required fields in Gutenberg editor

Solving

Required fields in Gutenberg editor

  • 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!

  • Would also be interested in a solution for that issue 🙂

  • 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);
            }
        }
    }
}

  • https://github.com/WordPress/gutenberg/issues/1269223
    Thanks for sharing

  • @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.

  • Let me see if I can find a work around for you 🙂

  • @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 );
  },
) );
Viewing 22 posts - 1 through 22 (of 22 total)

The topic ‘Required fields in Gutenberg editor’ is closed to new replies.