Skip to content

Form Blocks: Ensure fixtures are generated correctly #56590

@t-hamano

Description

@t-hamano

Description

Note: This issue was discovered in #56507 when trying to add deprecation to the Input Field block.

There are four blocks related to the form:

  • Form (core/form)
  • Input Field (core/form-input)
  • Form Submission Notification (core/form-submission-notification)
  • Form Submit Button (core/form-submit-button)

There are two fixture files for these blocks:

However, in the json file that represents the expected representation, it is recognized as a core/missing block.


As a result, deprecation will not work and serialized markup will not be generated correctly.

The cause of this is due to various factors, and I believe that the following two issues need to be resolved in order to generate the fixture file correctly.

Full post content test does not register experimental blocks

In the full-content.test.js file, all core blocks are registered via registerCoreBlocks(). However, the blocks related to the form are experimental and will not be registered unless you explicitly opt-in in the Experimental settings.

As a result, the fixture test treats it as a non-existent block, which is the first cause.

We need to somehow register blocks related to the form that are not registered via registerCoreBlocks() in our fixture tests.

The behavior of the save function of the Input Field block is different in the fixture test

The Input Field block attempts to generate a name attribute from its label in the save() function when the name attribute does not exist. This is handled via the getNameFromLabel() function. Inside this function, we create a dummy element that contains the label string, and generate an appropriate name attribute from its innerText.

However, if we assume that the Input Field block is registered in the fixture test, this process will result in an error.

TypeError: Cannot read properties of undefined (reading 'replace')

  26 |      // Get the slug.
  27 |      return (
> 28 |              removeAccents( dummyElement.innerText )
     |                           ^
  29 |                      // Convert anything that's not a letter or number to a hyphen.
  30 |                      .replace( /[^\p{L}\p{N}]+/gu, '-' )
  31 |                      // Convert to lowercase

If we don't generate a dummy element and replace it with logic that removes the HTML tag, the fixture test should pass.

Step-by-step reproduction instructions

N/A

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions