WP Consent Checkbox

A consent checkbox block for WordPress forms. Blocks form submission if unchecked, with conditional visibility based on another field's value.

Files

Block: wp-cb-block/consent-checkbox

Registered via register_block_type() in wp-cb-block.php:44-67.

Attributes

Behaviour

• If conditionalField is empty → the checkbox always shows.
• If conditionalField is set → the checkbox only appears when a matching input exists in the same form and has a non-empty value.
• The block must be placed inside a <form> element for validation to work.
• On form submit, if the checkbox is unchecked → submission is blocked and an error message is shown.

Architecture

Server-side rendering (wp-cb-block.php:69-97)

wp_cb_block_render() runs when the block is output on the frontend:

1. Reads conditionalField from attributes.
2. If conditionalField is set, adds data-conditional-field attribute to the wrapper div.
3. Outputs a checkbox with name="wp-cb-consent" and required.
4. Includes a hidden .wp-cb-block-error div for the JS error message.

REST API validation (wp-cb-block.php:99-120)

Hooks into rest_pre_dispatch and intercepts POST requests that include wp-cb-consent. If the value is empty, returns a WP_Error with status 400.

Traditional POST validation (wp-cb-block.php:122-139)

Hooks into wp and checks $_POST['wp-cb-consent'] on traditional form submissions. Calls wp_die() with a 400 status if consent is missing.

Client-side validation (assets/script.js)

On DOMContentLoaded:

1. Finds all .wp-block-wp-cb-block-consent-checkbox blocks.
2. If the block has no data-conditional-field → no conditional logic runs; the block stays visible.
3. If conditionalField is set:
   • If no matching input exists in the form → the block is hidden.
   • Otherwise, listens for input/change events on that field to toggle visibility based on its value.
4. On form submit:
   • If the block is hidden → skips validation.
   • If the checkbox is unchecked → prevents submission, shows .wp-cb-block-error.
5. Hides the error when the user checks the box.

Styling (assets/style.css)

Minimal styles: spacing, inline-flex label layout, red error text. Works with any theme.

How to test

Using the block editor

1. Create or edit a page in the block editor.
2. Add a Form block (core/form) or wrap content in a Group block and manually add <form> tags via the Custom HTML block.
3. Inside the form area, add the Consent Checkbox block.
4. Set the Conditional Field attribute to the name or id of another input in the same form (e.g., email).
5. Add a submit button.
6. Publish and visit the page:
   • The checkbox is hidden until the conditional field has a value.
   • Submitting without checking the box shows the error.

Using the demo page template

A custom page template page-consent-demo.php was created in the theme directory. It wraps page content in a <form> with a submit button, making it possible to test the block even in Full Site Editing themes.

To create a test page:

1. Go to Pages → Add New in the admin.
2. In the editor, add:
   • A Custom HTML block with an input, e.g.:

     <label for="email">Email:</label>
     <input type="email" id="email" name="email" placeholder="Enter your email">

   • A Consent Checkbox block (with conditionalField set to email).
3. In the Page sidebar, under Template, select Consent Checkbox Demo.
4. Publish.

Frontend behaviour:

• On load, only the email field is visible. The consent checkbox and submit button are present but the checkbox is hidden.
• Type in the email field → the checkbox appears.
• Clear the field → the checkbox hides again.
• Click Submit without checking the box → the red error "You must agree to continue." appears and submission is blocked.
• Check the box and submit → the form submits.

Using WP-CLI

wp post create \
  --post_type=page \
  --post_title="Consent Test" \
  --post_content='<!-- wp:html --><label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="Enter your email"><!-- /wp:html --><!-- wp:wp-cb-block/consent-checkbox {"conditionalField":"email"} /-->' \
  --post_status=publish

Then set the template:

wp post meta update <ID> _wp_page_template page-consent-demo.php

Translations

Available in languages/:

Strings: "Consent Checkbox", "A checkbox that must be checked to submit the form.", "I agree to the terms and conditions", "You must agree to continue.", "Consent Required".