@wordpress/block-library 8.20.0 → 8.21.0

package/build-module/form/variations.js

@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import { formSubmissionNotificationSuccess, formSubmissionNotificationError } from './utils.js';
+const variations = [{
+  name: 'comment-form',
+  title: __('Experimental Comment form'),
+  description: __('A comment form for posts and pages.'),
+  attributes: {
+    submissionMethod: 'custom',
+    action: '{SITE_URL}/wp-comments-post.php',
+    method: 'post',
+    anchor: 'comment-form'
+  },
+  isDefault: false,
+  innerBlocks: [['core/form-input', {
+    type: 'text',
+    name: 'author',
+    label: __('Name'),
+    required: true,
+    visibilityPermissions: 'logged-out'
+  }], ['core/form-input', {
+    type: 'email',
+    name: 'email',
+    label: __('Email'),
+    required: true,
+    visibilityPermissions: 'logged-out'
+  }], ['core/form-input', {
+    type: 'textarea',
+    name: 'comment',
+    label: __('Comment'),
+    required: true,
+    visibilityPermissions: 'all'
+  }], ['core/form-submit-button', {}]],
+  scope: ['inserter', 'transform'],
+  isActive: blockAttributes => !blockAttributes?.type || blockAttributes?.type === 'text'
+}, {
+  name: 'wp-privacy-form',
+  title: __('Experimental privacy request form'),
+  keywords: ['GDPR'],
+  description: __('A form torequest data exports and/or deletion.'),
+  attributes: {
+    submissionMethod: 'custom',
+    action: '',
+    method: 'post',
+    anchor: 'gdpr-form'
+  },
+  isDefault: false,
+  innerBlocks: [formSubmissionNotificationSuccess, formSubmissionNotificationError, ['core/paragraph', {
+    content: __('To request an export or deletion of your personal data on this site, please fill-in the form below. You can define the type of request you wish to perform, and your email address. Once the form is submitted, you will receive a confirmation email with instructions on the next steps.')
+  }], ['core/form-input', {
+    type: 'email',
+    name: 'email',
+    label: __('Enter your email address.'),
+    required: true,
+    visibilityPermissions: 'all'
+  }], ['core/form-input', {
+    type: 'checkbox',
+    name: 'export_personal_data',
+    label: __('Request data export'),
+    required: false,
+    visibilityPermissions: 'all'
+  }], ['core/form-input', {
+    type: 'checkbox',
+    name: 'remove_personal_data',
+    label: __('Request data deletion'),
+    required: false,
+    visibilityPermissions: 'all'
+  }], ['core/form-submit-button', {}], ['core/form-input', {
+    type: 'hidden',
+    name: 'wp-action',
+    value: 'wp_privacy_send_request'
+  }], ['core/form-input', {
+    type: 'hidden',
+    name: 'wp-privacy-request',
+    value: '1'
+  }]],
+  scope: ['inserter', 'transform'],
+  isActive: blockAttributes => !blockAttributes?.type || blockAttributes?.type === 'text'
+}];
+export default variations;
+//# sourceMappingURL=variations.js.map

