@wordpress/block-editor 11.3.4 → 11.3.6

package/build/components/inserter/media-tab/media-preview.js

@@ -0,0 +1,242 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaPreview = MediaPreview;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+var _blocks = require("@wordpress/blocks");
+
+var _icons = require("@wordpress/icons");
+
+var _data = require("@wordpress/data");
+
+var _notices = require("@wordpress/notices");
+
+var _blob = require("@wordpress/blob");
+
+var _inserterDraggableBlocks = _interopRequireDefault(require("../../inserter-draggable-blocks"));
+
+var _utils = require("./utils");
+
+var _store = require("../../../store");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const ALLOWED_MEDIA_TYPES = ['image'];
+const MAXIMUM_TITLE_LENGTH = 25;
+const MEDIA_OPTIONS_POPOVER_PROPS = {
+  position: 'bottom left',
+  className: 'block-editor-inserter__media-list__item-preview-options__popover'
+};
+
+function MediaPreviewOptions(_ref) {
+  let {
+    category,
+    media
+  } = _ref;
+
+  if (!category.getReportUrl) {
+    return null;
+  }
+
+  const reportUrl = category.getReportUrl(media);
+  return (0, _element.createElement)(_components.DropdownMenu, {
+    className: "block-editor-inserter__media-list__item-preview-options",
+    label: (0, _i18n.__)('Options'),
+    popoverProps: MEDIA_OPTIONS_POPOVER_PROPS,
+    icon: _icons.moreVertical
+  }, () => (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.MenuItem, {
+    onClick: () => window.open(reportUrl, '_blank').focus(),
+    icon: _icons.external
+  }, (0, _i18n.sprintf)(
+  /* translators: %s: The media type to report e.g: "image", "video", "audio" */
+  (0, _i18n.__)('Report %s'), category.mediaType))));
+}
+
+function InsertExternalImageModal(_ref2) {
+  let {
+    onClose,
+    onSubmit
+  } = _ref2;
+  return (0, _element.createElement)(_components.Modal, {
+    title: (0, _i18n.__)('Insert external image'),
+    onRequestClose: onClose,
+    className: "block-editor-inserter-media-tab-media-preview-inserter-external-image-modal"
+  }, (0, _element.createElement)(_components.__experimentalVStack, {
+    spacing: 3
+  }, (0, _element.createElement)("p", null, (0, _i18n.__)('This image cannot be uploaded to your Media Library, but it can still be inserted as an external image.')), (0, _element.createElement)("p", null, (0, _i18n.__)('External images can be removed by the external provider without warning and could even have legal compliance issues related to privacy legislation.'))), (0, _element.createElement)(_components.Flex, {
+    className: "block-editor-block-lock-modal__actions",
+    justify: "flex-end",
+    expanded: false
+  }, (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.Button, {
+    variant: "tertiary",
+    onClick: onClose
+  }, (0, _i18n.__)('Cancel'))), (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.Button, {
+    variant: "primary",
+    onClick: onSubmit
+  }, (0, _i18n.__)('Insert')))));
+}
+
+function MediaPreview(_ref3) {
+  var _media$title;
+
+  let {
+    media,
+    onClick,
+    composite,
+    category
+  } = _ref3;
+  const [showExternalUploadModal, setShowExternalUploadModal] = (0, _element.useState)(false);
+  const [isHovered, setIsHovered] = (0, _element.useState)(false);
+  const [isInserting, setIsInserting] = (0, _element.useState)(false);
+  const [block, preview] = (0, _element.useMemo)(() => (0, _utils.getBlockAndPreviewFromMedia)(media, category.mediaType), [media, category.mediaType]);
+  const {
+    createErrorNotice,
+    createSuccessNotice
+  } = (0, _data.useDispatch)(_notices.store);
+  const mediaUpload = (0, _data.useSelect)(select => select(_store.store).getSettings().mediaUpload, []);
+  const onMediaInsert = (0, _element.useCallback)(previewBlock => {
+    // Prevent multiple uploads when we're in the process of inserting.
+    if (isInserting) {
+      return;
+    }
+
+    const clonedBlock = (0, _blocks.cloneBlock)(previewBlock);
+    const {
+      id,
+      url,
+      caption
+    } = clonedBlock.attributes; // Media item already exists in library, so just insert it.
+
+    if (!!id) {
+      onClick(clonedBlock);
+      return;
+    }
+
+    setIsInserting(true); // Media item does not exist in library, so try to upload it.
+    // Fist fetch the image data. This may fail if the image host
+    // doesn't allow CORS with the domain.
+    // If this happens, we insert the image block using the external
+    // URL and let the user know about the possible implications.
+
+    window.fetch(url).then(response => response.blob()).then(blob => {
+      mediaUpload({
+        filesList: [blob],
+        additionalData: {
+          caption
+        },
+
+        onFileChange(_ref4) {
+          let [img] = _ref4;
+
+          if ((0, _blob.isBlobURL)(img.url)) {
+            return;
+          }
+
+          onClick({ ...clonedBlock,
+            attributes: { ...clonedBlock.attributes,
+              id: img.id,
+              url: img.url
+            }
+          });
+          createSuccessNotice((0, _i18n.__)('Image uploaded and inserted.'), {
+            type: 'snackbar'
+          });
+          setIsInserting(false);
+        },
+
+        allowedTypes: ALLOWED_MEDIA_TYPES,
+
+        onError(message) {
+          createErrorNotice(message, {
+            type: 'snackbar'
+          });
+          setIsInserting(false);
+        }
+
+      });
+    }).catch(() => {
+      setShowExternalUploadModal(true);
+      setIsInserting(false);
+    });
+  }, [isInserting, onClick, mediaUpload, createErrorNotice, createSuccessNotice]);
+  const title = ((_media$title = media.title) === null || _media$title === void 0 ? void 0 : _media$title.rendered) || media.title;
+  let truncatedTitle;
+
+  if (title.length > MAXIMUM_TITLE_LENGTH) {
+    const omission = '...';
+    truncatedTitle = title.slice(0, MAXIMUM_TITLE_LENGTH - omission.length) + omission;
+  }
+
+  const onMouseEnter = (0, _element.useCallback)(() => setIsHovered(true), []);
+  const onMouseLeave = (0, _element.useCallback)(() => setIsHovered(false), []);
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_inserterDraggableBlocks.default, {
+    isEnabled: true,
+    blocks: [block]
+  }, _ref5 => {
+    let {
+      draggable,
+      onDragStart,
+      onDragEnd
+    } = _ref5;
+    return (0, _element.createElement)("div", {
+      className: (0, _classnames.default)('block-editor-inserter__media-list__list-item', {
+        'is-hovered': isHovered
+      }),
+      draggable: draggable,
+      onDragStart: onDragStart,
+      onDragEnd: onDragEnd
+    }, (0, _element.createElement)(_components.Tooltip, {
+      text: truncatedTitle || title
+    }, (0, _element.createElement)("div", {
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
+    }, (0, _element.createElement)(_components.__unstableCompositeItem, (0, _extends2.default)({
+      role: "option",
+      as: "div"
+    }, composite, {
+      className: "block-editor-inserter__media-list__item",
+      onClick: () => onMediaInsert(block),
+      "aria-label": title
+    }), (0, _element.createElement)("div", {
+      className: "block-editor-inserter__media-list__item-preview"
+    }, preview, isInserting && (0, _element.createElement)("div", {
+      className: "block-editor-inserter__media-list__item-preview-spinner"
+    }, (0, _element.createElement)(_components.Spinner, null)))), !isInserting && (0, _element.createElement)(MediaPreviewOptions, {
+      category: category,
+      media: media
+    }))));
+  }), showExternalUploadModal && (0, _element.createElement)(InsertExternalImageModal, {
+    onClose: () => setShowExternalUploadModal(false),
+    onSubmit: () => {
+      onClick((0, _blocks.cloneBlock)(block));
+      createSuccessNotice((0, _i18n.__)('Image inserted.'), {
+        type: 'snackbar'
+      });
+      setShowExternalUploadModal(false);
+    }
+  }));
+}
+//# sourceMappingURL=media-preview.js.map

