Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Input Field Block: Use
useblockProps hook in save function (#56507)
* Input Field Block: Use blockProps hook in save function * Update fixture files * Update packages/block-library/src/form-input/deprecated.js Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> --------- Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
- Loading branch information
1 parent
dc95863
commit 0456925
Showing
14 changed files
with
233 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import classNames from 'classnames'; | ||
| import removeAccents from 'remove-accents'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| RichText, | ||
| __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, | ||
| __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, | ||
| } from '@wordpress/block-editor'; | ||
| import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; | ||
|
|
||
| const getNameFromLabelV1 = ( content ) => { | ||
| return ( | ||
| removeAccents( stripHTML( content ) ) | ||
| // Convert anything that's not a letter or number to a hyphen. | ||
| .replace( /[^\p{L}\p{N}]+/gu, '-' ) | ||
| // Convert to lowercase | ||
| .toLowerCase() | ||
| // Remove any remaining leading or trailing hyphens. | ||
| .replace( /(^-+)|(-+$)/g, '' ) | ||
| ); | ||
| }; | ||
|
|
||
| // Version without wrapper div in saved markup | ||
| // See: https://github.com/WordPress/gutenberg/pull/56507 | ||
| const v1 = { | ||
| attributes: { | ||
| type: { | ||
| type: 'string', | ||
| default: 'text', | ||
| }, | ||
| name: { | ||
| type: 'string', | ||
| }, | ||
| label: { | ||
| type: 'string', | ||
| default: 'Label', | ||
| selector: '.wp-block-form-input__label-content', | ||
| source: 'html', | ||
| __experimentalRole: 'content', | ||
| }, | ||
| inlineLabel: { | ||
| type: 'boolean', | ||
| default: false, | ||
| }, | ||
| required: { | ||
| type: 'boolean', | ||
| default: false, | ||
| selector: '.wp-block-form-input__input', | ||
| source: 'attribute', | ||
| attribute: 'required', | ||
| }, | ||
| placeholder: { | ||
| type: 'string', | ||
| selector: '.wp-block-form-input__input', | ||
| source: 'attribute', | ||
| attribute: 'placeholder', | ||
| __experimentalRole: 'content', | ||
| }, | ||
| value: { | ||
| type: 'string', | ||
| default: '', | ||
| selector: 'input', | ||
| source: 'attribute', | ||
| attribute: 'value', | ||
| }, | ||
| visibilityPermissions: { | ||
| type: 'string', | ||
| default: 'all', | ||
| }, | ||
| }, | ||
| supports: { | ||
| className: false, | ||
| anchor: true, | ||
| reusable: false, | ||
| spacing: { | ||
| margin: [ 'top', 'bottom' ], | ||
| }, | ||
| __experimentalBorder: { | ||
| radius: true, | ||
| __experimentalSkipSerialization: true, | ||
| __experimentalDefaultControls: { | ||
| radius: true, | ||
| }, | ||
| }, | ||
| }, | ||
| save( { attributes } ) { | ||
| const { type, name, label, inlineLabel, required, placeholder, value } = | ||
| attributes; | ||
|
|
||
| const borderProps = getBorderClassesAndStyles( attributes ); | ||
| const colorProps = getColorClassesAndStyles( attributes ); | ||
|
|
||
| const inputStyle = { | ||
| ...borderProps.style, | ||
| ...colorProps.style, | ||
| }; | ||
|
|
||
| const inputClasses = classNames( | ||
| 'wp-block-form-input__input', | ||
| colorProps.className, | ||
| borderProps.className | ||
| ); | ||
| const TagName = type === 'textarea' ? 'textarea' : 'input'; | ||
|
|
||
| if ( 'hidden' === type ) { | ||
| return <input type={ type } name={ name } value={ value } />; | ||
| } | ||
|
|
||
| /* eslint-disable jsx-a11y/label-has-associated-control */ | ||
| return ( | ||
| <label | ||
| className={ classNames( 'wp-block-form-input__label', { | ||
| 'is-label-inline': inlineLabel, | ||
| } ) } | ||
| > | ||
| <span className="wp-block-form-input__label-content"> | ||
| <RichText.Content value={ label } /> | ||
| </span> | ||
| <TagName | ||
| className={ inputClasses } | ||
| type={ 'textarea' === type ? undefined : type } | ||
| name={ name || getNameFromLabelV1( label ) } | ||
| required={ required } | ||
| aria-required={ required } | ||
| placeholder={ placeholder || undefined } | ||
| style={ inputStyle } | ||
| /> | ||
| </label> | ||
| ); | ||
| /* eslint-enable jsx-a11y/label-has-associated-control */ | ||
| }, | ||
| }; | ||
|
|
||
| const deprecated = [ v1 ]; | ||
|
|
||
| export default deprecated; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| <!-- wp:form-input --> | ||
| <label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/></label> | ||
| <div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/></label></div> | ||
| <!-- /wp:form-input --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
test/integration/fixtures/blocks/core__form-input.serialized.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| <!-- wp:form-input --> | ||
| <label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/></label> | ||
| <div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/></label></div> | ||
| <!-- /wp:form-input --> |
6 changes: 6 additions & 0 deletions
6
test/integration/fixtures/blocks/core__form-input__deprecated-v1.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <!-- wp:form-input --> | ||
| <label class="wp-block-form-input__label"> | ||
| <span class="wp-block-form-input__label-content">Label</span> | ||
| <input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/> | ||
| </label> | ||
| <!-- /wp:form-input --> |
15 changes: 15 additions & 0 deletions
15
test/integration/fixtures/blocks/core__form-input__deprecated-v1.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| [ | ||
| { | ||
| "name": "core/form-input", | ||
| "isValid": true, | ||
| "attributes": { | ||
| "type": "text", | ||
| "label": "Label", | ||
| "inlineLabel": false, | ||
| "required": false, | ||
| "value": "", | ||
| "visibilityPermissions": "all" | ||
| }, | ||
| "innerBlocks": [] | ||
| } | ||
| ] |
11 changes: 11 additions & 0 deletions
11
test/integration/fixtures/blocks/core__form-input__deprecated-v1.parsed.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| [ | ||
| { | ||
| "blockName": "core/form-input", | ||
| "attrs": {}, | ||
| "innerBlocks": [], | ||
| "innerHTML": "\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<input class=\"wp-block-form-input__input\" type=\"text\" name=\"label\" aria-required=\"false\"/>\n</label>\n", | ||
| "innerContent": [ | ||
| "\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<input class=\"wp-block-form-input__input\" type=\"text\" name=\"label\" aria-required=\"false\"/>\n</label>\n" | ||
| ] | ||
| } | ||
| ] |
3 changes: 3 additions & 0 deletions
3
test/integration/fixtures/blocks/core__form-input__deprecated-v1.serialized.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <!-- wp:form-input --> | ||
| <div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/></label></div> | ||
| <!-- /wp:form-input --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
0456925There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Flaky tests detected in 0456925.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.
🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7179248227
📝 Reported issues:
/test/e2e/specs/site-editor/font-library.spec.js