package/build-module/form/variations.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__","formSubmissionNotificationSuccess","formSubmissionNotificationError","variations","name","title","description","attributes","submissionMethod","action","method","anchor","isDefault","innerBlocks","type","label","required","visibilityPermissions","scope","isActive","blockAttributes","keywords","content","value"],"sources":["@wordpress/block-library/src/form/variations.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n/**\n * Internal dependencies\n */\nimport {\n\tformSubmissionNotificationSuccess,\n\tformSubmissionNotificationError,\n} from './utils.js';\n\nconst variations = [\n\t{\n\t\tname: 'comment-form',\n\t\ttitle: __( 'Experimental Comment form' ),\n\t\tdescription: __( 'A comment form for posts and pages.' ),\n\t\tattributes: {\n\t\t\tsubmissionMethod: 'custom',\n\t\t\taction: '{SITE_URL}/wp-comments-post.php',\n\t\t\tmethod: 'post',\n\t\t\tanchor: 'comment-form',\n\t\t},\n\t\tisDefault: false,\n\t\tinnerBlocks: [\n\t\t\t[\n\t\t\t\t'core/form-input',\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\tname: 'author',\n\t\t\t\t\tlabel: __( 'Name' ),\n\t\t\t\t\trequired: true,\n\t\t\t\t\tvisibilityPermissions: 'logged-out',\n\t\t\t\t},\n\t\t\t],\n\t\t\t[\n\t\t\t\t'core/form-input',\n\t\t\t\t{\n\t\t\t\t\ttype: 'email',\n\t\t\t\t\tname: 'email',\n\t\t\t\t\tlabel: __( 'Email' ),\n\t\t\t\t\trequired: true,\n\t\t\t\t\tvisibilityPermissions: 'logged-out',\n\t\t\t\t},\n\t\t\t],\n\t\t\t[\n\t\t\t\t'core/form-input',\n\t\t\t\t{\n\t\t\t\t\ttype: 'textarea',\n\t\t\t\t\tname: 'comment',\n\t\t\t\t\tlabel: __( 'Comment' ),\n\t\t\t\t\trequired: true,\n\t\t\t\t\tvisibilityPermissions: 'all',\n\t\t\t\t},\n\t\t\t],\n\t\t\t[ 'core/form-submit-button', {} ],\n\t\t],\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) =>\n\t\t\t! blockAttributes?.type || blockAttributes?.type === 'text',\n\t},\n\t{\n\t\tname: 'wp-privacy-form',\n\t\ttitle: __( 'Experimental privacy request form' ),\n\t\tkeywords: [ 'GDPR' ],\n\t\tdescription: __( 'A form torequest data exports and/or deletion.' ),\n\t\tattributes: {\n\t\t\tsubmissionMethod: 'custom',\n\t\t\taction: '',\n\t\t\tmethod: 'post',\n\t\t\tanchor: 'gdpr-form',\n\t\t},\n\t\tisDefault: false,\n\t\tinnerBlocks: [\n\t\t\tformSubmissionNotificationSuccess,\n\t\t\tformSubmissionNotificationError,\n\t\t\t[\n\t\t\t\t'core/paragraph',\n\t\t\t\t{\n\t\t\t\t\tcontent: __(\n\t\t\t\t\t\t'To request an export or deletion of your personal data on this site, please fill-in the form below. You can define the type of request you wish to perform, and your email address. Once the form is submitted, you will receive a confirmation email with instructions on the next steps.'\n\t\t\t\t\t),\n\t\t\t\t},\n\t\t\t],\n\t\t\t[\n\t\t\t\t'core/form-input',\n\t\t\t\t{\n\t\t\t\t\ttype: 'email',\n\t\t\t\t\tname: 'email',\n\t\t\t\t\tlabel: __( 'Enter your email address.' ),\n\t\t\t\t\trequired: true,\n\t\t\t\t\tvisibilityPermissions: 'all',\n\t\t\t\t},\n\t\t\t],\n\t\t\t[\n\t\t\t\t'core/form-input',\n\t\t\t\t{\n\t\t\t\t\ttype: 'checkbox',\n\t\t\t\t\tname: 'export_personal_data',\n\t\t\t\t\tlabel: __( 'Request data export' ),\n\t\t\t\t\trequired: false,\n\t\t\t\t\tvisibilityPermissions: 'all',\n\t\t\t\t},\n\t\t\t],\n\t\t\t[\n\t\t\t\t'core/form-input',\n\t\t\t\t{\n\t\t\t\t\ttype: 'checkbox',\n\t\t\t\t\tname: 'remove_personal_data',\n\t\t\t\t\tlabel: __( 'Request data deletion' ),\n\t\t\t\t\trequired: false,\n\t\t\t\t\tvisibilityPermissions: 'all',\n\t\t\t\t},\n\t\t\t],\n\t\t\t[ 'core/form-submit-button', {} ],\n\t\t\t[\n\t\t\t\t'core/form-input',\n\t\t\t\t{\n\t\t\t\t\ttype: 'hidden',\n\t\t\t\t\tname: 'wp-action',\n\t\t\t\t\tvalue: 'wp_privacy_send_request',\n\t\t\t\t},\n\t\t\t],\n\t\t\t[\n\t\t\t\t'core/form-input',\n\t\t\t\t{\n\t\t\t\t\ttype: 'hidden',\n\t\t\t\t\tname: 'wp-privacy-request',\n\t\t\t\t\tvalue: '1',\n\t\t\t\t},\n\t\t\t],\n\t\t],\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) =>\n\t\t\t! blockAttributes?.type || blockAttributes?.type === 'text',\n\t},\n];\n\nexport default variations;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC;AACA;AACA;AACA,SACCC,iCAAiC,EACjCC,+BAA+B,QACzB,YAAY;AAEnB,MAAMC,UAAU,GAAG,CAClB;EACCC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAEL,EAAE,CAAE,2BAA4B,CAAC;EACxCM,WAAW,EAAEN,EAAE,CAAE,qCAAsC,CAAC;EACxDO,UAAU,EAAE;IACXC,gBAAgB,EAAE,QAAQ;IAC1BC,MAAM,EAAE,iCAAiC;IACzCC,MAAM,EAAE,MAAM;IACdC,MAAM,EAAE;EACT,CAAC;EACDC,SAAS,EAAE,KAAK;EAChBC,WAAW,EAAE,CACZ,CACC,iBAAiB,EACjB;IACCC,IAAI,EAAE,MAAM;IACZV,IAAI,EAAE,QAAQ;IACdW,KAAK,EAAEf,EAAE,CAAE,MAAO,CAAC;IACnBgB,QAAQ,EAAE,IAAI;IACdC,qBAAqB,EAAE;EACxB,CAAC,CACD,EACD,CACC,iBAAiB,EACjB;IACCH,IAAI,EAAE,OAAO;IACbV,IAAI,EAAE,OAAO;IACbW,KAAK,EAAEf,EAAE,CAAE,OAAQ,CAAC;IACpBgB,QAAQ,EAAE,IAAI;IACdC,qBAAqB,EAAE;EACxB,CAAC,CACD,EACD,CACC,iBAAiB,EACjB;IACCH,IAAI,EAAE,UAAU;IAChBV,IAAI,EAAE,SAAS;IACfW,KAAK,EAAEf,EAAE,CAAE,SAAU,CAAC;IACtBgB,QAAQ,EAAE,IAAI;IACdC,qBAAqB,EAAE;EACxB,CAAC,CACD,EACD,CAAE,yBAAyB,EAAE,CAAC,CAAC,CAAE,CACjC;EACDC,KAAK,EAAE,CAAE,UAAU,EAAE,WAAW,CAAE;EAClCC,QAAQ,EAAIC,eAAe,IAC1B,CAAEA,eAAe,EAAEN,IAAI,IAAIM,eAAe,EAAEN,IAAI,KAAK;AACvD,CAAC,EACD;EACCV,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAEL,EAAE,CAAE,mCAAoC,CAAC;EAChDqB,QAAQ,EAAE,CAAE,MAAM,CAAE;EACpBf,WAAW,EAAEN,EAAE,CAAE,gDAAiD,CAAC;EACnEO,UAAU,EAAE;IACXC,gBAAgB,EAAE,QAAQ;IAC1BC,MAAM,EAAE,EAAE;IACVC,MAAM,EAAE,MAAM;IACdC,MAAM,EAAE;EACT,CAAC;EACDC,SAAS,EAAE,KAAK;EAChBC,WAAW,EAAE,CACZZ,iCAAiC,EACjCC,+BAA+B,EAC/B,CACC,gBAAgB,EAChB;IACCoB,OAAO,EAAEtB,EAAE,CACV,4RACD;EACD,CAAC,CACD,EACD,CACC,iBAAiB,EACjB;IACCc,IAAI,EAAE,OAAO;IACbV,IAAI,EAAE,OAAO;IACbW,KAAK,EAAEf,EAAE,CAAE,2BAA4B,CAAC;IACxCgB,QAAQ,EAAE,IAAI;IACdC,qBAAqB,EAAE;EACxB,CAAC,CACD,EACD,CACC,iBAAiB,EACjB;IACCH,IAAI,EAAE,UAAU;IAChBV,IAAI,EAAE,sBAAsB;IAC5BW,KAAK,EAAEf,EAAE,CAAE,qBAAsB,CAAC;IAClCgB,QAAQ,EAAE,KAAK;IACfC,qBAAqB,EAAE;EACxB,CAAC,CACD,EACD,CACC,iBAAiB,EACjB;IACCH,IAAI,EAAE,UAAU;IAChBV,IAAI,EAAE,sBAAsB;IAC5BW,KAAK,EAAEf,EAAE,CAAE,uBAAwB,CAAC;IACpCgB,QAAQ,EAAE,KAAK;IACfC,qBAAqB,EAAE;EACxB,CAAC,CACD,EACD,CAAE,yBAAyB,EAAE,CAAC,CAAC,CAAE,EACjC,CACC,iBAAiB,EACjB;IACCH,IAAI,EAAE,QAAQ;IACdV,IAAI,EAAE,WAAW;IACjBmB,KAAK,EAAE;EACR,CAAC,CACD,EACD,CACC,iBAAiB,EACjB;IACCT,IAAI,EAAE,QAAQ;IACdV,IAAI,EAAE,oBAAoB;IAC1BmB,KAAK,EAAE;EACR,CAAC,CACD,CACD;EACDL,KAAK,EAAE,CAAE,UAAU,EAAE,WAAW,CAAE;EAClCC,QAAQ,EAAIC,eAAe,IAC1B,CAAEA,eAAe,EAAEN,IAAI,IAAIM,eAAe,EAAEN,IAAI,KAAK;AACvD,CAAC,CACD;AAED,eAAeX,UAAU"}

