@wordpress/block-editor 7.0.1 → 8.0.0

package/build/components/inspector-controls/slot.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = InspectorControlsSlot;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _components = require("@wordpress/components");
+
+var _warning = _interopRequireDefault(require("@wordpress/warning"));
+
+var _blockSupportToolsPanel = _interopRequireDefault(require("./block-support-tools-panel"));
+
+var _blockSupportSlotContainer = _interopRequireDefault(require("./block-support-slot-container"));
+
+var _groups = _interopRequireDefault(require("./groups"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function InspectorControlsSlot({
+  __experimentalGroup: group = 'default',
+  bubblesVirtually = true,
+  label,
+  ...props
+}) {
+  var _groups$group;
+
+  const Slot = (_groups$group = _groups.default[group]) === null || _groups$group === void 0 ? void 0 : _groups$group.Slot;
+  const slot = (0, _components.__experimentalUseSlot)(Slot === null || Slot === void 0 ? void 0 : Slot.__unstableName);
+
+  if (!Slot || !slot) {
+    typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" ? (0, _warning.default)(`Unknown InspectorControl group "${group}" provided.`) : void 0;
+    return null;
+  }
+
+  const hasFills = Boolean(slot.fills && slot.fills.length);
+
+  if (!hasFills) {
+    return null;
+  }
+
+  if (label) {
+    return (0, _element.createElement)(_blockSupportToolsPanel.default, {
+      group: group,
+      label: label
+    }, (0, _element.createElement)(_blockSupportSlotContainer.default, (0, _extends2.default)({}, props, {
+      bubblesVirtually: bubblesVirtually,
+      Slot: Slot
+    })));
+  }
+
+  return (0, _element.createElement)(Slot, (0, _extends2.default)({}, props, {
+    bubblesVirtually: bubblesVirtually
+  }));
+}
+//# sourceMappingURL=slot.js.map

package/build/components/inspector-controls/slot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/inspector-controls/slot.js"],"names":["InspectorControlsSlot","__experimentalGroup","group","bubblesVirtually","label","props","Slot","groups","slot","__unstableName","hasFills","Boolean","fills","length"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AAXA;AACA;AACA;;AAIA;AACA;AACA;AAKe,SAASA,qBAAT,CAAgC;AAC9CC,EAAAA,mBAAmB,EAAEC,KAAK,GAAG,SADiB;AAE9CC,EAAAA,gBAAgB,GAAG,IAF2B;AAG9CC,EAAAA,KAH8C;AAI9C,KAAGC;AAJ2C,CAAhC,EAKX;AAAA;;AACH,QAAMC,IAAI,oBAAGC,gBAAQL,KAAR,CAAH,kDAAG,cAAiBI,IAA9B;AACA,QAAME,IAAI,GAAG,uCAASF,IAAT,aAASA,IAAT,uBAASA,IAAI,CAAEG,cAAf,CAAb;;AACA,MAAK,CAAEH,IAAF,IAAU,CAAEE,IAAjB,EAAwB;AACvB,mHAAU,mCAAmCN,KAAO,aAApD;AACA,WAAO,IAAP;AACA;;AAED,QAAMQ,QAAQ,GAAGC,OAAO,CAAEH,IAAI,CAACI,KAAL,IAAcJ,IAAI,CAACI,KAAL,CAAWC,MAA3B,CAAxB;;AACA,MAAK,CAAEH,QAAP,EAAkB;AACjB,WAAO,IAAP;AACA;;AAED,MAAKN,KAAL,EAAa;AACZ,WACC,4BAAC,+BAAD;AAAwB,MAAA,KAAK,EAAGF,KAAhC;AAAwC,MAAA,KAAK,EAAGE;AAAhD,OACC,4BAAC,kCAAD,6BACMC,KADN;AAEC,MAAA,gBAAgB,EAAGF,gBAFpB;AAGC,MAAA,IAAI,EAAGG;AAHR,OADD,CADD;AASA;;AAED,SAAO,4BAAC,IAAD,6BAAWD,KAAX;AAAmB,IAAA,gBAAgB,EAAGF;AAAtC,KAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalUseSlot as useSlot } from '@wordpress/components';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport BlockSupportToolsPanel from './block-support-tools-panel';\nimport BlockSupportSlotContainer from './block-support-slot-container';\nimport groups from './groups';\n\nexport default function InspectorControlsSlot( {\n\t__experimentalGroup: group = 'default',\n\tbubblesVirtually = true,\n\tlabel,\n\t...props\n} ) {\n\tconst Slot = groups[ group ]?.Slot;\n\tconst slot = useSlot( Slot?.__unstableName );\n\tif ( ! Slot || ! slot ) {\n\t\twarning( `Unknown InspectorControl group \"${ group }\" provided.` );\n\t\treturn null;\n\t}\n\n\tconst hasFills = Boolean( slot.fills && slot.fills.length );\n\tif ( ! hasFills ) {\n\t\treturn null;\n\t}\n\n\tif ( label ) {\n\t\treturn (\n\t\t\t<BlockSupportToolsPanel group={ group } label={ label }>\n\t\t\t\t<BlockSupportSlotContainer\n\t\t\t\t\t{ ...props }\n\t\t\t\t\tbubblesVirtually={ bubblesVirtually }\n\t\t\t\t\tSlot={ Slot }\n\t\t\t\t/>\n\t\t\t</BlockSupportToolsPanel>\n\t\t);\n\t}\n\n\treturn <Slot { ...props } bubblesVirtually={ bubblesVirtually } />;\n}\n"]}

package/build/components/inspector-controls/slot.native.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = InspectorControlsSlot;
+
+var _element = require("@wordpress/element");
+
+var _warning = _interopRequireDefault(require("@wordpress/warning"));
+
+var _groups = _interopRequireDefault(require("./groups"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function InspectorControlsSlot({
+  __experimentalGroup: group = 'default',
+  ...props
+}) {
+  var _groups$group;
+
+  const Slot = (_groups$group = _groups.default[group]) === null || _groups$group === void 0 ? void 0 : _groups$group.Slot;
+
+  if (!Slot) {
+    typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" ? (0, _warning.default)(`Unknown InspectorControl group "${group}" provided.`) : void 0;
+    return null;
+  }
+
+  return (0, _element.createElement)(Slot, props);
+}
+//# sourceMappingURL=slot.native.js.map

package/build/components/inspector-controls/slot.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/inspector-controls/slot.native.js"],"names":["InspectorControlsSlot","__experimentalGroup","group","props","Slot","groups"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGe,SAASA,qBAAT,CAAgC;AAC9CC,EAAAA,mBAAmB,EAAEC,KAAK,GAAG,SADiB;AAE9C,KAAGC;AAF2C,CAAhC,EAGX;AAAA;;AACH,QAAMC,IAAI,oBAAGC,gBAAQH,KAAR,CAAH,kDAAG,cAAiBE,IAA9B;;AACA,MAAK,CAAEA,IAAP,EAAc;AACb,mHAAU,mCAAmCF,KAAO,aAApD;AACA,WAAO,IAAP;AACA;;AAED,SAAO,4BAAC,IAAD,EAAWC,KAAX,CAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport groups from './groups';\n\nexport default function InspectorControlsSlot( {\n\t__experimentalGroup: group = 'default',\n\t...props\n} ) {\n\tconst Slot = groups[ group ]?.Slot;\n\tif ( ! Slot ) {\n\t\twarning( `Unknown InspectorControl group \"${ group }\" provided.` );\n\t\treturn null;\n\t}\n\n\treturn <Slot { ...props } />;\n}\n"]}