package/build/components/inserter/media-tab/media-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/media-tab/media-preview.js"],"names":["ALLOWED_MEDIA_TYPES","MAXIMUM_TITLE_LENGTH","MEDIA_OPTIONS_POPOVER_PROPS","position","className","MediaPreviewOptions","category","media","getReportUrl","reportUrl","moreVertical","window","open","focus","external","mediaType","InsertExternalImageModal","onClose","onSubmit","MediaPreview","onClick","composite","showExternalUploadModal","setShowExternalUploadModal","isHovered","setIsHovered","isInserting","setIsInserting","block","preview","createErrorNotice","createSuccessNotice","noticesStore","mediaUpload","select","blockEditorStore","getSettings","onMediaInsert","previewBlock","clonedBlock","id","url","caption","attributes","fetch","then","response","blob","filesList","additionalData","onFileChange","img","type","allowedTypes","onError","message","catch","title","rendered","truncatedTitle","length","omission","slice","onMouseEnter","onMouseLeave","draggable","onDragStart","onDragEnd"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__unstableCompositeItem as CompositeItem,\n\tTooltip,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n\tSpinner,\n\tModal,\n\tFlex,\n\tFlexItem,\n\tButton,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useMemo, useCallback, useState } from '@wordpress/element';\nimport { cloneBlock } from '@wordpress/blocks';\nimport { moreVertical, external } from '@wordpress/icons';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { isBlobURL } from '@wordpress/blob';\n\n/**\n * Internal dependencies\n */\nimport InserterDraggableBlocks from '../../inserter-draggable-blocks';\nimport { getBlockAndPreviewFromMedia } from './utils';\nimport { store as blockEditorStore } from '../../../store';\n\nconst ALLOWED_MEDIA_TYPES = [ 'image' ];\nconst MAXIMUM_TITLE_LENGTH = 25;\nconst MEDIA_OPTIONS_POPOVER_PROPS = {\n\tposition: 'bottom left',\n\tclassName:\n\t\t'block-editor-inserter__media-list__item-preview-options__popover',\n};\n\nfunction MediaPreviewOptions( { category, media } ) {\n\tif ( ! category.getReportUrl ) {\n\t\treturn null;\n\t}\n\tconst reportUrl = category.getReportUrl( media );\n\treturn (\n\t\t<DropdownMenu\n\t\t\tclassName=\"block-editor-inserter__media-list__item-preview-options\"\n\t\t\tlabel={ __( 'Options' ) }\n\t\t\tpopoverProps={ MEDIA_OPTIONS_POPOVER_PROPS }\n\t\t\ticon={ moreVertical }\n\t\t>\n\t\t\t{ () => (\n\t\t\t\t<MenuGroup>\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\twindow.open( reportUrl, '_blank' ).focus()\n\t\t\t\t\t\t}\n\t\t\t\t\t\ticon={ external }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t/* translators: %s: The media type to report e.g: \"image\", \"video\", \"audio\" */\n\t\t\t\t\t\t\t__( 'Report %s' ),\n\t\t\t\t\t\t\tcategory.mediaType\n\t\t\t\t\t\t) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction InsertExternalImageModal( { onClose, onSubmit } ) {\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Insert external image' ) }\n\t\t\tonRequestClose={ onClose }\n\t\t\tclassName=\"block-editor-inserter-media-tab-media-preview-inserter-external-image-modal\"\n\t\t>\n\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t<p>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'This image cannot be uploaded to your Media Library, but it can still be inserted as an external image.'\n\t\t\t\t\t) }\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'External images can be removed by the external provider without warning and could even have legal compliance issues related to privacy legislation.'\n\t\t\t\t\t) }\n\t\t\t\t</p>\n\t\t\t</VStack>\n\t\t\t<Flex\n\t\t\t\tclassName=\"block-editor-block-lock-modal__actions\"\n\t\t\t\tjustify=\"flex-end\"\n\t\t\t\texpanded={ false }\n\t\t\t>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button variant=\"tertiary\" onClick={ onClose }>\n\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button variant=\"primary\" onClick={ onSubmit }>\n\t\t\t\t\t\t{ __( 'Insert' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t</Modal>\n\t);\n}\n\nexport function MediaPreview( { media, onClick, composite, category } ) {\n\tconst [ showExternalUploadModal, setShowExternalUploadModal ] =\n\t\tuseState( false );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ isInserting, setIsInserting ] = useState( false );\n\tconst [ block, preview ] = useMemo(\n\t\t() => getBlockAndPreviewFromMedia( media, category.mediaType ),\n\t\t[ media, category.mediaType ]\n\t);\n\tconst { createErrorNotice, createSuccessNotice } =\n\t\tuseDispatch( noticesStore );\n\tconst mediaUpload = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings().mediaUpload,\n\t\t[]\n\t);\n\tconst onMediaInsert = useCallback(\n\t\t( previewBlock ) => {\n\t\t\t// Prevent multiple uploads when we're in the process of inserting.\n\t\t\tif ( isInserting ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst clonedBlock = cloneBlock( previewBlock );\n\t\t\tconst { id, url, caption } = clonedBlock.attributes;\n\t\t\t// Media item already exists in library, so just insert it.\n\t\t\tif ( !! id ) {\n\t\t\t\tonClick( clonedBlock );\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetIsInserting( true );\n\t\t\t// Media item does not exist in library, so try to upload it.\n\t\t\t// Fist fetch the image data. This may fail if the image host\n\t\t\t// doesn't allow CORS with the domain.\n\t\t\t// If this happens, we insert the image block using the external\n\t\t\t// URL and let the user know about the possible implications.\n\t\t\twindow\n\t\t\t\t.fetch( url )\n\t\t\t\t.then( ( response ) => response.blob() )\n\t\t\t\t.then( ( blob ) => {\n\t\t\t\t\tmediaUpload( {\n\t\t\t\t\t\tfilesList: [ blob ],\n\t\t\t\t\t\tadditionalData: { caption },\n\t\t\t\t\t\tonFileChange( [ img ] ) {\n\t\t\t\t\t\t\tif ( isBlobURL( img.url ) ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick( {\n\t\t\t\t\t\t\t\t...clonedBlock,\n\t\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\t\t...clonedBlock.attributes,\n\t\t\t\t\t\t\t\t\tid: img.id,\n\t\t\t\t\t\t\t\t\turl: img.url,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\tcreateSuccessNotice(\n\t\t\t\t\t\t\t\t__( 'Image uploaded and inserted.' ),\n\t\t\t\t\t\t\t\t{ type: 'snackbar' }\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t\t\t},\n\t\t\t\t\t\tallowedTypes: ALLOWED_MEDIA_TYPES,\n\t\t\t\t\t\tonError( message ) {\n\t\t\t\t\t\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t\t\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t\t\t},\n\t\t\t\t\t} );\n\t\t\t\t} )\n\t\t\t\t.catch( () => {\n\t\t\t\t\tsetShowExternalUploadModal( true );\n\t\t\t\t\tsetIsInserting( false );\n\t\t\t\t} );\n\t\t},\n\t\t[\n\t\t\tisInserting,\n\t\t\tonClick,\n\t\t\tmediaUpload,\n\t\t\tcreateErrorNotice,\n\t\t\tcreateSuccessNotice,\n\t\t]\n\t);\n\tconst title = media.title?.rendered || media.title;\n\tlet truncatedTitle;\n\tif ( title.length > MAXIMUM_TITLE_LENGTH ) {\n\t\tconst omission = '...';\n\t\ttruncatedTitle =\n\t\t\ttitle.slice( 0, MAXIMUM_TITLE_LENGTH - omission.length ) + omission;\n\t}\n\tconst onMouseEnter = useCallback( () => setIsHovered( true ), [] );\n\tconst onMouseLeave = useCallback( () => setIsHovered( false ), [] );\n\treturn (\n\t\t<>\n\t\t\t<InserterDraggableBlocks isEnabled={ true } blocks={ [ block ] }>\n\t\t\t\t{ ( { draggable, onDragStart, onDragEnd } ) => (\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-inserter__media-list__list-item',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-hovered': isHovered,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tdraggable={ draggable }\n\t\t\t\t\t\tonDragStart={ onDragStart }\n\t\t\t\t\t\tonDragEnd={ onDragEnd }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Tooltip text={ truncatedTitle || title }>\n\t\t\t\t\t\t\t{ /* Adding `is-hovered` class to the wrapper element is needed\n\t\t\t\t\t\t\tbecause the options Popover is rendered outside of this node. */ }\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tonMouseEnter={ onMouseEnter }\n\t\t\t\t\t\t\t\tonMouseLeave={ onMouseLeave }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\tas=\"div\"\n\t\t\t\t\t\t\t\t\t{ ...composite }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-inserter__media-list__item\"\n\t\t\t\t\t\t\t\t\tonClick={ () => onMediaInsert( block ) }\n\t\t\t\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div className=\"block-editor-inserter__media-list__item-preview\">\n\t\t\t\t\t\t\t\t\t\t{ preview }\n\t\t\t\t\t\t\t\t\t\t{ isInserting && (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"block-editor-inserter__media-list__item-preview-spinner\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</CompositeItem>\n\t\t\t\t\t\t\t\t{ ! isInserting && (\n\t\t\t\t\t\t\t\t\t<MediaPreviewOptions\n\t\t\t\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t\t\t\t\tmedia={ media }\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</div>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</InserterDraggableBlocks>\n\t\t\t{ showExternalUploadModal && (\n\t\t\t\t<InsertExternalImageModal\n\t\t\t\t\tonClose={ () => setShowExternalUploadModal( false ) }\n\t\t\t\t\tonSubmit={ () => {\n\t\t\t\t\t\tonClick( cloneBlock( block ) );\n\t\t\t\t\t\tcreateSuccessNotice( __( 'Image inserted.' ), {\n\t\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tsetShowExternalUploadModal( false );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}

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

@@ -13,6 +13,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _components = require("@wordpress/components");
 
+var _icons = require("@wordpress/icons");
+
 var _i18n = require("@wordpress/i18n");
 
 var _dom = require("@wordpress/dom");
@@ -131,7 +133,7 @@ const noop = () => {};
 
 
 function LinkControl(_ref) {
-  var _value$url, _value$url$trim, _currentUrlInputValue;
+  var _currentUrlInputValue, _value$url, _value$url$trim;
 
   let {
     searchInputPlaceholder,
@@ -139,7 +141,6 @@ function LinkControl(_ref) {
     settings = _constants.DEFAULT_LINK_SETTINGS,
     onChange = noop,
     onRemove,
-    onCancel,
     noDirectEntry = false,
     showSuggestions = true,
     showInitialSuggestions,
@@ -200,7 +201,6 @@ function LinkControl(_ref) {
     nextFocusTarget.focus();
     isEndingEditWithFocus.current = false;
   }, [isEditingLink, isCreatingPage]);
-  const hasLinkValue = (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;
   /**
    * 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.
@@ -243,28 +243,6 @@ function LinkControl(_ref) {
     }
   };
 
-  const resetInternalValues = () => {
-    setInternalUrlInputValue(value === null || value === void 0 ? void 0 : value.url);
-    setInternalTextInputValue(value === null || value === void 0 ? void 0 : value.title);
-  };
-
-  const handleCancel = event => {
-    event.preventDefault();
-    event.stopPropagation(); // Ensure that any unsubmitted input changes are reset.
-
-    resetInternalValues();
-
-    if (hasLinkValue) {
-      // If there is a link then exist editing mode and show preview.
-      stopEditing();
-    } else {
-      // If there is no link value, then remove the link entirely.
-      onRemove === null || onRemove === void 0 ? void 0 : onRemove();
-    }
-
-    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-  };
-
   const currentUrlInputValue = propInputValue || internalUrlInputValue;
   const currentInputIsEmpty = !(currentUrlInputValue !== null && currentUrlInputValue !== void 0 && (_currentUrlInputValue = currentUrlInputValue.trim()) !== null && _currentUrlInputValue !== void 0 && _currentUrlInputValue.length);
   const shownUnlinkControl = onRemove && value && !isEditingLink && !isCreatingPage;
@@ -272,15 +250,14 @@ function LinkControl(_ref) {
   // and it isn't just empty whitespace.
   // See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927.
 
-  const showTextControl = hasLinkValue && hasTextControl;
-  const isEditing = (isEditingLink || !value) && !isCreatingPage;
+  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,
     className: "block-editor-link-control"
   }, isCreatingPage && (0, _element.createElement)("div", {
     className: "block-editor-link-control__loading"
-  }, (0, _element.createElement)(_components.Spinner, null), " ", (0, _i18n.__)('Creating'), "\u2026"), isEditing && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("div", {
+  }, (0, _element.createElement)(_components.Spinner, null), " ", (0, _i18n.__)('Creating'), "\u2026"), (isEditingLink || !value) && !isCreatingPage && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("div", {
     className: (0, _classnames.default)({
       'block-editor-link-control__search-input-wrapper': true,
       'has-text-control': showTextControl
@@ -309,7 +286,16 @@ function LinkControl(_ref) {
     withURLSuggestion: !noURLSuggestion,
     createSuggestionButtonText: createSuggestionButtonText,
     useLabel: showTextControl
-  })), errorMessage && (0, _element.createElement)(_components.Notice, {
+  }, (0, _element.createElement)("div", {
+    className: "block-editor-link-control__search-actions"
+  }, (0, _element.createElement)(_components.Button, {
+    onClick: handleSubmit,
+    label: (0, _i18n.__)('Submit'),
+    icon: _icons.keyboardReturn,
+    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",
     isDismissible: false
@@ -321,26 +307,13 @@ function LinkControl(_ref) {
     hasRichPreviews: hasRichPreviews,
     hasUnlinkControl: shownUnlinkControl,
     onRemove: onRemove
-  }), (0, _element.createElement)("div", {
-    className: "block-editor-link-control__drawer"
-  }, showSettingsDrawer && (0, _element.createElement)("div", {
+  }), showSettingsDrawer && (0, _element.createElement)("div", {
     className: "block-editor-link-control__tools"
   }, (0, _element.createElement)(_settingsDrawer.default, {
     value: value,
     settings: settings,
     onChange: onChange
-  })), isEditing && (0, _element.createElement)("div", {
-    className: "block-editor-link-control__search-actions"
-  }, (0, _element.createElement)(_components.Button, {
-    variant: "primary",
-    onClick: handleSubmit,
-    className: "xblock-editor-link-control__search-submit",
-    disabled: currentInputIsEmpty // Disallow submitting empty values.
-
-  }, (0, _i18n.__)('Apply')), (0, _element.createElement)(_components.Button, {
-    variant: "tertiary",
-    onClick: handleCancel
-  }, (0, _i18n.__)('Cancel')))), renderControlBottom && renderControlBottom());
+  })), 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":["noop","LinkControl","searchInputPlaceholder","value","settings","DEFAULT_LINK_SETTINGS","onChange","onRemove","onCancel","noDirectEntry","showSuggestions","showInitialSuggestions","forceIsEditingLink","createSuggestion","withCreateSuggestion","inputValue","propInputValue","suggestionsQuery","noURLSuggestion","createSuggestionButtonText","hasRichPreviews","hasTextControl","renderControlBottom","undefined","isMounting","wrapperNode","textInputRef","isEndingEditWithFocus","internalUrlInputValue","setInternalUrlInputValue","url","internalTextInputValue","setInternalTextInputValue","title","isEditingLink","setIsEditingLink","createPage","isCreatingPage","errorMessage","current","whichFocusTargetIndex","nextFocusTarget","focus","focusable","find","hasLinkValue","trim","length","stopEditing","contains","ownerDocument","activeElement","handleSelectSuggestion","updatedValue","handleSubmit","currentUrlInputValue","handleSubmitWithEnter","event","keyCode","ENTER","currentInputIsEmpty","preventDefault","resetInternalValues","handleCancel","stopPropagation","shownUnlinkControl","showSettingsDrawer","showTextControl","isEditing","ViewerFill"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Button, Spinner, Notice, TextControl } from '@wordpress/components';\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 useInternalInputValue from './use-internal-input-value';\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 {boolean=}                   hasTextControl             Whether to add a text field to the UI to update the value.title.\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\nconst noop = () => {};\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\tonCancel,\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\tconst isEndingEditWithFocus = useRef( false );\n\n\tconst [ internalUrlInputValue, setInternalUrlInputValue ] =\n\t\tuseInternalInputValue( value?.url || '' );\n\n\tconst [ internalTextInputValue, setInternalTextInputValue ] =\n\t\tuseInternalInputValue( value?.title || '' );\n\n\tconst [ isEditingLink, setIsEditingLink ] = useState(\n\t\tforceIsEditingLink !== undefined\n\t\t\t? forceIsEditingLink\n\t\t\t: ! value || ! value.url\n\t);\n\n\tconst { createPage, isCreatingPage, errorMessage } =\n\t\tuseCreatePage( createSuggestion );\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, isCreatingPage ] );\n\n\tconst hasLinkValue = value?.url?.trim()?.length > 0;\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\tconst 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 handleSelectSuggestion = ( updatedValue ) => {\n\t\tonChange( {\n\t\t\t...updatedValue,\n\t\t\ttitle: internalTextInputValue || updatedValue?.title,\n\t\t} );\n\t\tstopEditing();\n\t};\n\n\tconst handleSubmit = () => {\n\t\tif (\n\t\t\tcurrentUrlInputValue !== value?.url ||\n\t\t\tinternalTextInputValue !== value?.title\n\t\t) {\n\t\t\tonChange( {\n\t\t\t\t...value,\n\t\t\t\turl: currentUrlInputValue,\n\t\t\t\ttitle: internalTextInputValue,\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 resetInternalValues = () => {\n\t\tsetInternalUrlInputValue( value?.url );\n\t\tsetInternalTextInputValue( value?.title );\n\t};\n\n\tconst handleCancel = ( event ) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\n\t\t// Ensure that any unsubmitted input changes are reset.\n\t\tresetInternalValues();\n\n\t\tif ( hasLinkValue ) {\n\t\t\t// If there is a link then exist editing mode and show preview.\n\t\t\tstopEditing();\n\t\t} else {\n\t\t\t// If there is no link value, then remove the link entirely.\n\t\t\tonRemove?.();\n\t\t}\n\n\t\tonCancel?.();\n\t};\n\n\tconst currentUrlInputValue = propInputValue || internalUrlInputValue;\n\n\tconst currentInputIsEmpty = ! currentUrlInputValue?.trim()?.length;\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 = hasLinkValue && hasTextControl;\n\n\tconst isEditing = ( isEditingLink || ! value ) && ! isCreatingPage;\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{ isEditing && (\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\t__nextHasNoMarginBottom\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={ internalTextInputValue }\n\t\t\t\t\t\t\t\tonChange={ setInternalTextInputValue }\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={ currentUrlInputValue }\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={ setInternalUrlInputValue }\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</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<div className=\"block-editor-link-control__drawer\">\n\t\t\t\t{ showSettingsDrawer && (\n\t\t\t\t\t<div className=\"block-editor-link-control__tools\">\n\t\t\t\t\t\t<LinkControlSettingsDrawer\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\n\t\t\t\t{ isEditing && (\n\t\t\t\t\t<div className=\"block-editor-link-control__search-actions\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\tonClick={ handleSubmit }\n\t\t\t\t\t\t\tclassName=\"xblock-editor-link-control__search-submit\"\n\t\t\t\t\t\t\tdisabled={ currentInputIsEmpty } // Disallow submitting empty values.\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button variant=\"tertiary\" onClick={ handleCancel }>\n\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</div>\n\n\t\t\t{ renderControlBottom && renderControlBottom() }\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":["noop","LinkControl","searchInputPlaceholder","value","settings","DEFAULT_LINK_SETTINGS","onChange","onRemove","noDirectEntry","showSuggestions","showInitialSuggestions","forceIsEditingLink","createSuggestion","withCreateSuggestion","inputValue","propInputValue","suggestionsQuery","noURLSuggestion","createSuggestionButtonText","hasRichPreviews","hasTextControl","renderControlBottom","undefined","isMounting","wrapperNode","textInputRef","isEndingEditWithFocus","internalUrlInputValue","setInternalUrlInputValue","url","internalTextInputValue","setInternalTextInputValue","title","isEditingLink","setIsEditingLink","createPage","isCreatingPage","errorMessage","current","whichFocusTargetIndex","nextFocusTarget","focus","focusable","find","stopEditing","contains","ownerDocument","activeElement","handleSelectSuggestion","updatedValue","handleSubmit","currentUrlInputValue","handleSubmitWithEnter","event","keyCode","ENTER","currentInputIsEmpty","preventDefault","trim","length","shownUnlinkControl","showSettingsDrawer","showTextControl","keyboardReturn","ViewerFill"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\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 useInternalInputValue from './use-internal-input-value';\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 {boolean=}                   hasTextControl             Whether to add a text field to the UI to update the value.title.\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\nconst noop = () => {};\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\tconst isEndingEditWithFocus = useRef( false );\n\n\tconst [ internalUrlInputValue, setInternalUrlInputValue ] =\n\t\tuseInternalInputValue( value?.url || '' );\n\n\tconst [ internalTextInputValue, setInternalTextInputValue ] =\n\t\tuseInternalInputValue( value?.title || '' );\n\n\tconst [ isEditingLink, setIsEditingLink ] = useState(\n\t\tforceIsEditingLink !== undefined\n\t\t\t? forceIsEditingLink\n\t\t\t: ! value || ! value.url\n\t);\n\n\tconst { createPage, isCreatingPage, errorMessage } =\n\t\tuseCreatePage( createSuggestion );\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, isCreatingPage ] );\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\tconst 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 handleSelectSuggestion = ( updatedValue ) => {\n\t\tonChange( {\n\t\t\t...updatedValue,\n\t\t\ttitle: internalTextInputValue || updatedValue?.title,\n\t\t} );\n\t\tstopEditing();\n\t};\n\n\tconst handleSubmit = () => {\n\t\tif (\n\t\t\tcurrentUrlInputValue !== value?.url ||\n\t\t\tinternalTextInputValue !== value?.title\n\t\t) {\n\t\t\tonChange( {\n\t\t\t\t...value,\n\t\t\t\turl: currentUrlInputValue,\n\t\t\t\ttitle: internalTextInputValue,\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 currentUrlInputValue = propInputValue || internalUrlInputValue;\n\n\tconst currentInputIsEmpty = ! currentUrlInputValue?.trim()?.length;\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\t__nextHasNoMarginBottom\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={ internalTextInputValue }\n\t\t\t\t\t\t\t\tonChange={ setInternalTextInputValue }\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={ currentUrlInputValue }\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={ setInternalUrlInputValue }\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/list-view/block.js

@@ -25,6 +25,8 @@ var _i18n = require("@wordpress/i18n");
 
 var _leaf = _interopRequireDefault(require("./leaf"));
 
+var _useListViewScrollIntoView = _interopRequireDefault(require("./use-list-view-scroll-into-view"));
+
 var _button = require("../block-mover/button");
 
 var _blockContents = _interopRequireDefault(require("./block-contents"));
@@ -71,6 +73,7 @@ function ListViewBlock(_ref) {
     isSyncedBranch
   } = _ref;
   const cellRef = (0, _element.useRef)(null);
+  const rowRef = (0, _element.useRef)(null);
   const [isHovered, setIsHovered] = (0, _element.useState)(false);
   const {
     clientId
@@ -185,7 +188,15 @@ function ListViewBlock(_ref) {
   // to alter a block that isn't part of the selection, they're still able
   // to do so.
 
-  const dropdownClientIds = selectedClientIds.includes(clientId) ? selectedClientIds : [clientId];
+  const dropdownClientIds = selectedClientIds.includes(clientId) ? selectedClientIds : [clientId]; // Pass in a ref to the row, so that it can be scrolled
+  // into view when selected. For long lists, the placeholder for the
+  // selected block is also observed, within ListViewLeafPlaceholder.
+
+  (0, _useListViewScrollIntoView.default)({
+    isSelected,
+    rowItemRef: rowRef,
+    selectedClientIds
+  });
   return (0, _element.createElement)(_leaf.default, {
     className: classes,
     onMouseEnter: onMouseEnter,
@@ -199,7 +210,8 @@ function ListViewBlock(_ref) {
     id: `list-view-block-${clientId}`,
     "data-block": clientId,
     isExpanded: canExpand ? isExpanded : undefined,
-    "aria-selected": !!isSelected || forceSelectionContentLock
+    "aria-selected": !!isSelected || forceSelectionContentLock,
+    ref: rowRef
   }, (0, _element.createElement)(_components.__experimentalTreeGridCell, {
     className: "block-editor-list-view-block__contents-cell",
     colSpan: colSpan,