package/build-module/form/view.js

@@ -0,0 +1,40 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable no-undef */
+document.querySelectorAll('form.wp-block-form').forEach(function (form) {
+  // Bail If the form is not using the mailto: action.
+  if (!form.action || !form.action.startsWith('mailto:')) {
+    return;
+  }
+  const redirectNotification = status => {
+    const urlParams = new URLSearchParams(window.location.search);
+    urlParams.append('wp-form-result', status);
+    window.location.search = urlParams.toString();
+  };
+
+  // Add an event listener for the form submission.
+  form.addEventListener('submit', async function (event) {
+    event.preventDefault();
+    // Get the form data and merge it with the form action and nonce.
+    const formData = Object.fromEntries(new FormData(form).entries());
+    formData.formAction = form.action;
+    formData._ajax_nonce = wpBlockFormSettings.nonce;
+    formData.action = wpBlockFormSettings.action;
+    try {
+      const response = await fetch(wpBlockFormSettings.ajaxUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        body: new URLSearchParams(formData).toString()
+      });
+      if (response.ok) {
+        redirectNotification('success');
+      } else {
+        redirectNotification('error');
+      }
+    } catch (error) {
+      redirectNotification('error');
+    }
+  });
+});
+//# sourceMappingURL=view.js.map

package/build-module/form/view.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["document","querySelectorAll","forEach","form","action","startsWith","redirectNotification","status","urlParams","URLSearchParams","window","location","search","append","toString","addEventListener","event","preventDefault","formData","Object","fromEntries","FormData","entries","formAction","_ajax_nonce","wpBlockFormSettings","nonce","response","fetch","ajaxUrl","method","headers","body","ok","error"],"sources":["@wordpress/block-library/src/form/view.js"],"sourcesContent":["// eslint-disable-next-line eslint-comments/disable-enable-pair\n/* eslint-disable no-undef */\ndocument.querySelectorAll( 'form.wp-block-form' ).forEach( function ( form ) {\n\t// Bail If the form is not using the mailto: action.\n\tif ( ! form.action || ! form.action.startsWith( 'mailto:' ) ) {\n\t\treturn;\n\t}\n\n\tconst redirectNotification = ( status ) => {\n\t\tconst urlParams = new URLSearchParams( window.location.search );\n\t\turlParams.append( 'wp-form-result', status );\n\t\twindow.location.search = urlParams.toString();\n\t};\n\n\t// Add an event listener for the form submission.\n\tform.addEventListener( 'submit', async function ( event ) {\n\t\tevent.preventDefault();\n\t\t// Get the form data and merge it with the form action and nonce.\n\t\tconst formData = Object.fromEntries( new FormData( form ).entries() );\n\t\tformData.formAction = form.action;\n\t\tformData._ajax_nonce = wpBlockFormSettings.nonce;\n\t\tformData.action = wpBlockFormSettings.action;\n\n\t\ttry {\n\t\t\tconst response = await fetch( wpBlockFormSettings.ajaxUrl, {\n\t\t\t\tmethod: 'POST',\n\t\t\t\theaders: {\n\t\t\t\t\t'Content-Type': 'application/x-www-form-urlencoded',\n\t\t\t\t},\n\t\t\t\tbody: new URLSearchParams( formData ).toString(),\n\t\t\t} );\n\t\t\tif ( response.ok ) {\n\t\t\t\tredirectNotification( 'success' );\n\t\t\t} else {\n\t\t\t\tredirectNotification( 'error' );\n\t\t\t}\n\t\t} catch ( error ) {\n\t\t\tredirectNotification( 'error' );\n\t\t}\n\t} );\n} );\n"],"mappings":"AAAA;AACA;AACAA,QAAQ,CAACC,gBAAgB,CAAE,oBAAqB,CAAC,CAACC,OAAO,CAAE,UAAWC,IAAI,EAAG;EAC5E;EACA,IAAK,CAAEA,IAAI,CAACC,MAAM,IAAI,CAAED,IAAI,CAACC,MAAM,CAACC,UAAU,CAAE,SAAU,CAAC,EAAG;IAC7D;EACD;EAEA,MAAMC,oBAAoB,GAAKC,MAAM,IAAM;IAC1C,MAAMC,SAAS,GAAG,IAAIC,eAAe,CAAEC,MAAM,CAACC,QAAQ,CAACC,MAAO,CAAC;IAC/DJ,SAAS,CAACK,MAAM,CAAE,gBAAgB,EAAEN,MAAO,CAAC;IAC5CG,MAAM,CAACC,QAAQ,CAACC,MAAM,GAAGJ,SAAS,CAACM,QAAQ,CAAC,CAAC;EAC9C,CAAC;;EAED;EACAX,IAAI,CAACY,gBAAgB,CAAE,QAAQ,EAAE,gBAAiBC,KAAK,EAAG;IACzDA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtB;IACA,MAAMC,QAAQ,GAAGC,MAAM,CAACC,WAAW,CAAE,IAAIC,QAAQ,CAAElB,IAAK,CAAC,CAACmB,OAAO,CAAC,CAAE,CAAC;IACrEJ,QAAQ,CAACK,UAAU,GAAGpB,IAAI,CAACC,MAAM;IACjCc,QAAQ,CAACM,WAAW,GAAGC,mBAAmB,CAACC,KAAK;IAChDR,QAAQ,CAACd,MAAM,GAAGqB,mBAAmB,CAACrB,MAAM;IAE5C,IAAI;MACH,MAAMuB,QAAQ,GAAG,MAAMC,KAAK,CAAEH,mBAAmB,CAACI,OAAO,EAAE;QAC1DC,MAAM,EAAE,MAAM;QACdC,OAAO,EAAE;UACR,cAAc,EAAE;QACjB,CAAC;QACDC,IAAI,EAAE,IAAIvB,eAAe,CAAES,QAAS,CAAC,CAACJ,QAAQ,CAAC;MAChD,CAAE,CAAC;MACH,IAAKa,QAAQ,CAACM,EAAE,EAAG;QAClB3B,oBAAoB,CAAE,SAAU,CAAC;MAClC,CAAC,MAAM;QACNA,oBAAoB,CAAE,OAAQ,CAAC;MAChC;IACD,CAAC,CAAC,OAAQ4B,KAAK,EAAG;MACjB5B,oBAAoB,CAAE,OAAQ,CAAC;IAChC;EACD,CAAE,CAAC;AACJ,CAAE,CAAC"}