package/build/components/letter-spacing-control/index.js

@@ -26,14 +26,17 @@ var _useSetting = _interopRequireDefault(require("../../components/use-setting")
 /**
  * Control for letter-spacing.
  *
- * @param {Object}   props          Component props.
- * @param {string}   props.value    Currently selected letter-spacing.
- * @param {Function} props.onChange Handles change in letter-spacing selection.
- * @return {WPElement}                      Letter-spacing control.
+ * @param {Object}   props                      Component props.
+ * @param {string}   props.value                Currently selected letter-spacing.
+ * @param {Function} props.onChange             Handles change in letter-spacing selection.
+ * @param {boolean}  props.__unstableInputWidth Input width to pass through to inner UnitControl.
+ *
+ * @return {WPElement}                          Letter-spacing control.
  */
 function LetterSpacingControl({
   value,
-  onChange
+  onChange,
+  __unstableInputWidth = '60px'
 }) {
   const units = (0, _components.__experimentalUseCustomUnits)({
     availableUnits: (0, _useSetting.default)('spacing.units') || ['px', 'em', 'rem'],
@@ -46,7 +49,7 @@ function LetterSpacingControl({
   return (0, _element.createElement)(_components.__experimentalUnitControl, {
     label: (0, _i18n.__)('Letter-spacing'),
     value: value,
-    __unstableInputWidth: "60px",
+    __unstableInputWidth: __unstableInputWidth,
     units: units,
     onChange: onChange
   });

package/build/components/letter-spacing-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/letter-spacing-control/index.js"],"names":["LetterSpacingControl","value","onChange","units","availableUnits","defaultValues","px","em","rem"],"mappings":";;;;;;;;;;;AAGA;;AAIA;;AAKA;;AAZA;AACA;AACA;;AAOA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,oBAAT,CAA+B;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAA/B,EAAqD;AACnE,QAAMC,KAAK,GAAG,8CAAgB;AAC7BC,IAAAA,cAAc,EAAE,yBAAY,eAAZ,KAAiC,CAAE,IAAF,EAAQ,IAAR,EAAc,KAAd,CADpB;AAE7BC,IAAAA,aAAa,EAAE;AAAEC,MAAAA,EAAE,EAAE,GAAN;AAAWC,MAAAA,EAAE,EAAE,IAAf;AAAqBC,MAAAA,GAAG,EAAE;AAA1B;AAFc,GAAhB,CAAd;AAIA,SACC,4BAAC,qCAAD;AACC,IAAA,KAAK,EAAG,cAAI,gBAAJ,CADT;AAEC,IAAA,KAAK,EAAGP,KAFT;AAGC,IAAA,oBAAoB,EAAC,MAHtB;AAIC,IAAA,KAAK,EAAGE,KAJT;AAKC,IAAA,QAAQ,EAAGD;AALZ,IADD;AASA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../../components/use-setting';\n\n/**\n * Control for letter-spacing.\n *\n * @param {Object}   props          Component props.\n * @param {string}   props.value    Currently selected letter-spacing.\n * @param {Function} props.onChange Handles change in letter-spacing selection.\n * @return {WPElement}                      Letter-spacing control.\n */\nexport default function LetterSpacingControl( { value, onChange } ) {\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],\n\t\tdefaultValues: { px: '2', em: '.2', rem: '.2' },\n\t} );\n\treturn (\n\t\t<UnitControl\n\t\t\tlabel={ __( 'Letter-spacing' ) }\n\t\t\tvalue={ value }\n\t\t\t__unstableInputWidth=\"60px\"\n\t\t\tunits={ units }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/letter-spacing-control/index.js"],"names":["LetterSpacingControl","value","onChange","__unstableInputWidth","units","availableUnits","defaultValues","px","em","rem"],"mappings":";;;;;;;;;;;AAGA;;AAIA;;AAKA;;AAZA;AACA;AACA;;AAOA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,oBAAT,CAA+B;AAC7CC,EAAAA,KAD6C;AAE7CC,EAAAA,QAF6C;AAG7CC,EAAAA,oBAAoB,GAAG;AAHsB,CAA/B,EAIX;AACH,QAAMC,KAAK,GAAG,8CAAgB;AAC7BC,IAAAA,cAAc,EAAE,yBAAY,eAAZ,KAAiC,CAAE,IAAF,EAAQ,IAAR,EAAc,KAAd,CADpB;AAE7BC,IAAAA,aAAa,EAAE;AAAEC,MAAAA,EAAE,EAAE,GAAN;AAAWC,MAAAA,EAAE,EAAE,IAAf;AAAqBC,MAAAA,GAAG,EAAE;AAA1B;AAFc,GAAhB,CAAd;AAIA,SACC,4BAAC,qCAAD;AACC,IAAA,KAAK,EAAG,cAAI,gBAAJ,CADT;AAEC,IAAA,KAAK,EAAGR,KAFT;AAGC,IAAA,oBAAoB,EAAGE,oBAHxB;AAIC,IAAA,KAAK,EAAGC,KAJT;AAKC,IAAA,QAAQ,EAAGF;AALZ,IADD;AASA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../../components/use-setting';\n\n/**\n * Control for letter-spacing.\n *\n * @param {Object}   props                      Component props.\n * @param {string}   props.value                Currently selected letter-spacing.\n * @param {Function} props.onChange             Handles change in letter-spacing selection.\n * @param {boolean}  props.__unstableInputWidth Input width to pass through to inner UnitControl.\n *\n * @return {WPElement}                          Letter-spacing control.\n */\nexport default function LetterSpacingControl( {\n\tvalue,\n\tonChange,\n\t__unstableInputWidth = '60px',\n} ) {\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],\n\t\tdefaultValues: { px: '2', em: '.2', rem: '.2' },\n\t} );\n\treturn (\n\t\t<UnitControl\n\t\t\tlabel={ __( 'Letter-spacing' ) }\n\t\t\tvalue={ value }\n\t\t\t__unstableInputWidth={ __unstableInputWidth }\n\t\t\tunits={ units }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n"]}

package/build/components/line-height-control/index.native.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = LineHeightControl;
+
+var _element = require("@wordpress/element");
+
+var _i18n = require("@wordpress/i18n");
+
+var _components = require("@wordpress/components");
+
+var _utils = require("./utils");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function LineHeightControl({
+  value: lineHeight,
+  onChange
+}) {
+  const isDefined = (0, _utils.isLineHeightDefined)(lineHeight);
+  const value = isDefined ? lineHeight : _utils.BASE_DEFAULT_VALUE;
+  return (0, _element.createElement)(_components.UnitControl, {
+    label: (0, _i18n.__)('Line Height'),
+    min: 0,
+    max: 5,
+    step: _utils.STEP,
+    value: value,
+    onChange: onChange,
+    units: false
+  });
+}
+//# sourceMappingURL=index.native.js.map

package/build/components/line-height-control/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/line-height-control/index.native.js"],"names":["LineHeightControl","value","lineHeight","onChange","isDefined","BASE_DEFAULT_VALUE","STEP"],"mappings":";;;;;;;;;AAGA;;AACA;;AAIA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGe,SAASA,iBAAT,CAA4B;AAAEC,EAAAA,KAAK,EAAEC,UAAT;AAAqBC,EAAAA;AAArB,CAA5B,EAA8D;AAC5E,QAAMC,SAAS,GAAG,gCAAqBF,UAArB,CAAlB;AACA,QAAMD,KAAK,GAAGG,SAAS,GAAGF,UAAH,GAAgBG,yBAAvC;AACA,SACC,4BAAC,uBAAD;AACC,IAAA,KAAK,EAAG,cAAI,aAAJ,CADT;AAEC,IAAA,GAAG,EAAG,CAFP;AAGC,IAAA,GAAG,EAAG,CAHP;AAIC,IAAA,IAAI,EAAGC,WAJR;AAKC,IAAA,KAAK,EAAGL,KALT;AAMC,IAAA,QAAQ,EAAGE,QANZ;AAOC,IAAA,KAAK,EAAG;AAPT,IADD;AAWA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { UnitControl } from '@wordpress/components';\n/**\n * Internal dependencies\n */\nimport { BASE_DEFAULT_VALUE, STEP, isLineHeightDefined } from './utils';\n\nexport default function LineHeightControl( { value: lineHeight, onChange } ) {\n\tconst isDefined = isLineHeightDefined( lineHeight );\n\tconst value = isDefined ? lineHeight : BASE_DEFAULT_VALUE;\n\treturn (\n\t\t<UnitControl\n\t\t\tlabel={ __( 'Line Height' ) }\n\t\t\tmin={ 0 }\n\t\t\tmax={ 5 }\n\t\t\tstep={ STEP }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tunits={ false }\n\t\t/>\n\t);\n}\n"]}

package/build/components/link-control/index.js

@@ -11,6 +11,8 @@ var _element = require("@wordpress/element");
 
 var _lodash = require("lodash");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _components = require("@wordpress/components");
 
 var _icons = require("@wordpress/icons");
@@ -117,6 +119,7 @@ var _constants = require("./constants");
  * @property {Object=}                    suggestionsQuery           Query parameters to pass along to wp.blockEditor.__experimentalFetchLinkSuggestions.
  * @property {boolean=}                   noURLSuggestion            Whether to add a fallback suggestion which treats the search query as a URL.
  * @property {string|Function|undefined}  createSuggestionButtonText The text to use in the button that calls createSuggestion.
+ * @property {Function}                   renderControlBottom        Optional controls to be rendered at the bottom of the component.
  */
 
 /**
@@ -142,35 +145,72 @@ function LinkControl({
   suggestionsQuery = {},
   noURLSuggestion = false,
   createSuggestionButtonText,
-  hasRichPreviews = false
+  hasRichPreviews = false,
+  hasTextControl = false,
+  renderControlBottom = null
 }) {
+  var _currentInputValue$tr, _value$url, _value$url$trim;
+
   if (withCreateSuggestion === undefined && createSuggestion) {
     withCreateSuggestion = true;
   }
 
   const isMounting = (0, _element.useRef)(true);
   const wrapperNode = (0, _element.useRef)();
-  const [internalInputValue, setInternalInputValue] = (0, _element.useState)(value && value.url || '');
+  const textInputRef = (0, _element.useRef)();
+  const [internalInputValue, setInternalInputValue] = (0, _element.useState)((value === null || value === void 0 ? void 0 : value.url) || '');
+  const [internalTextValue, setInternalTextValue] = (0, _element.useState)((value === null || value === void 0 ? void 0 : value.title) || '');
   const currentInputValue = propInputValue || internalInputValue;
   const [isEditingLink, setIsEditingLink] = (0, _element.useState)(forceIsEditingLink !== undefined ? forceIsEditingLink : !value || !value.url);
   const isEndingEditWithFocus = (0, _element.useRef)(false);
+  const currentInputIsEmpty = !(currentInputValue !== null && currentInputValue !== void 0 && (_currentInputValue$tr = currentInputValue.trim()) !== null && _currentInputValue$tr !== void 0 && _currentInputValue$tr.length);
   (0, _element.useEffect)(() => {
     if (forceIsEditingLink !== undefined && forceIsEditingLink !== isEditingLink) {
       setIsEditingLink(forceIsEditingLink);
     }
   }, [forceIsEditingLink]);
   (0, _element.useEffect)(() => {
+    // We don't auto focus into the Link UI on mount
+    // because otherwise using the keyboard to select text
+    // *within* the link format is not possible.
     if (isMounting.current) {
       isMounting.current = false;
       return;
-    } // When switching between editable and non editable LinkControl
-    // move focus to the first element to avoid focus loss.
+    } // Unless we are mounting, we always want to focus either:
+    // - the URL input
+    // - the first focusable element in the Link UI.
+    // But in editing mode if there is a text input present then
+    // the URL input is at index 1. If not then it is at index 0.
+
 
+    const whichFocusTargetIndex = textInputRef !== null && textInputRef !== void 0 && textInputRef.current ? 1 : 0; // Scenario - when:
+    // - switching between editable and non editable LinkControl
+    // - clicking on a link
+    // ...then move focus to the *first* element to avoid focus loss
+    // and to ensure focus is *within* the Link UI.
 
-    const nextFocusTarget = _dom.focus.focusable.find(wrapperNode.current)[0] || wrapperNode.current;
+    const nextFocusTarget = _dom.focus.focusable.find(wrapperNode.current)[whichFocusTargetIndex] || wrapperNode.current;
     nextFocusTarget.focus();
     isEndingEditWithFocus.current = false;
   }, [isEditingLink]);
+  (0, _element.useEffect)(() => {
+    /**
+     * If the value's `text` property changes then sync this
+     * back up with state.
+     */
+    if (value !== null && value !== void 0 && value.title && value.title !== internalTextValue) {
+      setInternalTextValue(value.title);
+    }
+    /**
+     * Update the state value internalInputValue if the url value changes
+     * for example when clicking on another anchor
+     */
+
+
+    if (value !== null && value !== void 0 && value.url) {
+      setInternalInputValue(value.url);
+    }
+  }, [value]);
   /**
    * Cancels editing state and marks that focus may need to be restored after
    * the next render, if focus was within the wrapper when editing finished.
@@ -190,22 +230,41 @@ function LinkControl({
   } = (0, _useCreatePage.default)(createSuggestion);
 
   const handleSelectSuggestion = updatedValue => {
-    onChange(updatedValue);
+    onChange({ ...updatedValue,
+      title: internalTextValue || (updatedValue === null || updatedValue === void 0 ? void 0 : updatedValue.title)
+    });
     stopEditing();
   };
 
-  const handleSubmitButton = () => {
-    if (currentInputValue !== (value === null || value === void 0 ? void 0 : value.url)) {
+  const handleSubmit = () => {
+    if (currentInputValue !== (value === null || value === void 0 ? void 0 : value.url) || internalTextValue !== (value === null || value === void 0 ? void 0 : value.title)) {
       onChange({
-        url: currentInputValue
+        url: currentInputValue,
+        title: internalTextValue
       });
     }
 
     stopEditing();
   };
 
+  const handleSubmitWithEnter = event => {
+    const {
+      keyCode
+    } = event;
+
+    if (keyCode === _keycodes.ENTER && !currentInputIsEmpty // disallow submitting empty values.
+    ) {
+        event.preventDefault();
+        handleSubmit();
+      }
+  };
+
   const shownUnlinkControl = onRemove && value && !isEditingLink && !isCreatingPage;
-  const showSettingsDrawer = !!(settings !== null && settings !== void 0 && settings.length);
+  const showSettingsDrawer = !!(settings !== null && settings !== void 0 && settings.length); // Only show text control once a URL value has been committed
+  // and it isn't just empty whitespace.
+  // See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927.
+
+  const showTextControl = (value === null || value === void 0 ? void 0 : (_value$url = value.url) === null || _value$url === void 0 ? void 0 : (_value$url$trim = _value$url.trim()) === null || _value$url$trim === void 0 ? void 0 : _value$url$trim.length) > 0 && hasTextControl;
   return (0, _element.createElement)("div", {
     tabIndex: -1,
     ref: wrapperNode,
@@ -213,10 +272,20 @@ function LinkControl({
   }, isCreatingPage && (0, _element.createElement)("div", {
     className: "block-editor-link-control__loading"
   }, (0, _element.createElement)(_components.Spinner, null), " ", (0, _i18n.__)('Creating'), "\u2026"), (isEditingLink || !value) && !isCreatingPage && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("div", {
-    className: "block-editor-link-control__search-input-wrapper"
-  }, (0, _element.createElement)(_searchInput.default, {
+    className: (0, _classnames.default)({
+      'block-editor-link-control__search-input-wrapper': true,
+      'has-text-control': showTextControl
+    })
+  }, showTextControl && (0, _element.createElement)(_components.TextControl, {
+    ref: textInputRef,
+    className: "block-editor-link-control__field block-editor-link-control__text-content",
+    label: "Text",
+    value: internalTextValue,
+    onChange: setInternalTextValue,
+    onKeyDown: handleSubmitWithEnter
+  }), (0, _element.createElement)(_searchInput.default, {
     currentLink: value,
-    className: "block-editor-link-control__search-input",
+    className: "block-editor-link-control__field block-editor-link-control__search-input",
     placeholder: searchInputPlaceholder,
     value: currentInputValue,
     withCreateSuggestion: withCreateSuggestion,
@@ -228,24 +297,17 @@ function LinkControl({
     showSuggestions: showSuggestions,
     suggestionsQuery: suggestionsQuery,
     withURLSuggestion: !noURLSuggestion,
-    createSuggestionButtonText: createSuggestionButtonText
+    createSuggestionButtonText: createSuggestionButtonText,
+    useLabel: showTextControl
   }, (0, _element.createElement)("div", {
     className: "block-editor-link-control__search-actions"
   }, (0, _element.createElement)(_components.Button, {
-    onClick: () => handleSubmitButton(),
-    onKeyDown: event => {
-      const {
-        keyCode
-      } = event;
-
-      if (keyCode === _keycodes.ENTER) {
-        event.preventDefault();
-        handleSubmitButton();
-      }
-    },
+    onClick: handleSubmit,
     label: (0, _i18n.__)('Submit'),
     icon: _icons.keyboardReturn,
-    className: "block-editor-link-control__search-submit"
+    className: "block-editor-link-control__search-submit",
+    disabled: currentInputIsEmpty // disallow submitting empty values.
+
   })))), errorMessage && (0, _element.createElement)(_components.Notice, {
     className: "block-editor-link-control__search-error",
     status: "error",
@@ -255,19 +317,16 @@ function LinkControl({
     ,
     value: value,
     onEditClick: () => setIsEditingLink(true),
-    hasRichPreviews: hasRichPreviews
-  }), (showSettingsDrawer || shownUnlinkControl) && (0, _element.createElement)("div", {
+    hasRichPreviews: hasRichPreviews,
+    hasUnlinkControl: shownUnlinkControl,
+    onRemove: onRemove
+  }), showSettingsDrawer && (0, _element.createElement)("div", {
     className: "block-editor-link-control__tools"
   }, (0, _element.createElement)(_settingsDrawer.default, {
     value: value,
     settings: settings,
     onChange: onChange
-  }), shownUnlinkControl && (0, _element.createElement)(_components.Button, {
-    className: "block-editor-link-control__unlink",
-    isDestructive: true,
-    variant: "link",
-    onClick: onRemove
-  }, (0, _i18n.__)('Unlink'))));
+  })), renderControlBottom && renderControlBottom());
 }
 
 LinkControl.ViewerFill = _viewerSlot.ViewerFill;

package/build/components/link-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/link-control/index.js"],"names":["LinkControl","searchInputPlaceholder","value","settings","DEFAULT_LINK_SETTINGS","onChange","noop","onRemove","noDirectEntry","showSuggestions","showInitialSuggestions","forceIsEditingLink","createSuggestion","withCreateSuggestion","inputValue","propInputValue","suggestionsQuery","noURLSuggestion","createSuggestionButtonText","hasRichPreviews","undefined","isMounting","wrapperNode","internalInputValue","setInternalInputValue","url","currentInputValue","isEditingLink","setIsEditingLink","isEndingEditWithFocus","current","nextFocusTarget","focus","focusable","find","stopEditing","contains","ownerDocument","activeElement","createPage","isCreatingPage","errorMessage","handleSelectSuggestion","updatedValue","handleSubmitButton","shownUnlinkControl","showSettingsDrawer","length","event","keyCode","ENTER","preventDefault","keyboardReturn","ViewerFill"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { Button, Spinner, Notice } from '@wordpress/components';\nimport { keyboardReturn } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\nimport { useRef, useState, useEffect } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\nimport { ENTER } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport LinkControlSettingsDrawer from './settings-drawer';\nimport LinkControlSearchInput from './search-input';\nimport LinkPreview from './link-preview';\nimport useCreatePage from './use-create-page';\nimport { ViewerFill } from './viewer-slot';\nimport { DEFAULT_LINK_SETTINGS } from './constants';\n\n/**\n * Default properties associated with a link control value.\n *\n * @typedef WPLinkControlDefaultValue\n *\n * @property {string}   url           Link URL.\n * @property {string=}  title         Link title.\n * @property {boolean=} opensInNewTab Whether link should open in a new browser\n *                                    tab. This value is only assigned if not\n *                                    providing a custom `settings` prop.\n */\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * Custom settings values associated with a link.\n *\n * @typedef {{[setting:string]:any}} WPLinkControlSettingsValue\n */\n/* eslint-enable */\n\n/**\n * Custom settings values associated with a link.\n *\n * @typedef WPLinkControlSetting\n *\n * @property {string} id    Identifier to use as property for setting value.\n * @property {string} title Human-readable label to show in user interface.\n */\n\n/**\n * Properties associated with a link control value, composed as a union of the\n * default properties and any custom settings values.\n *\n * @typedef {WPLinkControlDefaultValue&WPLinkControlSettingsValue} WPLinkControlValue\n */\n\n/** @typedef {(nextValue:WPLinkControlValue)=>void} WPLinkControlOnChangeProp */\n\n/**\n * Properties associated with a search suggestion used within the LinkControl.\n *\n * @typedef WPLinkControlSuggestion\n *\n * @property {string} id    Identifier to use to uniquely identify the suggestion.\n * @property {string} type  Identifies the type of the suggestion (eg: `post`,\n *                          `page`, `url`...etc)\n * @property {string} title Human-readable label to show in user interface.\n * @property {string} url   A URL for the suggestion.\n */\n\n/** @typedef {(title:string)=>WPLinkControlSuggestion} WPLinkControlCreateSuggestionProp */\n\n/**\n * @typedef WPLinkControlProps\n *\n * @property {(WPLinkControlSetting[])=}  settings                   An array of settings objects. Each object will used to\n *                                                                   render a `ToggleControl` for that setting.\n * @property {boolean=}                   forceIsEditingLink         If passed as either `true` or `false`, controls the\n *                                                                   internal editing state of the component to respective\n *                                                                   show or not show the URL input field.\n * @property {WPLinkControlValue=}        value                      Current link value.\n * @property {WPLinkControlOnChangeProp=} onChange                   Value change handler, called with the updated value if\n *                                                                   the user selects a new link or updates settings.\n * @property {boolean=}                   noDirectEntry              Whether to allow turning a URL-like search query directly into a link.\n * @property {boolean=}                   showSuggestions            Whether to present suggestions when typing the URL.\n * @property {boolean=}                   showInitialSuggestions     Whether to present initial suggestions immediately.\n * @property {boolean=}                   withCreateSuggestion       Whether to allow creation of link value from suggestion.\n * @property {Object=}                    suggestionsQuery           Query parameters to pass along to wp.blockEditor.__experimentalFetchLinkSuggestions.\n * @property {boolean=}                   noURLSuggestion            Whether to add a fallback suggestion which treats the search query as a URL.\n * @property {string|Function|undefined}  createSuggestionButtonText The text to use in the button that calls createSuggestion.\n */\n\n/**\n * Renders a link control. A link control is a controlled input which maintains\n * a value associated with a link (HTML anchor element) and relevant settings\n * for how that link is expected to behave.\n *\n * @param {WPLinkControlProps} props Component props.\n */\nfunction LinkControl( {\n\tsearchInputPlaceholder,\n\tvalue,\n\tsettings = DEFAULT_LINK_SETTINGS,\n\tonChange = noop,\n\tonRemove,\n\tnoDirectEntry = false,\n\tshowSuggestions = true,\n\tshowInitialSuggestions,\n\tforceIsEditingLink,\n\tcreateSuggestion,\n\twithCreateSuggestion,\n\tinputValue: propInputValue = '',\n\tsuggestionsQuery = {},\n\tnoURLSuggestion = false,\n\tcreateSuggestionButtonText,\n\thasRichPreviews = false,\n} ) {\n\tif ( withCreateSuggestion === undefined && createSuggestion ) {\n\t\twithCreateSuggestion = true;\n\t}\n\n\tconst isMounting = useRef( true );\n\tconst wrapperNode = useRef();\n\tconst [ internalInputValue, setInternalInputValue ] = useState(\n\t\t( value && value.url ) || ''\n\t);\n\tconst currentInputValue = propInputValue || internalInputValue;\n\tconst [ isEditingLink, setIsEditingLink ] = useState(\n\t\tforceIsEditingLink !== undefined\n\t\t\t? forceIsEditingLink\n\t\t\t: ! value || ! value.url\n\t);\n\tconst isEndingEditWithFocus = useRef( false );\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\tforceIsEditingLink !== undefined &&\n\t\t\tforceIsEditingLink !== isEditingLink\n\t\t) {\n\t\t\tsetIsEditingLink( forceIsEditingLink );\n\t\t}\n\t}, [ forceIsEditingLink ] );\n\n\tuseEffect( () => {\n\t\tif ( isMounting.current ) {\n\t\t\tisMounting.current = false;\n\t\t\treturn;\n\t\t}\n\n\t\t// When switching between editable and non editable LinkControl\n\t\t// move focus to the first element to avoid focus loss.\n\t\tconst nextFocusTarget =\n\t\t\tfocus.focusable.find( wrapperNode.current )[ 0 ] ||\n\t\t\twrapperNode.current;\n\n\t\tnextFocusTarget.focus();\n\n\t\tisEndingEditWithFocus.current = false;\n\t}, [ isEditingLink ] );\n\n\t/**\n\t * Cancels editing state and marks that focus may need to be restored after\n\t * the next render, if focus was within the wrapper when editing finished.\n\t */\n\tfunction stopEditing() {\n\t\tisEndingEditWithFocus.current = !! wrapperNode.current?.contains(\n\t\t\twrapperNode.current.ownerDocument.activeElement\n\t\t);\n\n\t\tsetIsEditingLink( false );\n\t}\n\n\tconst { createPage, isCreatingPage, errorMessage } = useCreatePage(\n\t\tcreateSuggestion\n\t);\n\n\tconst handleSelectSuggestion = ( updatedValue ) => {\n\t\tonChange( updatedValue );\n\t\tstopEditing();\n\t};\n\n\tconst handleSubmitButton = () => {\n\t\tif ( currentInputValue !== value?.url ) {\n\t\t\tonChange( { url: currentInputValue } );\n\t\t}\n\t\tstopEditing();\n\t};\n\n\tconst shownUnlinkControl =\n\t\tonRemove && value && ! isEditingLink && ! isCreatingPage;\n\n\tconst showSettingsDrawer = !! settings?.length;\n\n\treturn (\n\t\t<div\n\t\t\ttabIndex={ -1 }\n\t\t\tref={ wrapperNode }\n\t\t\tclassName=\"block-editor-link-control\"\n\t\t>\n\t\t\t{ isCreatingPage && (\n\t\t\t\t<div className=\"block-editor-link-control__loading\">\n\t\t\t\t\t<Spinner /> { __( 'Creating' ) }…\n\t\t\t\t</div>\n\t\t\t) }\n\n\t\t\t{ ( isEditingLink || ! value ) && ! isCreatingPage && (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"block-editor-link-control__search-input-wrapper\">\n\t\t\t\t\t\t<LinkControlSearchInput\n\t\t\t\t\t\t\tcurrentLink={ value }\n\t\t\t\t\t\t\tclassName=\"block-editor-link-control__search-input\"\n\t\t\t\t\t\t\tplaceholder={ searchInputPlaceholder }\n\t\t\t\t\t\t\tvalue={ currentInputValue }\n\t\t\t\t\t\t\twithCreateSuggestion={ withCreateSuggestion }\n\t\t\t\t\t\t\tonCreateSuggestion={ createPage }\n\t\t\t\t\t\t\tonChange={ setInternalInputValue }\n\t\t\t\t\t\t\tonSelect={ handleSelectSuggestion }\n\t\t\t\t\t\t\tshowInitialSuggestions={ showInitialSuggestions }\n\t\t\t\t\t\t\tallowDirectEntry={ ! noDirectEntry }\n\t\t\t\t\t\t\tshowSuggestions={ showSuggestions }\n\t\t\t\t\t\t\tsuggestionsQuery={ suggestionsQuery }\n\t\t\t\t\t\t\twithURLSuggestion={ ! noURLSuggestion }\n\t\t\t\t\t\t\tcreateSuggestionButtonText={\n\t\t\t\t\t\t\t\tcreateSuggestionButtonText\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"block-editor-link-control__search-actions\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={ () => handleSubmitButton() }\n\t\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tconst { keyCode } = event;\n\t\t\t\t\t\t\t\t\t\tif ( keyCode === ENTER ) {\n\t\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\thandleSubmitButton();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Submit' ) }\n\t\t\t\t\t\t\t\t\ticon={ keyboardReturn }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-link-control__search-submit\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</LinkControlSearchInput>\n\t\t\t\t\t</div>\n\t\t\t\t\t{ errorMessage && (\n\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\tclassName=\"block-editor-link-control__search-error\"\n\t\t\t\t\t\t\tstatus=\"error\"\n\t\t\t\t\t\t\tisDismissible={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ errorMessage }\n\t\t\t\t\t\t</Notice>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ value && ! isEditingLink && ! isCreatingPage && (\n\t\t\t\t<LinkPreview\n\t\t\t\t\tkey={ value?.url } // force remount when URL changes to avoid race conditions for rich previews\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonEditClick={ () => setIsEditingLink( true ) }\n\t\t\t\t\thasRichPreviews={ hasRichPreviews }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ ( showSettingsDrawer || shownUnlinkControl ) && (\n\t\t\t\t<div className=\"block-editor-link-control__tools\">\n\t\t\t\t\t<LinkControlSettingsDrawer\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t\t{ shownUnlinkControl && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"block-editor-link-control__unlink\"\n\t\t\t\t\t\t\tisDestructive\n\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Unlink' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nLinkControl.ViewerFill = ViewerFill;\n\nexport default LinkControl;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/link-control/index.js"],"names":["LinkControl","searchInputPlaceholder","value","settings","DEFAULT_LINK_SETTINGS","onChange","noop","onRemove","noDirectEntry","showSuggestions","showInitialSuggestions","forceIsEditingLink","createSuggestion","withCreateSuggestion","inputValue","propInputValue","suggestionsQuery","noURLSuggestion","createSuggestionButtonText","hasRichPreviews","hasTextControl","renderControlBottom","undefined","isMounting","wrapperNode","textInputRef","internalInputValue","setInternalInputValue","url","internalTextValue","setInternalTextValue","title","currentInputValue","isEditingLink","setIsEditingLink","isEndingEditWithFocus","currentInputIsEmpty","trim","length","current","whichFocusTargetIndex","nextFocusTarget","focus","focusable","find","stopEditing","contains","ownerDocument","activeElement","createPage","isCreatingPage","errorMessage","handleSelectSuggestion","updatedValue","handleSubmit","handleSubmitWithEnter","event","keyCode","ENTER","preventDefault","shownUnlinkControl","showSettingsDrawer","showTextControl","keyboardReturn","ViewerFill"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Button, Spinner, Notice, TextControl } from '@wordpress/components';\nimport { keyboardReturn } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\nimport { useRef, useState, useEffect } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\nimport { ENTER } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport LinkControlSettingsDrawer from './settings-drawer';\nimport LinkControlSearchInput from './search-input';\nimport LinkPreview from './link-preview';\nimport useCreatePage from './use-create-page';\nimport { ViewerFill } from './viewer-slot';\nimport { DEFAULT_LINK_SETTINGS } from './constants';\n\n/**\n * Default properties associated with a link control value.\n *\n * @typedef WPLinkControlDefaultValue\n *\n * @property {string}   url           Link URL.\n * @property {string=}  title         Link title.\n * @property {boolean=} opensInNewTab Whether link should open in a new browser\n *                                    tab. This value is only assigned if not\n *                                    providing a custom `settings` prop.\n */\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * Custom settings values associated with a link.\n *\n * @typedef {{[setting:string]:any}} WPLinkControlSettingsValue\n */\n/* eslint-enable */\n\n/**\n * Custom settings values associated with a link.\n *\n * @typedef WPLinkControlSetting\n *\n * @property {string} id    Identifier to use as property for setting value.\n * @property {string} title Human-readable label to show in user interface.\n */\n\n/**\n * Properties associated with a link control value, composed as a union of the\n * default properties and any custom settings values.\n *\n * @typedef {WPLinkControlDefaultValue&WPLinkControlSettingsValue} WPLinkControlValue\n */\n\n/** @typedef {(nextValue:WPLinkControlValue)=>void} WPLinkControlOnChangeProp */\n\n/**\n * Properties associated with a search suggestion used within the LinkControl.\n *\n * @typedef WPLinkControlSuggestion\n *\n * @property {string} id    Identifier to use to uniquely identify the suggestion.\n * @property {string} type  Identifies the type of the suggestion (eg: `post`,\n *                          `page`, `url`...etc)\n * @property {string} title Human-readable label to show in user interface.\n * @property {string} url   A URL for the suggestion.\n */\n\n/** @typedef {(title:string)=>WPLinkControlSuggestion} WPLinkControlCreateSuggestionProp */\n\n/**\n * @typedef WPLinkControlProps\n *\n * @property {(WPLinkControlSetting[])=}  settings                   An array of settings objects. Each object will used to\n *                                                                   render a `ToggleControl` for that setting.\n * @property {boolean=}                   forceIsEditingLink         If passed as either `true` or `false`, controls the\n *                                                                   internal editing state of the component to respective\n *                                                                   show or not show the URL input field.\n * @property {WPLinkControlValue=}        value                      Current link value.\n * @property {WPLinkControlOnChangeProp=} onChange                   Value change handler, called with the updated value if\n *                                                                   the user selects a new link or updates settings.\n * @property {boolean=}                   noDirectEntry              Whether to allow turning a URL-like search query directly into a link.\n * @property {boolean=}                   showSuggestions            Whether to present suggestions when typing the URL.\n * @property {boolean=}                   showInitialSuggestions     Whether to present initial suggestions immediately.\n * @property {boolean=}                   withCreateSuggestion       Whether to allow creation of link value from suggestion.\n * @property {Object=}                    suggestionsQuery           Query parameters to pass along to wp.blockEditor.__experimentalFetchLinkSuggestions.\n * @property {boolean=}                   noURLSuggestion            Whether to add a fallback suggestion which treats the search query as a URL.\n * @property {string|Function|undefined}  createSuggestionButtonText The text to use in the button that calls createSuggestion.\n * @property {Function}                   renderControlBottom        Optional controls to be rendered at the bottom of the component.\n */\n\n/**\n * Renders a link control. A link control is a controlled input which maintains\n * a value associated with a link (HTML anchor element) and relevant settings\n * for how that link is expected to behave.\n *\n * @param {WPLinkControlProps} props Component props.\n */\nfunction LinkControl( {\n\tsearchInputPlaceholder,\n\tvalue,\n\tsettings = DEFAULT_LINK_SETTINGS,\n\tonChange = noop,\n\tonRemove,\n\tnoDirectEntry = false,\n\tshowSuggestions = true,\n\tshowInitialSuggestions,\n\tforceIsEditingLink,\n\tcreateSuggestion,\n\twithCreateSuggestion,\n\tinputValue: propInputValue = '',\n\tsuggestionsQuery = {},\n\tnoURLSuggestion = false,\n\tcreateSuggestionButtonText,\n\thasRichPreviews = false,\n\thasTextControl = false,\n\trenderControlBottom = null,\n} ) {\n\tif ( withCreateSuggestion === undefined && createSuggestion ) {\n\t\twithCreateSuggestion = true;\n\t}\n\n\tconst isMounting = useRef( true );\n\tconst wrapperNode = useRef();\n\tconst textInputRef = useRef();\n\n\tconst [ internalInputValue, setInternalInputValue ] = useState(\n\t\tvalue?.url || ''\n\t);\n\tconst [ internalTextValue, setInternalTextValue ] = useState(\n\t\tvalue?.title || ''\n\t);\n\tconst currentInputValue = propInputValue || internalInputValue;\n\tconst [ isEditingLink, setIsEditingLink ] = useState(\n\t\tforceIsEditingLink !== undefined\n\t\t\t? forceIsEditingLink\n\t\t\t: ! value || ! value.url\n\t);\n\tconst isEndingEditWithFocus = useRef( false );\n\n\tconst currentInputIsEmpty = ! currentInputValue?.trim()?.length;\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\tforceIsEditingLink !== undefined &&\n\t\t\tforceIsEditingLink !== isEditingLink\n\t\t) {\n\t\t\tsetIsEditingLink( forceIsEditingLink );\n\t\t}\n\t}, [ forceIsEditingLink ] );\n\n\tuseEffect( () => {\n\t\t// We don't auto focus into the Link UI on mount\n\t\t// because otherwise using the keyboard to select text\n\t\t// *within* the link format is not possible.\n\t\tif ( isMounting.current ) {\n\t\t\tisMounting.current = false;\n\t\t\treturn;\n\t\t}\n\t\t// Unless we are mounting, we always want to focus either:\n\t\t// - the URL input\n\t\t// - the first focusable element in the Link UI.\n\t\t// But in editing mode if there is a text input present then\n\t\t// the URL input is at index 1. If not then it is at index 0.\n\t\tconst whichFocusTargetIndex = textInputRef?.current ? 1 : 0;\n\n\t\t// Scenario - when:\n\t\t// - switching between editable and non editable LinkControl\n\t\t// - clicking on a link\n\t\t// ...then move focus to the *first* element to avoid focus loss\n\t\t// and to ensure focus is *within* the Link UI.\n\t\tconst nextFocusTarget =\n\t\t\tfocus.focusable.find( wrapperNode.current )[\n\t\t\t\twhichFocusTargetIndex\n\t\t\t] || wrapperNode.current;\n\n\t\tnextFocusTarget.focus();\n\n\t\tisEndingEditWithFocus.current = false;\n\t}, [ isEditingLink ] );\n\n\tuseEffect( () => {\n\t\t/**\n\t\t * If the value's `text` property changes then sync this\n\t\t * back up with state.\n\t\t */\n\t\tif ( value?.title && value.title !== internalTextValue ) {\n\t\t\tsetInternalTextValue( value.title );\n\t\t}\n\n\t\t/**\n\t\t * Update the state value internalInputValue if the url value changes\n\t\t * for example when clicking on another anchor\n\t\t */\n\t\tif ( value?.url ) {\n\t\t\tsetInternalInputValue( value.url );\n\t\t}\n\t}, [ value ] );\n\n\t/**\n\t * Cancels editing state and marks that focus may need to be restored after\n\t * the next render, if focus was within the wrapper when editing finished.\n\t */\n\tfunction stopEditing() {\n\t\tisEndingEditWithFocus.current = !! wrapperNode.current?.contains(\n\t\t\twrapperNode.current.ownerDocument.activeElement\n\t\t);\n\n\t\tsetIsEditingLink( false );\n\t}\n\n\tconst { createPage, isCreatingPage, errorMessage } = useCreatePage(\n\t\tcreateSuggestion\n\t);\n\n\tconst handleSelectSuggestion = ( updatedValue ) => {\n\t\tonChange( {\n\t\t\t...updatedValue,\n\t\t\ttitle: internalTextValue || updatedValue?.title,\n\t\t} );\n\t\tstopEditing();\n\t};\n\n\tconst handleSubmit = () => {\n\t\tif (\n\t\t\tcurrentInputValue !== value?.url ||\n\t\t\tinternalTextValue !== value?.title\n\t\t) {\n\t\t\tonChange( {\n\t\t\t\turl: currentInputValue,\n\t\t\t\ttitle: internalTextValue,\n\t\t\t} );\n\t\t}\n\t\tstopEditing();\n\t};\n\n\tconst handleSubmitWithEnter = ( event ) => {\n\t\tconst { keyCode } = event;\n\t\tif (\n\t\t\tkeyCode === ENTER &&\n\t\t\t! currentInputIsEmpty // disallow submitting empty values.\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\thandleSubmit();\n\t\t}\n\t};\n\n\tconst shownUnlinkControl =\n\t\tonRemove && value && ! isEditingLink && ! isCreatingPage;\n\n\tconst showSettingsDrawer = !! settings?.length;\n\n\t// Only show text control once a URL value has been committed\n\t// and it isn't just empty whitespace.\n\t// See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927.\n\tconst showTextControl = value?.url?.trim()?.length > 0 && hasTextControl;\n\n\treturn (\n\t\t<div\n\t\t\ttabIndex={ -1 }\n\t\t\tref={ wrapperNode }\n\t\t\tclassName=\"block-editor-link-control\"\n\t\t>\n\t\t\t{ isCreatingPage && (\n\t\t\t\t<div className=\"block-editor-link-control__loading\">\n\t\t\t\t\t<Spinner /> { __( 'Creating' ) }…\n\t\t\t\t</div>\n\t\t\t) }\n\n\t\t\t{ ( isEditingLink || ! value ) && ! isCreatingPage && (\n\t\t\t\t<>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ classnames( {\n\t\t\t\t\t\t\t'block-editor-link-control__search-input-wrapper': true,\n\t\t\t\t\t\t\t'has-text-control': showTextControl,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ showTextControl && (\n\t\t\t\t\t\t\t<TextControl\n\t\t\t\t\t\t\t\tref={ textInputRef }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-link-control__field block-editor-link-control__text-content\"\n\t\t\t\t\t\t\t\tlabel=\"Text\"\n\t\t\t\t\t\t\t\tvalue={ internalTextValue }\n\t\t\t\t\t\t\t\tonChange={ setInternalTextValue }\n\t\t\t\t\t\t\t\tonKeyDown={ handleSubmitWithEnter }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t<LinkControlSearchInput\n\t\t\t\t\t\t\tcurrentLink={ value }\n\t\t\t\t\t\t\tclassName=\"block-editor-link-control__field block-editor-link-control__search-input\"\n\t\t\t\t\t\t\tplaceholder={ searchInputPlaceholder }\n\t\t\t\t\t\t\tvalue={ currentInputValue }\n\t\t\t\t\t\t\twithCreateSuggestion={ withCreateSuggestion }\n\t\t\t\t\t\t\tonCreateSuggestion={ createPage }\n\t\t\t\t\t\t\tonChange={ setInternalInputValue }\n\t\t\t\t\t\t\tonSelect={ handleSelectSuggestion }\n\t\t\t\t\t\t\tshowInitialSuggestions={ showInitialSuggestions }\n\t\t\t\t\t\t\tallowDirectEntry={ ! noDirectEntry }\n\t\t\t\t\t\t\tshowSuggestions={ showSuggestions }\n\t\t\t\t\t\t\tsuggestionsQuery={ suggestionsQuery }\n\t\t\t\t\t\t\twithURLSuggestion={ ! noURLSuggestion }\n\t\t\t\t\t\t\tcreateSuggestionButtonText={\n\t\t\t\t\t\t\t\tcreateSuggestionButtonText\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tuseLabel={ showTextControl }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"block-editor-link-control__search-actions\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={ handleSubmit }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Submit' ) }\n\t\t\t\t\t\t\t\t\ticon={ keyboardReturn }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-link-control__search-submit\"\n\t\t\t\t\t\t\t\t\tdisabled={ currentInputIsEmpty } // disallow submitting empty values.\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</LinkControlSearchInput>\n\t\t\t\t\t</div>\n\t\t\t\t\t{ errorMessage && (\n\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\tclassName=\"block-editor-link-control__search-error\"\n\t\t\t\t\t\t\tstatus=\"error\"\n\t\t\t\t\t\t\tisDismissible={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ errorMessage }\n\t\t\t\t\t\t</Notice>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ value && ! isEditingLink && ! isCreatingPage && (\n\t\t\t\t<LinkPreview\n\t\t\t\t\tkey={ value?.url } // force remount when URL changes to avoid race conditions for rich previews\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonEditClick={ () => setIsEditingLink( true ) }\n\t\t\t\t\thasRichPreviews={ hasRichPreviews }\n\t\t\t\t\thasUnlinkControl={ shownUnlinkControl }\n\t\t\t\t\tonRemove={ onRemove }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ showSettingsDrawer && (\n\t\t\t\t<div className=\"block-editor-link-control__tools\">\n\t\t\t\t\t<LinkControlSettingsDrawer\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ renderControlBottom && renderControlBottom() }\n\t\t</div>\n\t);\n}\n\nLinkControl.ViewerFill = ViewerFill;\n\nexport default LinkControl;\n"]}

package/build/components/link-control/link-preview.js

@@ -19,6 +19,8 @@ var _url = require("@wordpress/url");
 
 var _icons = require("@wordpress/icons");
 
+var _dom = require("@wordpress/dom");
+
 var _viewerSlot = require("./viewer-slot");
 
 var _useRichUrlData = _interopRequireDefault(require("./use-rich-url-data"));
@@ -37,7 +39,9 @@ var _useRichUrlData = _interopRequireDefault(require("./use-rich-url-data"));
 function LinkPreview({
   value,
   onEditClick,
-  hasRichPreviews = false
+  hasRichPreviews = false,
+  hasUnlinkControl = false,
+  onRemove
 }) {
   // Avoid fetching if rich previews are not desired.
   const showRichPreviews = hasRichPreviews ? value === null || value === void 0 ? void 0 : value.url : null;
@@ -48,6 +52,26 @@ function LinkPreview({
 
   const hasRichData = richData && Object.keys(richData).length;
   const displayURL = value && (0, _url.filterURLForDisplay)((0, _url.safeDecodeURI)(value.url), 16) || '';
+  const displayTitle = (richData === null || richData === void 0 ? void 0 : richData.title) || (value === null || value === void 0 ? void 0 : value.title) || displayURL;
+  const isEmptyURL = !value.url.length;
+  let icon;
+
+  if (richData !== null && richData !== void 0 && richData.icon) {
+    icon = (0, _element.createElement)("img", {
+      src: richData === null || richData === void 0 ? void 0 : richData.icon,
+      alt: ""
+    });
+  } else if (isEmptyURL) {
+    icon = (0, _element.createElement)(_icons.Icon, {
+      icon: _icons.info,
+      size: 32
+    });
+  } else {
+    icon = (0, _element.createElement)(_icons.Icon, {
+      icon: _icons.globe
+    });
+  }
+
   return (0, _element.createElement)("div", {
     "aria-label": (0, _i18n.__)('Currently selected'),
     "aria-selected": "true",
@@ -55,7 +79,8 @@ function LinkPreview({
       'is-current': true,
       'is-rich': hasRichData,
       'is-fetching': !!isFetching,
-      'is-preview': true
+      'is-preview': true,
+      'is-error': isEmptyURL
     })
   }, (0, _element.createElement)("div", {
     className: "block-editor-link-control__search-item-top"
@@ -65,23 +90,28 @@ function LinkPreview({
     className: (0, _classnames.default)('block-editor-link-control__search-item-icon', {
       'is-image': richData === null || richData === void 0 ? void 0 : richData.icon
     })
-  }, richData !== null && richData !== void 0 && richData.icon ? (0, _element.createElement)("img", {
-    src: richData === null || richData === void 0 ? void 0 : richData.icon,
-    alt: ""
-  }) : (0, _element.createElement)(_icons.Icon, {
-    icon: _icons.globe
-  })), (0, _element.createElement)("span", {
+  }, icon), (0, _element.createElement)("span", {
     className: "block-editor-link-control__search-item-details"
-  }, (0, _element.createElement)(_components.ExternalLink, {
+  }, !isEmptyURL ? (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.ExternalLink, {
     className: "block-editor-link-control__search-item-title",
     href: value.url
-  }, (richData === null || richData === void 0 ? void 0 : richData.title) || (value === null || value === void 0 ? void 0 : value.title) || displayURL), (value === null || value === void 0 ? void 0 : value.url) && (0, _element.createElement)("span", {
+  }, (0, _dom.__unstableStripHTML)(displayTitle)), (value === null || value === void 0 ? void 0 : value.url) && (0, _element.createElement)("span", {
     className: "block-editor-link-control__search-item-info"
-  }, displayURL))), (0, _element.createElement)(_components.Button, {
-    variant: "secondary",
-    onClick: () => onEditClick(),
-    className: "block-editor-link-control__search-item-action"
-  }, (0, _i18n.__)('Edit')), (0, _element.createElement)(_viewerSlot.ViewerSlot, {
+  }, displayURL)) : (0, _element.createElement)("span", {
+    className: "block-editor-link-control__search-item-error-notice"
+  }, "Link is empty"))), (0, _element.createElement)(_components.Button, {
+    icon: _icons.edit,
+    label: (0, _i18n.__)('Edit'),
+    className: "block-editor-link-control__search-item-action",
+    onClick: onEditClick,
+    iconSize: 24
+  }), hasUnlinkControl && (0, _element.createElement)(_components.Button, {
+    icon: _icons.linkOff,
+    label: (0, _i18n.__)('Unlink'),
+    className: "block-editor-link-control__search-item-action block-editor-link-control__unlink",
+    onClick: onRemove,
+    iconSize: 24
+  }), (0, _element.createElement)(_viewerSlot.ViewerSlot, {
     fillProps: value
   })), (hasRichData && ((richData === null || richData === void 0 ? void 0 : richData.image) || (richData === null || richData === void 0 ? void 0 : richData.description)) || isFetching) && (0, _element.createElement)("div", {
     className: "block-editor-link-control__search-item-bottom"