diff --git a/packages/block-library/src/form-input/deprecated.js b/packages/block-library/src/form-input/deprecated.js new file mode 100644 index 00000000000000..bb1fdf6e40204d --- /dev/null +++ b/packages/block-library/src/form-input/deprecated.js @@ -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 ; + } + + /* eslint-disable jsx-a11y/label-has-associated-control */ + return ( + + ); + /* eslint-enable jsx-a11y/label-has-associated-control */ + }, +}; + +const deprecated = [ v1 ]; + +export default deprecated; diff --git a/packages/block-library/src/form-input/edit.js b/packages/block-library/src/form-input/edit.js index 0742c22c22f429..0b34c70fbad2d7 100644 --- a/packages/block-library/src/form-input/edit.js +++ b/packages/block-library/src/form-input/edit.js @@ -59,7 +59,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) { ) } - + ; } - /* eslint-disable jsx-a11y/label-has-associated-control */ return ( - +
+ { /* eslint-disable jsx-a11y/label-has-associated-control */ } + + { /* eslint-enable jsx-a11y/label-has-associated-control */ } +
); - /* eslint-enable jsx-a11y/label-has-associated-control */ } diff --git a/test/integration/fixtures/blocks/core__form-input.html b/test/integration/fixtures/blocks/core__form-input.html index f30d44a2503d20..33f1fe88c2c6a1 100644 --- a/test/integration/fixtures/blocks/core__form-input.html +++ b/test/integration/fixtures/blocks/core__form-input.html @@ -1,3 +1,3 @@ - +
diff --git a/test/integration/fixtures/blocks/core__form-input.parsed.json b/test/integration/fixtures/blocks/core__form-input.parsed.json index f92379b595276f..5470c653c403b5 100644 --- a/test/integration/fixtures/blocks/core__form-input.parsed.json +++ b/test/integration/fixtures/blocks/core__form-input.parsed.json @@ -3,9 +3,9 @@ "blockName": "core/form-input", "attrs": {}, "innerBlocks": [], - "innerHTML": "\n\n", + "innerHTML": "\n
\n", "innerContent": [ - "\n\n" + "\n
\n" ] } ] diff --git a/test/integration/fixtures/blocks/core__form-input.serialized.html b/test/integration/fixtures/blocks/core__form-input.serialized.html index f30d44a2503d20..33f1fe88c2c6a1 100644 --- a/test/integration/fixtures/blocks/core__form-input.serialized.html +++ b/test/integration/fixtures/blocks/core__form-input.serialized.html @@ -1,3 +1,3 @@ - +
diff --git a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.html b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.html new file mode 100644 index 00000000000000..08ea6618386200 --- /dev/null +++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.html @@ -0,0 +1,6 @@ + + + diff --git a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.json b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.json new file mode 100644 index 00000000000000..fee4df284f1156 --- /dev/null +++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.json @@ -0,0 +1,15 @@ +[ + { + "name": "core/form-input", + "isValid": true, + "attributes": { + "type": "text", + "label": "Label", + "inlineLabel": false, + "required": false, + "value": "", + "visibilityPermissions": "all" + }, + "innerBlocks": [] + } +] diff --git a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.parsed.json b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.parsed.json new file mode 100644 index 00000000000000..645337cbfdb4a1 --- /dev/null +++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.parsed.json @@ -0,0 +1,11 @@ +[ + { + "blockName": "core/form-input", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\n", + "innerContent": [ + "\n\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.serialized.html new file mode 100644 index 00000000000000..33f1fe88c2c6a1 --- /dev/null +++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.serialized.html @@ -0,0 +1,3 @@ + +
+ diff --git a/test/integration/fixtures/blocks/core__form.html b/test/integration/fixtures/blocks/core__form.html index f443172601a3b5..825389eb75ecd3 100644 --- a/test/integration/fixtures/blocks/core__form.html +++ b/test/integration/fixtures/blocks/core__form.html @@ -1,19 +1,19 @@
- - + +
- - + +
- - + +
- - + +
diff --git a/test/integration/fixtures/blocks/core__form.parsed.json b/test/integration/fixtures/blocks/core__form.parsed.json index fb2daff4a47411..e33849b5be5041 100644 --- a/test/integration/fixtures/blocks/core__form.parsed.json +++ b/test/integration/fixtures/blocks/core__form.parsed.json @@ -5,52 +5,44 @@ "innerBlocks": [ { "blockName": "core/form-input", - "attrs": { - "label": "Name", - "required": true - }, + "attrs": {}, "innerBlocks": [], - "innerHTML": "\n\n", + "innerHTML": "\n
\n", "innerContent": [ - "\n\n" + "\n
\n" ] }, { "blockName": "core/form-input", "attrs": { - "type": "email", - "label": "Email", - "required": true + "type": "email" }, "innerBlocks": [], - "innerHTML": "\n\n", + "innerHTML": "\n
\n", "innerContent": [ - "\n\n" + "\n
\n" ] }, { "blockName": "core/form-input", "attrs": { - "type": "url", - "label": "Website" + "type": "url" }, "innerBlocks": [], - "innerHTML": "\n\n", + "innerHTML": "\n
\n", "innerContent": [ - "\n\n" + "\n
\n" ] }, { "blockName": "core/form-input", "attrs": { - "type": "textarea", - "label": "Comment", - "required": true + "type": "textarea" }, "innerBlocks": [], - "innerHTML": "\n\n", + "innerHTML": "\n
\n", "innerContent": [ - "\n\n" + "\n
\n" ] }, { diff --git a/test/integration/fixtures/blocks/core__form.serialized.html b/test/integration/fixtures/blocks/core__form.serialized.html index 9bfff780f50dbf..e3209102ce20be 100644 --- a/test/integration/fixtures/blocks/core__form.serialized.html +++ b/test/integration/fixtures/blocks/core__form.serialized.html @@ -1,18 +1,18 @@ - +
- +
- +
- +