package/build-module/form-input/edit.js

@@ -0,0 +1,115 @@
+import { createElement, Fragment } from "react";
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, RichText, useBlockProps, __experimentalUseBorderProps as useBorderProps, __experimentalUseColorProps as useColorProps } from '@wordpress/block-editor';
+import { PanelBody, TextControl, CheckboxControl } from '@wordpress/components';
+import { useRef } from '@wordpress/element';
+function InputFieldBlock({
+  attributes,
+  setAttributes,
+  className
+}) {
+  const {
+    type,
+    name,
+    label,
+    inlineLabel,
+    required,
+    placeholder,
+    value
+  } = attributes;
+  const blockProps = useBlockProps();
+  const ref = useRef();
+  const TagName = type === 'textarea' ? 'textarea' : 'input';
+  const borderProps = useBorderProps(attributes);
+  const colorProps = useColorProps(attributes);
+  if (ref.current) {
+    ref.current.focus();
+  }
+  const controls = createElement(Fragment, null, 'hidden' !== type && createElement(InspectorControls, null, createElement(PanelBody, {
+    title: __('Input settings')
+  }, 'checkbox' !== type && createElement(CheckboxControl, {
+    label: __('Inline label'),
+    checked: inlineLabel,
+    onChange: newVal => {
+      setAttributes({
+        inlineLabel: newVal
+      });
+    }
+  }), createElement(CheckboxControl, {
+    label: __('Required'),
+    checked: required,
+    onChange: newVal => {
+      setAttributes({
+        required: newVal
+      });
+    }
+  }))), createElement(InspectorControls, {
+    __experimentalGroup: "advanced"
+  }, createElement(TextControl, {
+    autoComplete: "off",
+    label: __('Name'),
+    value: name,
+    onChange: newVal => {
+      setAttributes({
+        name: newVal
+      });
+    },
+    help: __('Affects the "name" atribute of the input element, and is used as a name for the form submission results.')
+  })));
+  if ('hidden' === type) {
+    return createElement(Fragment, null, controls, createElement("input", {
+      type: "hidden",
+      className: classNames(className, 'wp-block-form-input__input', colorProps.className, borderProps.className),
+      "aria-label": __('Value'),
+      value: value,
+      onChange: event => setAttributes({
+        value: event.target.value
+      })
+    }));
+  }
+  return createElement("div", {
+    ...blockProps
+  }, controls, createElement("span", {
+    className: classNames('wp-block-form-input__label', {
+      'is-label-inline': inlineLabel || 'checkbox' === type
+    })
+  }, createElement(RichText, {
+    tagName: "span",
+    className: "wp-block-form-input__label-content",
+    value: label,
+    onChange: newLabel => setAttributes({
+      label: newLabel
+    }),
+    "aria-label": label ? __('Label') : __('Empty label'),
+    "data-empty": label ? false : true,
+    placeholder: __('Type the label for this input')
+  }), createElement(TagName, {
+    type: 'textarea' === type ? undefined : type,
+    className: classNames(className, 'wp-block-form-input__input', colorProps.className, borderProps.className),
+    "aria-label": __('Optional placeholder text')
+    // We hide the placeholder field's placeholder when there is a value. This
+    // stops screen readers from reading the placeholder field's placeholder
+    // which is confusing.
+    ,
+    placeholder: placeholder ? undefined : __('Optional placeholder…'),
+    value: placeholder,
+    onChange: event => setAttributes({
+      placeholder: event.target.value
+    }),
+    "aria-required": required,
+    style: {
+      ...borderProps.style,
+      ...colorProps.style
+    }
+  })));
+}
+export default InputFieldBlock;
+//# sourceMappingURL=edit.js.map

package/build-module/form-input/edit.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["classNames","__","InspectorControls","RichText","useBlockProps","__experimentalUseBorderProps","useBorderProps","__experimentalUseColorProps","useColorProps","PanelBody","TextControl","CheckboxControl","useRef","InputFieldBlock","attributes","setAttributes","className","type","name","label","inlineLabel","required","placeholder","value","blockProps","ref","TagName","borderProps","colorProps","current","focus","controls","createElement","Fragment","title","checked","onChange","newVal","__experimentalGroup","autoComplete","help","event","target","tagName","newLabel","undefined","style"],"sources":["@wordpress/block-library/src/form-input/edit.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tInspectorControls,\n\tRichText,\n\tuseBlockProps,\n\t__experimentalUseBorderProps as useBorderProps,\n\t__experimentalUseColorProps as useColorProps,\n} from '@wordpress/block-editor';\nimport { PanelBody, TextControl, CheckboxControl } from '@wordpress/components';\n\nimport { useRef } from '@wordpress/element';\n\nfunction InputFieldBlock( { attributes, setAttributes, className } ) {\n\tconst { type, name, label, inlineLabel, required, placeholder, value } =\n\t\tattributes;\n\tconst blockProps = useBlockProps();\n\tconst ref = useRef();\n\tconst TagName = type === 'textarea' ? 'textarea' : 'input';\n\n\tconst borderProps = useBorderProps( attributes );\n\tconst colorProps = useColorProps( attributes );\n\tif ( ref.current ) {\n\t\tref.current.focus();\n\t}\n\n\tconst controls = (\n\t\t<>\n\t\t\t{ 'hidden' !== type && (\n\t\t\t\t<InspectorControls>\n\t\t\t\t\t<PanelBody title={ __( 'Input settings' ) }>\n\t\t\t\t\t\t{ 'checkbox' !== type && (\n\t\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Inline label' ) }\n\t\t\t\t\t\t\t\tchecked={ inlineLabel }\n\t\t\t\t\t\t\t\tonChange={ ( newVal ) => {\n\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\tinlineLabel: newVal,\n\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\tlabel={ __( 'Required' ) }\n\t\t\t\t\t\t\tchecked={ required }\n\t\t\t\t\t\t\tonChange={ ( newVal ) => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\trequired: newVal,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</PanelBody>\n\t\t\t\t</InspectorControls>\n\t\t\t) }\n\t\t\t<InspectorControls __experimentalGroup=\"advanced\">\n\t\t\t\t<TextControl\n\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\tvalue={ name }\n\t\t\t\t\tonChange={ ( newVal ) => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\tname: newVal,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t'Affects the \"name\" atribute of the input element, and is used as a name for the form submission results.'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</InspectorControls>\n\t\t</>\n\t);\n\n\tif ( 'hidden' === type ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ controls }\n\t\t\t\t<input\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tclassName={ classNames(\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t'wp-block-form-input__input',\n\t\t\t\t\t\tcolorProps.className,\n\t\t\t\t\t\tborderProps.className\n\t\t\t\t\t) }\n\t\t\t\t\taria-label={ __( 'Value' ) }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ ( event ) =>\n\t\t\t\t\t\tsetAttributes( { value: event.target.value } )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ controls }\n\t\t\t<span\n\t\t\t\tclassName={ classNames( 'wp-block-form-input__label', {\n\t\t\t\t\t'is-label-inline': inlineLabel || 'checkbox' === type,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t<RichText\n\t\t\t\t\ttagName=\"span\"\n\t\t\t\t\tclassName=\"wp-block-form-input__label-content\"\n\t\t\t\t\tvalue={ label }\n\t\t\t\t\tonChange={ ( newLabel ) =>\n\t\t\t\t\t\tsetAttributes( { label: newLabel } )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={ label ? __( 'Label' ) : __( 'Empty label' ) }\n\t\t\t\t\tdata-empty={ label ? false : true }\n\t\t\t\t\tplaceholder={ __( 'Type the label for this input' ) }\n\t\t\t\t/>\n\t\t\t\t<TagName\n\t\t\t\t\ttype={ 'textarea' === type ? undefined : type }\n\t\t\t\t\tclassName={ classNames(\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t'wp-block-form-input__input',\n\t\t\t\t\t\tcolorProps.className,\n\t\t\t\t\t\tborderProps.className\n\t\t\t\t\t) }\n\t\t\t\t\taria-label={ __( 'Optional placeholder text' ) }\n\t\t\t\t\t// We hide the placeholder field's placeholder when there is a value. This\n\t\t\t\t\t// stops screen readers from reading the placeholder field's placeholder\n\t\t\t\t\t// which is confusing.\n\t\t\t\t\tplaceholder={\n\t\t\t\t\t\tplaceholder ? undefined : __( 'Optional placeholder…' )\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ placeholder }\n\t\t\t\t\tonChange={ ( event ) =>\n\t\t\t\t\t\tsetAttributes( { placeholder: event.target.value } )\n\t\t\t\t\t}\n\t\t\t\t\taria-required={ required }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t...borderProps.style,\n\t\t\t\t\t\t...colorProps.style,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</span>\n\t\t</div>\n\t);\n}\n\nexport default InputFieldBlock;\n"],"mappings":"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"}

package/build-module/form-input/index.js

@@ -0,0 +1,95 @@
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import edit from './edit';
+const metadata = {
+  $schema: "https://schemas.wp.org/trunk/block.json",
+  apiVersion: 3,
+  __experimental: true,
+  name: "core/form-input",
+  title: "Input field",
+  category: "common",
+  parent: ["core/form"],
+  description: "The basic building block for forms.",
+  keywords: ["input", "form"],
+  textdomain: "default",
+  icon: "forms",
+  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: {
+    anchor: true,
+    reusable: false,
+    spacing: {
+      margin: ["top", "bottom"]
+    },
+    __experimentalBorder: {
+      radius: true,
+      __experimentalSkipSerialization: true,
+      __experimentalDefaultControls: {
+        radius: true
+      }
+    }
+  },
+  style: ["wp-block-form-input"]
+};
+import save from './save';
+import variations from './variations';
+const {
+  name
+} = metadata;
+export { metadata, name };
+export const settings = {
+  edit,
+  save,
+  variations
+};
+export const init = () => initBlock({
+  name,
+  metadata,
+  settings
+});
+//# sourceMappingURL=index.js.map

package/build-module/form-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["initBlock","edit","metadata","$schema","apiVersion","__experimental","name","title","category","parent","description","keywords","textdomain","icon","attributes","type","label","selector","source","__experimentalRole","inlineLabel","required","attribute","placeholder","value","visibilityPermissions","supports","anchor","reusable","spacing","margin","__experimentalBorder","radius","__experimentalSkipSerialization","__experimentalDefaultControls","style","save","variations","settings","init"],"sources":["@wordpress/block-library/src/form-input/index.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport initBlock from '../utils/init-block';\nimport edit from './edit';\nimport metadata from './block.json';\nimport save from './save';\nimport variations from './variations';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\tedit,\n\tsave,\n\tvariations,\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,SAAS,MAAM,qBAAqB;AAC3C,OAAOC,IAAI,MAAM,QAAQ;AAAC,MAAAC,QAAA;EAAAC,OAAA;EAAAC,UAAA;EAAAC,cAAA;EAAAC,IAAA;EAAAC,KAAA;EAAAC,QAAA;EAAAC,MAAA;EAAAC,WAAA;EAAAC,QAAA;EAAAC,UAAA;EAAAC,IAAA;EAAAC,UAAA;IAAAC,IAAA;MAAAA,IAAA;MAAA;IAAA;IAAAT,IAAA;MAAAS,IAAA;IAAA;IAAAC,KAAA;MAAAD,IAAA;MAAA;MAAAE,QAAA;MAAAC,MAAA;MAAAC,kBAAA;IAAA;IAAAC,WAAA;MAAAL,IAAA;MAAA;IAAA;IAAAM,QAAA;MAAAN,IAAA;MAAA;MAAAE,QAAA;MAAAC,MAAA;MAAAI,SAAA;IAAA;IAAAC,WAAA;MAAAR,IAAA;MAAAE,QAAA;MAAAC,MAAA;MAAAI,SAAA;MAAAH,kBAAA;IAAA;IAAAK,KAAA;MAAAT,IAAA;MAAA;MAAAE,QAAA;MAAAC,MAAA;MAAAI,SAAA;IAAA;IAAAG,qBAAA;MAAAV,IAAA;MAAA;IAAA;EAAA;EAAAW,QAAA;IAAAC,MAAA;IAAAC,QAAA;IAAAC,OAAA;MAAAC,MAAA;IAAA;IAAAC,oBAAA;MAAAC,MAAA;MAAAC,+BAAA;MAAAC,6BAAA;QAAAF,MAAA;MAAA;IAAA;EAAA;EAAAG,KAAA;AAAA;AAE1B,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,UAAU,MAAM,cAAc;AAErC,MAAM;EAAE/B;AAAK,CAAC,GAAGJ,QAAQ;AAEzB,SAASA,QAAQ,EAAEI,IAAI;AAEvB,OAAO,MAAMgC,QAAQ,GAAG;EACvBrC,IAAI;EACJmC,IAAI;EACJC;AACD,CAAC;AAED,OAAO,MAAME,IAAI,GAAGA,CAAA,KAAMvC,SAAS,CAAE;EAAEM,IAAI;EAAEJ,QAAQ;EAAEoC;AAAS,CAAE,CAAC"}

package/build-module/form-input/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+export default init();
+//# sourceMappingURL=init.js.map

package/build-module/form-input/init.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["init"],"sources":["@wordpress/block-library/src/form-input/init.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { init } from './';\n\nexport default init();\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,IAAI;AAEzB,eAAeA,IAAI,CAAC,CAAC"}

package/build-module/form-input/save.js

@@ -0,0 +1,80 @@
+import { createElement } from "react";
+/**
+ * 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';
+
+/**
+ * Get the name attribute from a content string.
+ *
+ * @param {string} content The block content.
+ *
+ * @return {string} Returns the slug.
+ */
+const getNameFromLabel = content => {
+  const dummyElement = document.createElement('div');
+  dummyElement.innerHTML = content;
+  // Get the slug.
+  return removeAccents(dummyElement.innerText)
+  // 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, '');
+};
+export default function 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 createElement("input", {
+      type: type,
+      name: name,
+      value: value
+    });
+  }
+
+  /* eslint-disable jsx-a11y/label-has-associated-control */
+  return createElement("label", {
+    className: classNames('wp-block-form-input__label', {
+      'is-label-inline': inlineLabel
+    })
+  }, createElement("span", {
+    className: "wp-block-form-input__label-content"
+  }, createElement(RichText.Content, {
+    value: label
+  })), createElement(TagName, {
+    className: inputClasses,
+    type: 'textarea' === type ? undefined : type,
+    name: name || getNameFromLabel(label),
+    required: required,
+    "aria-required": required,
+    placeholder: placeholder || undefined,
+    style: inputStyle
+  }));
+  /* eslint-enable jsx-a11y/label-has-associated-control */
+}
+//# sourceMappingURL=save.js.map

package/build-module/form-input/save.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["classNames","removeAccents","RichText","__experimentalGetBorderClassesAndStyles","getBorderClassesAndStyles","__experimentalGetColorClassesAndStyles","getColorClassesAndStyles","getNameFromLabel","content","dummyElement","document","createElement","innerHTML","innerText","replace","toLowerCase","save","attributes","type","name","label","inlineLabel","required","placeholder","value","borderProps","colorProps","inputStyle","style","inputClasses","className","TagName","Content","undefined"],"sources":["@wordpress/block-library/src/form-input/save.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tRichText,\n\t__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,\n\t__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,\n} from '@wordpress/block-editor';\n\n/**\n * Get the name attribute from a content string.\n *\n * @param {string} content The block content.\n *\n * @return {string} Returns the slug.\n */\nconst getNameFromLabel = ( content ) => {\n\tconst dummyElement = document.createElement( 'div' );\n\tdummyElement.innerHTML = content;\n\t// Get the slug.\n\treturn (\n\t\tremoveAccents( dummyElement.innerText )\n\t\t\t// Convert anything that's not a letter or number to a hyphen.\n\t\t\t.replace( /[^\\p{L}\\p{N}]+/gu, '-' )\n\t\t\t// Convert to lowercase\n\t\t\t.toLowerCase()\n\t\t\t// Remove any remaining leading or trailing hyphens.\n\t\t\t.replace( /(^-+)|(-+$)/g, '' )\n\t);\n};\n\nexport default function save( { attributes } ) {\n\tconst { type, name, label, inlineLabel, required, placeholder, value } =\n\t\tattributes;\n\n\tconst borderProps = getBorderClassesAndStyles( attributes );\n\tconst colorProps = getColorClassesAndStyles( attributes );\n\n\tconst inputStyle = {\n\t\t...borderProps.style,\n\t\t...colorProps.style,\n\t};\n\n\tconst inputClasses = classNames(\n\t\t'wp-block-form-input__input',\n\t\tcolorProps.className,\n\t\tborderProps.className\n\t);\n\tconst TagName = type === 'textarea' ? 'textarea' : 'input';\n\n\tif ( 'hidden' === type ) {\n\t\treturn <input type={ type } name={ name } value={ value } />;\n\t}\n\n\t/* eslint-disable jsx-a11y/label-has-associated-control */\n\treturn (\n\t\t<label\n\t\t\tclassName={ classNames( 'wp-block-form-input__label', {\n\t\t\t\t'is-label-inline': inlineLabel,\n\t\t\t} ) }\n\t\t>\n\t\t\t<span className=\"wp-block-form-input__label-content\">\n\t\t\t\t<RichText.Content value={ label } />\n\t\t\t</span>\n\t\t\t<TagName\n\t\t\t\tclassName={ inputClasses }\n\t\t\t\ttype={ 'textarea' === type ? undefined : type }\n\t\t\t\tname={ name || getNameFromLabel( label ) }\n\t\t\t\trequired={ required }\n\t\t\t\taria-required={ required }\n\t\t\t\tplaceholder={ placeholder || undefined }\n\t\t\t\tstyle={ inputStyle }\n\t\t\t/>\n\t\t</label>\n\t);\n\t/* eslint-enable jsx-a11y/label-has-associated-control */\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,gBAAgB;;AAE1C;AACA;AACA;AACA,SACCC,QAAQ,EACRC,uCAAuC,IAAIC,yBAAyB,EACpEC,sCAAsC,IAAIC,wBAAwB,QAC5D,yBAAyB;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAKC,OAAO,IAAM;EACvC,MAAMC,YAAY,GAAGC,QAAQ,CAACC,aAAa,CAAE,KAAM,CAAC;EACpDF,YAAY,CAACG,SAAS,GAAGJ,OAAO;EAChC;EACA,OACCP,aAAa,CAAEQ,YAAY,CAACI,SAAU;EACrC;EAAA,CACCC,OAAO,CAAE,kBAAkB,EAAE,GAAI;EAClC;EAAA,CACCC,WAAW,CAAC;EACb;EAAA,CACCD,OAAO,CAAE,cAAc,EAAE,EAAG,CAAC;AAEjC,CAAC;AAED,eAAe,SAASE,IAAIA,CAAE;EAAEC;AAAW,CAAC,EAAG;EAC9C,MAAM;IAAEC,IAAI;IAAEC,IAAI;IAAEC,KAAK;IAAEC,WAAW;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAM,CAAC,GACrEP,UAAU;EAEX,MAAMQ,WAAW,GAAGrB,yBAAyB,CAAEa,UAAW,CAAC;EAC3D,MAAMS,UAAU,GAAGpB,wBAAwB,CAAEW,UAAW,CAAC;EAEzD,MAAMU,UAAU,GAAG;IAClB,GAAGF,WAAW,CAACG,KAAK;IACpB,GAAGF,UAAU,CAACE;EACf,CAAC;EAED,MAAMC,YAAY,GAAG7B,UAAU,CAC9B,4BAA4B,EAC5B0B,UAAU,CAACI,SAAS,EACpBL,WAAW,CAACK,SACb,CAAC;EACD,MAAMC,OAAO,GAAGb,IAAI,KAAK,UAAU,GAAG,UAAU,GAAG,OAAO;EAE1D,IAAK,QAAQ,KAAKA,IAAI,EAAG;IACxB,OAAOP,aAAA;MAAOO,IAAI,EAAGA,IAAM;MAACC,IAAI,EAAGA,IAAM;MAACK,KAAK,EAAGA;IAAO,CAAE,CAAC;EAC7D;;EAEA;EACA,OACCb,aAAA;IACCmB,SAAS,EAAG9B,UAAU,CAAE,4BAA4B,EAAE;MACrD,iBAAiB,EAAEqB;IACpB,CAAE;EAAG,GAELV,aAAA;IAAMmB,SAAS,EAAC;EAAoC,GACnDnB,aAAA,CAACT,QAAQ,CAAC8B,OAAO;IAACR,KAAK,EAAGJ;EAAO,CAAE,CAC9B,CAAC,EACPT,aAAA,CAACoB,OAAO;IACPD,SAAS,EAAGD,YAAc;IAC1BX,IAAI,EAAG,UAAU,KAAKA,IAAI,GAAGe,SAAS,GAAGf,IAAM;IAC/CC,IAAI,EAAGA,IAAI,IAAIZ,gBAAgB,CAAEa,KAAM,CAAG;IAC1CE,QAAQ,EAAGA,QAAU;IACrB,iBAAgBA,QAAU;IAC1BC,WAAW,EAAGA,WAAW,IAAIU,SAAW;IACxCL,KAAK,EAAGD;EAAY,CACpB,CACK,CAAC;EAET;AACD"}

package/build-module/form-input/variations.js

@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+const variations = [{
+  name: 'text',
+  title: __('Text input'),
+  icon: 'edit-page',
+  description: __('A generic text input.'),
+  attributes: {
+    type: 'text'
+  },
+  isDefault: true,
+  scope: ['inserter', 'transform'],
+  isActive: blockAttributes => !blockAttributes?.type || blockAttributes?.type === 'text'
+}, {
+  name: 'textarea',
+  title: __('Textarea input'),
+  icon: 'testimonial',
+  description: __('A textarea input to allow entering multiple lines of text.'),
+  attributes: {
+    type: 'textarea'
+  },
+  isDefault: true,
+  scope: ['inserter', 'transform'],
+  isActive: blockAttributes => blockAttributes?.type === 'textarea'
+}, {
+  name: 'checkbox',
+  title: __('Checkbox input'),
+  description: __('A simple checkbox input.'),
+  icon: 'forms',
+  attributes: {
+    type: 'checkbox',
+    inlineLabel: true
+  },
+  isDefault: true,
+  scope: ['inserter', 'transform'],
+  isActive: blockAttributes => blockAttributes?.type === 'checkbox'
+}, {
+  name: 'email',
+  title: __('Email input'),
+  icon: 'email',
+  description: __('Used for email addresses.'),
+  attributes: {
+    type: 'email'
+  },
+  isDefault: true,
+  scope: ['inserter', 'transform'],
+  isActive: blockAttributes => blockAttributes?.type === 'email'
+}, {
+  name: 'url',
+  title: __('URL input'),
+  icon: 'admin-site',
+  description: __('Used for URLs.'),
+  attributes: {
+    type: 'url'
+  },
+  isDefault: true,
+  scope: ['inserter', 'transform'],
+  isActive: blockAttributes => blockAttributes?.type === 'url'
+}, {
+  name: 'tel',
+  title: __('Telephone input'),
+  icon: 'phone',
+  description: __('Used for phone numbers.'),
+  attributes: {
+    type: 'tel'
+  },
+  isDefault: true,
+  scope: ['inserter', 'transform'],
+  isActive: blockAttributes => blockAttributes?.type === 'tel'
+}, {
+  name: 'number',
+  title: __('Number input'),
+  icon: 'edit-page',
+  description: __('A numeric input.'),
+  attributes: {
+    type: 'number'
+  },
+  isDefault: true,
+  scope: ['inserter', 'transform'],
+  isActive: blockAttributes => blockAttributes?.type === 'number'
+}];
+export default variations;
+//# sourceMappingURL=variations.js.map

package/build-module/form-input/variations.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__","variations","name","title","icon","description","attributes","type","isDefault","scope","isActive","blockAttributes","inlineLabel"],"sources":["@wordpress/block-library/src/form-input/variations.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nconst variations = [\n\t{\n\t\tname: 'text',\n\t\ttitle: __( 'Text input' ),\n\t\ticon: 'edit-page',\n\t\tdescription: __( 'A generic text input.' ),\n\t\tattributes: { type: 'text' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) =>\n\t\t\t! blockAttributes?.type || blockAttributes?.type === 'text',\n\t},\n\t{\n\t\tname: 'textarea',\n\t\ttitle: __( 'Textarea input' ),\n\t\ticon: 'testimonial',\n\t\tdescription: __(\n\t\t\t'A textarea input to allow entering multiple lines of text.'\n\t\t),\n\t\tattributes: { type: 'textarea' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'textarea',\n\t},\n\t{\n\t\tname: 'checkbox',\n\t\ttitle: __( 'Checkbox input' ),\n\t\tdescription: __( 'A simple checkbox input.' ),\n\t\ticon: 'forms',\n\t\tattributes: { type: 'checkbox', inlineLabel: true },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'checkbox',\n\t},\n\t{\n\t\tname: 'email',\n\t\ttitle: __( 'Email input' ),\n\t\ticon: 'email',\n\t\tdescription: __( 'Used for email addresses.' ),\n\t\tattributes: { type: 'email' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'email',\n\t},\n\t{\n\t\tname: 'url',\n\t\ttitle: __( 'URL input' ),\n\t\ticon: 'admin-site',\n\t\tdescription: __( 'Used for URLs.' ),\n\t\tattributes: { type: 'url' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'url',\n\t},\n\t{\n\t\tname: 'tel',\n\t\ttitle: __( 'Telephone input' ),\n\t\ticon: 'phone',\n\t\tdescription: __( 'Used for phone numbers.' ),\n\t\tattributes: { type: 'tel' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'tel',\n\t},\n\t{\n\t\tname: 'number',\n\t\ttitle: __( 'Number input' ),\n\t\ticon: 'edit-page',\n\t\tdescription: __( 'A numeric input.' ),\n\t\tattributes: { type: 'number' },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) => blockAttributes?.type === 'number',\n\t},\n];\n\nexport default variations;\n"],"mappings":"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"}

package/build-module/form-submission-notification/edit.js

@@ -0,0 +1,50 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { InnerBlocks, useBlockProps, useInnerBlocksProps, store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+const TEMPLATE = [['core/paragraph', {
+  content: __("Enter the message you wish displayed for form submission error/success, and select the type of the message (success/error) from the block's options.")
+}]];
+const Edit = ({
+  attributes,
+  clientId
+}) => {
+  const {
+    type
+  } = attributes;
+  const blockProps = useBlockProps({
+    className: classnames('wp-block-form-submission-notification', {
+      [`form-notification-type-${type}`]: type
+    })
+  });
+  const {
+    hasInnerBlocks
+  } = useSelect(select => {
+    const {
+      getBlock
+    } = select(blockEditorStore);
+    const block = getBlock(clientId);
+    return {
+      hasInnerBlocks: !!(block && block.innerBlocks.length)
+    };
+  }, [clientId]);
+  const innerBlocksProps = useInnerBlocksProps(blockProps, {
+    template: TEMPLATE,
+    renderAppender: hasInnerBlocks ? undefined : InnerBlocks.ButtonBlockAppender
+  });
+  return createElement("div", {
+    ...innerBlocksProps,
+    "data-message-success": __('Submission success notification'),
+    "data-message-error": __('Submission error notification')
+  });
+};
+export default Edit;
+//# sourceMappingURL=edit.js.map

package/build-module/form-submission-notification/edit.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__","InnerBlocks","useBlockProps","useInnerBlocksProps","store","blockEditorStore","useSelect","classnames","TEMPLATE","content","Edit","attributes","clientId","type","blockProps","className","hasInnerBlocks","select","getBlock","block","innerBlocks","length","innerBlocksProps","template","renderAppender","undefined","ButtonBlockAppender","createElement"],"sources":["@wordpress/block-library/src/form-submission-notification/edit.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tInnerBlocks,\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\nconst TEMPLATE = [\n\t[\n\t\t'core/paragraph',\n\t\t{\n\t\t\tcontent: __(\n\t\t\t\t\"Enter the message you wish displayed for form submission error/success, and select the type of the message (success/error) from the block's options.\"\n\t\t\t),\n\t\t},\n\t],\n];\n\nconst Edit = ( { attributes, clientId } ) => {\n\tconst { type } = attributes;\n\tconst blockProps = useBlockProps( {\n\t\tclassName: classnames( 'wp-block-form-submission-notification', {\n\t\t\t[ `form-notification-type-${ type }` ]: type,\n\t\t} ),\n\t} );\n\n\tconst { hasInnerBlocks } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlock } = select( blockEditorStore );\n\t\t\tconst block = getBlock( clientId );\n\t\t\treturn {\n\t\t\t\thasInnerBlocks: !! ( block && block.innerBlocks.length ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\ttemplate: TEMPLATE,\n\t\trenderAppender: hasInnerBlocks\n\t\t\t? undefined\n\t\t\t: InnerBlocks.ButtonBlockAppender,\n\t} );\n\n\treturn (\n\t\t<div\n\t\t\t{ ...innerBlocksProps }\n\t\t\tdata-message-success={ __( 'Submission success notification' ) }\n\t\t\tdata-message-error={ __( 'Submission error notification' ) }\n\t\t/>\n\t);\n};\nexport default Edit;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SACCC,WAAW,EACXC,aAAa,EACbC,mBAAmB,EACnBC,KAAK,IAAIC,gBAAgB,QACnB,yBAAyB;AAChC,SAASC,SAAS,QAAQ,iBAAiB;;AAE3C;AACA;AACA;AACA,OAAOC,UAAU,MAAM,YAAY;AAEnC,MAAMC,QAAQ,GAAG,CAChB,CACC,gBAAgB,EAChB;EACCC,OAAO,EAAET,EAAE,CACV,sJACD;AACD,CAAC,CACD,CACD;AAED,MAAMU,IAAI,GAAGA,CAAE;EAAEC,UAAU;EAAEC;AAAS,CAAC,KAAM;EAC5C,MAAM;IAAEC;EAAK,CAAC,GAAGF,UAAU;EAC3B,MAAMG,UAAU,GAAGZ,aAAa,CAAE;IACjCa,SAAS,EAAER,UAAU,CAAE,uCAAuC,EAAE;MAC/D,CAAG,0BAA0BM,IAAM,EAAC,GAAIA;IACzC,CAAE;EACH,CAAE,CAAC;EAEH,MAAM;IAAEG;EAAe,CAAC,GAAGV,SAAS,CACjCW,MAAM,IAAM;IACb,MAAM;MAAEC;IAAS,CAAC,GAAGD,MAAM,CAAEZ,gBAAiB,CAAC;IAC/C,MAAMc,KAAK,GAAGD,QAAQ,CAAEN,QAAS,CAAC;IAClC,OAAO;MACNI,cAAc,EAAE,CAAC,EAAIG,KAAK,IAAIA,KAAK,CAACC,WAAW,CAACC,MAAM;IACvD,CAAC;EACF,CAAC,EACD,CAAET,QAAQ,CACX,CAAC;EAED,MAAMU,gBAAgB,GAAGnB,mBAAmB,CAAEW,UAAU,EAAE;IACzDS,QAAQ,EAAEf,QAAQ;IAClBgB,cAAc,EAAER,cAAc,GAC3BS,SAAS,GACTxB,WAAW,CAACyB;EAChB,CAAE,CAAC;EAEH,OACCC,aAAA;IAAA,GACML,gBAAgB;IACrB,wBAAuBtB,EAAE,CAAE,iCAAkC,CAAG;IAChE,sBAAqBA,EAAE,CAAE,+BAAgC;EAAG,CAC5D,CAAC;AAEJ,CAAC;AACD,eAAeU,IAAI"}