@wordpress/edit-post 7.22.0 → 7.23.0

package/src/components/header/document-actions/index.js

@@ -20,21 +20,18 @@ import { displayShortcut } from '@wordpress/keycodes';
 import { store as editPostStore } from '../../../store';
 
 function DocumentActions() {
-	const { template, isEditing } = useSelect( ( select ) => {
-		const { isEditingTemplate, getEditedPostTemplate } =
-			select( editPostStore );
-		const _isEditing = isEditingTemplate();
+	const { template } = useSelect( ( select ) => {
+		const { getEditedPostTemplate } = select( editPostStore );
 
 		return {
-			template: _isEditing ? getEditedPostTemplate() : null,
-			isEditing: _isEditing,
+			template: getEditedPostTemplate(),
 		};
 	}, [] );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const { setIsEditingTemplate } = useDispatch( editPostStore );
 	const { open: openCommandCenter } = useDispatch( commandsStore );
 
-	if ( ! isEditing || ! template ) {
+	if ( ! template ) {
 		return null;
 	}
 

package/src/components/header/header-toolbar/index.js

@@ -19,7 +19,6 @@ import { Button, ToolbarItem } from '@wordpress/components';
 import { listView, plus } from '@wordpress/icons';
 import { useRef, useCallback } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -33,7 +32,7 @@ const preventDefault = ( event ) => {
 	event.preventDefault();
 };
 
-function HeaderToolbar( { setListViewToggleElement } ) {
+function HeaderToolbar( { hasFixedToolbar, setListViewToggleElement } ) {
 	const inserterButton = useRef();
 	const { setIsInserterOpened, setIsListViewOpened } =
 		useDispatch( editPostStore );
@@ -44,7 +43,6 @@ function HeaderToolbar( { setListViewToggleElement } ) {
 		showIconLabels,
 		isListViewOpen,
 		listViewShortcut,
-		hasFixedToolbar,
 	} = useSelect( ( select ) => {
 		const { hasInserterItems, getBlockRootClientId, getBlockSelectionEnd } =
 			select( blockEditorStore );
@@ -52,7 +50,6 @@ function HeaderToolbar( { setListViewToggleElement } ) {
 		const { getEditorMode, isFeatureActive, isListViewOpened } =
 			select( editPostStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
-		const { get: getPreference } = select( preferencesStore );
 
 		return {
 			// This setting (richEditingEnabled) should not live in the block editor's setting.
@@ -69,7 +66,6 @@ function HeaderToolbar( { setListViewToggleElement } ) {
 			listViewShortcut: getShortcutRepresentation(
 				'core/edit-post/toggle-list-view'
 			),
-			hasFixedToolbar: getPreference( 'core/edit-post', 'fixedToolbar' ),
 		};
 	}, [] );
 

package/src/components/header/index.js

@@ -1,11 +1,28 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { next, previous } from '@wordpress/icons';
 import { PinnedItems } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
-import { __unstableMotion as motion } from '@wordpress/components';
+import {
+	Button,
+	__unstableMotion as motion,
+	Popover,
+} from '@wordpress/components';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -19,6 +36,9 @@ import ViewLink from '../view-link';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import DocumentActions from './document-actions';
+import { unlock } from '../../lock-unlock';
+
+const { BlockContextualToolbar } = unlock( blockEditorPrivateApis );
 
 const slideY = {
 	hidden: { y: '-50px' },
@@ -36,18 +56,43 @@ function Header( {
 	setEntitiesSavedStatesCallback,
 	setListViewToggleElement,
 } ) {
-	const isLargeViewport = useViewportMatch( 'large' );
-	const { hasActiveMetaboxes, isPublishSidebarOpened, showIconLabels } =
-		useSelect(
-			( select ) => ( {
-				hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-				isPublishSidebarOpened:
-					select( editPostStore ).isPublishSidebarOpened(),
-				showIconLabels:
-					select( editPostStore ).isFeatureActive( 'showIconLabels' ),
-			} ),
-			[]
-		);
+	const isWideViewport = useViewportMatch( 'large' );
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const blockToolbarRef = useRef();
+	const {
+		blockSelectionStart,
+		hasActiveMetaboxes,
+		hasFixedToolbar,
+		isEditingTemplate,
+		isPublishSidebarOpened,
+		showIconLabels,
+	} = useSelect( ( select ) => {
+		const { get: getPreference } = select( preferencesStore );
+
+		return {
+			blockSelectionStart:
+				select( blockEditorStore ).getBlockSelectionStart(),
+			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
+			isEditingTemplate: select( editPostStore ).isEditingTemplate(),
+			isPublishSidebarOpened:
+				select( editPostStore ).isPublishSidebarOpened(),
+			hasFixedToolbar: getPreference( 'core/edit-post', 'fixedToolbar' ),
+			showIconLabels:
+				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
+		};
+	}, [] );
+
+	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
+		useState( true );
+
+	const hasBlockSelected = !! blockSelectionStart;
+
+	useEffect( () => {
+		// If we have a new block selection, show the block tools
+		if ( blockSelectionStart ) {
+			setIsBlockToolsCollapsed( false );
+		}
+	}, [ blockSelectionStart ] );
 
 	return (
 		<div className="edit-post-header">
@@ -65,10 +110,52 @@ function Header( {
 				className="edit-post-header__toolbar"
 			>
 				<HeaderToolbar
+					hasFixedToolbar={ hasFixedToolbar }
 					setListViewToggleElement={ setListViewToggleElement }
 				/>
-				<div className="edit-post-header__center">
-					<DocumentActions />
+				{ hasFixedToolbar && isLargeViewport && (
+					<>
+						<div
+							className={ classnames(
+								'selected-block-tools-wrapper',
+								{
+									'is-collapsed': isBlockToolsCollapsed,
+								}
+							) }
+						>
+							<BlockContextualToolbar isFixed />
+						</div>
+						<Popover.Slot
+							ref={ blockToolbarRef }
+							name="block-toolbar"
+						/>
+						{ isEditingTemplate && hasBlockSelected && (
+							<Button
+								className="edit-post-header__block-tools-toggle"
+								icon={ isBlockToolsCollapsed ? next : previous }
+								onClick={ () => {
+									setIsBlockToolsCollapsed(
+										( collapsed ) => ! collapsed
+									);
+								} }
+								label={
+									isBlockToolsCollapsed
+										? __( 'Show block tools' )
+										: __( 'Hide block tools' )
+								}
+							/>
+						) }
+					</>
+				) }
+				<div
+					className={ classnames( 'edit-post-header__center', {
+						'is-collapsed':
+							! isBlockToolsCollapsed &&
+							isLargeViewport &&
+							isEditingTemplate,
+					} ) }
+				>
+					{ isEditingTemplate && <DocumentActions /> }
 				</div>
 			</motion.div>
 			<motion.div
@@ -96,13 +183,13 @@ function Header( {
 						setEntitiesSavedStatesCallback
 					}
 				/>
-				{ ( isLargeViewport || ! showIconLabels ) && (
+				{ ( isWideViewport || ! showIconLabels ) && (
 					<>
 						<PinnedItems.Slot scope="core/edit-post" />
 						<MoreMenu showIconLabels={ showIconLabels } />
 					</>
 				) }
-				{ showIconLabels && ! isLargeViewport && (
+				{ showIconLabels && ! isWideViewport && (
 					<MoreMenu showIconLabels={ showIconLabels } />
 				) }
 			</motion.div>

package/src/components/header/style.scss

@@ -6,6 +6,7 @@
 	align-items: center;
 	// The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket.
 	max-width: 100vw;
+	justify-content: space-between;
 
 	// Make toolbar sticky on larger breakpoints
 	@include break-zoomed-in {
@@ -33,7 +34,15 @@
 
 .edit-post-header__toolbar {
 	display: flex;
-	flex-grow: 1;
+	// Allow this area to shrink to fit the toolbar buttons.
+	flex-shrink: 8;
+	// Take up the space of the toolbar so it can be justified to the left side of the toolbar.
+	flex-grow: 3;
+	// Hide the overflow so flex will limit its width. Block toolbar will allow scrolling on fixed toolbar.
+	overflow: hidden;
+	// Leave enough room for the focus ring to show.
+	padding: 2px 0;
+	align-items: center;
 
 	.table-of-contents {
 		display: none;
@@ -42,12 +51,32 @@
 			display: block;
 		}
 	}
+
+	.block-editor-block-contextual-toolbar.is-fixed {
+		border: none;
+	}
+
+	.selected-block-tools-wrapper {
+		overflow-x: hidden;
+
+		&.is-collapsed {
+			display: none;
+		}
+	}
+}
+
+.edit-post-header__block-tools-toggle {
+	margin-left: 2px; // Allow focus ring to be fully visible
 }
 
 .edit-post-header__center {
 	flex-grow: 1;
 	display: flex;
 	justify-content: center;
+
+	&.is-collapsed {
+		display: none;
+	}
 }
 
 /**
@@ -57,7 +86,7 @@
 .edit-post-header__settings {
 	display: inline-flex;
 	align-items: center;
-	flex-wrap: wrap;
+	flex-wrap: nowrap;
 	padding-right: $grid-unit-05;
 
 	@include break-small () {

package/src/components/keyboard-shortcuts/index.js

@@ -18,7 +18,6 @@ import { createBlock } from '@wordpress/blocks';
 import { store as editPostStore } from '../../store';
 
 function KeyboardShortcuts() {
-	const { getBlockSelectionStart } = useSelect( blockEditorStore );
 	const { getEditorMode, isEditorSidebarOpened, isListViewOpened } =
 		useSelect( editPostStore );
 	const isModeToggleDisabled = useSelect( ( select ) => {
@@ -38,8 +37,12 @@ function KeyboardShortcuts() {
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 
 	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
-		useSelect( blockEditorStore );
+	const {
+		getBlockName,
+		getSelectedBlockClientId,
+		getBlockAttributes,
+		getBlockSelectionStart,
+	} = useSelect( blockEditorStore );
 
 	const handleTextLevelShortcut = ( event, level ) => {
 		event.preventDefault();

package/src/components/layout/style.scss

@@ -99,14 +99,3 @@
 .edit-post-layout .entities-saved-states__panel-header {
 	height: $header-height + $border-width;
 }
-
-.edit-post-layout.has-fixed-toolbar {
-	// making the header be lower than the content
-	// so the fixed toolbar can be positioned on top of it
-	// but only on desktop
-	@include break-medium() {
-		.interface-interface-skeleton__header:not(:focus-within) {
-			z-index: 19;
-		}
-	}
-}

package/src/components/sidebar/post-schedule/index.js

@@ -29,6 +29,7 @@ export default function PostSchedule() {
 				<span>{ __( 'Publish' ) }</span>
 				<Dropdown
 					popoverProps={ popoverProps }
+					className="edit-post-post-schedule__dropdown"
 					contentClassName="edit-post-post-schedule__dialog"
 					focusOnMount
 					renderToggle={ ( { isOpen, onToggle } ) => (

package/src/components/sidebar/post-schedule/style.scss

@@ -6,13 +6,15 @@
 
 	span {
 		display: block;
-		width: 45%;
-		flex-shrink: 0;
-		// Match padding on tertiary buttons for alignment.
-		padding: $grid-unit-15 * 0.5 0;
+		width: 30%;
+		margin-right: 8px;
 	}
 }
 
+.edit-post-post-schedule__dropdown {
+	width: 70%;
+}
+
 .components-button.edit-post-post-schedule__toggle {
 	text-align: left;
 	white-space: normal;

package/src/components/sidebar/post-status/index.js

@@ -7,7 +7,11 @@ import {
 	PanelBody,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { PostSwitchToDraftButton, PostSyncStatus } from '@wordpress/editor';
+import {
+	PostSwitchToDraftButton,
+	PostSyncStatus,
+	PostURLPanel,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -23,7 +27,6 @@ import PostPendingStatus from '../post-pending-status';
 import PluginPostStatusInfo from '../plugin-post-status-info';
 import { store as editPostStore } from '../../../store';
 import PostTemplate from '../post-template';
-import PostURL from '../post-url';
 
 /**
  * Module Constants
@@ -60,7 +63,7 @@ export default function PostStatus() {
 						<PostVisibility />
 						<PostSchedule />
 						<PostTemplate />
-						<PostURL />
+						<PostURLPanel />
 						<PostSticky />
 						<PostPendingStatus />
 						<PostFormat />

package/src/components/sidebar/post-template/style.scss

@@ -4,9 +4,8 @@
 
 	span {
 		display: block;
-		width: 45%;
-		// Match padding on tertiary buttons for alignment.
-		padding: $grid-unit-15 * 0.5 0;
+		width: 30%;
+		margin-right: 8px;
 	}
 }
 

package/src/components/sidebar/post-visibility/style.scss

@@ -4,9 +4,8 @@
 
 	span {
 		display: block;
-		width: 45%;
-		// Match padding on tertiary buttons for alignment.
-		padding: $grid-unit-15 * 0.5 0;
+		width: 30%;
+		margin-right: 8px;
 	}
 }
 

package/src/components/start-page-options/index.js

@@ -3,7 +3,7 @@
  */
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	__experimentalBlockPatternsList as BlockPatternsList,
@@ -62,19 +62,11 @@ function PatternSelection( { blockPatterns, onChoosePattern } ) {
 	);
 }
 
-function StartPageOptionsModal() {
-	const [ modalState, setModalState ] = useState( 'initial' );
+function StartPageOptionsModal( { onClose } ) {
 	const startPatterns = useStartPatterns();
 	const hasStartPattern = startPatterns.length > 0;
-	const shouldOpenModal = hasStartPattern && modalState === 'initial';
 
-	useEffect( () => {
-		if ( shouldOpenModal ) {
-			setModalState( 'open' );
-		}
-	}, [ shouldOpenModal ] );
-
-	if ( modalState !== 'open' ) {
+	if ( ! hasStartPattern ) {
 		return null;
 	}
 
@@ -83,12 +75,12 @@ function StartPageOptionsModal() {
 			className="edit-post-start-page-options__modal"
 			title={ __( 'Choose a pattern' ) }
 			isFullScreen
-			onRequestClose={ () => setModalState( 'closed' ) }
+			onRequestClose={ onClose }
 		>
 			<div className="edit-post-start-page-options__modal-content">
 				<PatternSelection
 					blockPatterns={ startPatterns }
-					onChoosePattern={ () => setModalState( 'closed' ) }
+					onChoosePattern={ onClose }
 				/>
 			</div>
 		</Modal>
@@ -96,6 +88,7 @@ function StartPageOptionsModal() {
 }
 
 export default function StartPageOptions() {
+	const [ isClosed, setIsClosed ] = useState( false );
 	const shouldEnableModal = useSelect( ( select ) => {
 		const { isCleanNewPost } = select( editorStore );
 		const { isEditingTemplate, isFeatureActive } = select( editPostStore );
@@ -107,9 +100,9 @@ export default function StartPageOptions() {
 		);
 	}, [] );
 
-	if ( ! shouldEnableModal ) {
+	if ( ! shouldEnableModal || isClosed ) {
 		return null;
 	}
 
-	return <StartPageOptionsModal />;
+	return <StartPageOptionsModal onClose={ () => setIsClosed( true ) } />;
 }

package/src/components/visual-editor/style.scss

@@ -21,7 +21,6 @@
 		font-size: $default-font-size;
 		padding: 6px 12px;
 
-		&.is-tertiary,
 		&.has-icon {
 			padding: 6px;
 		}
@@ -67,92 +66,3 @@
 	// See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property
 	flex-grow: 1;
 }
-
-// Fixed contextual toolbar
-@include editor-left(".edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed");
-
-.edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-	position: sticky;
-	top: 0;
-	z-index: z-index(".block-editor-block-popover");
-	display: block;
-	width: 100%;
-
-	// on desktop and tablet viewports the toolbar is fixed
-	// on top of interface header
-	$toolbar-margin: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
-
-	@include break-medium() {
-		// leave room for block inserter, undo and redo, list view
-		margin-left: $toolbar-margin;
-		// position on top of interface header
-		position: fixed;
-		top: $admin-bar-height;
-		// Don't fill up when empty
-		min-height: initial;
-		// remove the border
-		border-bottom: none;
-		// has to be flex for collapse button to fit
-		display: flex;
-
-		// Mimic the height of the parent, vertically align center, and provide a max-height.
-		height: $header-height;
-		align-items: center;
-
-
-		// on tablet viewports the toolbar is fixed
-		// on top of interface header and covers the whole header
-		// except for the inserter on the left
-		width: calc(100% - #{$toolbar-margin});
-
-		&.is-collapsed {
-			width: initial;
-		}
-
-		&:empty {
-			width: initial;
-		}
-
-		.is-fullscreen-mode & {
-			// leave room for block inserter, undo and redo, list view
-			// and some margin left
-			margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;
-
-			top: 0;
-
-			&.is-collapsed {
-				width: initial;
-			}
-
-			&:empty {
-				width: initial;
-			}
-		}
-
-		.show-icon-labels & {
-			width: calc(100% + 40px - #{$toolbar-margin}); //there are no undo, redo and list view buttons
-			margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin
-
-			.is-fullscreen-mode & {
-				margin-left: $grid-unit * 18; // site hub, inserter and margin
-			}
-		}
-	}
-
-	// on desktop viewports the toolbar is fixed
-	// on top of interface header and leaves room
-	// for the block inserter the publish button
-	@include break-large() {
-		width: auto;
-		.show-icon-labels & {
-			width: auto; //there are no undo, redo and list view buttons
-		}
-
-		.is-fullscreen-mode & {
-			// in full screen mode we need to account for
-			// the combined with of the tools at the right of the header and the margin left
-			// of the toolbar which includes four buttons
-			width: calc(100% - 280px - #{4 * $grid-unit-80});
-		}
-	}
-}

package/src/style.scss

@@ -15,7 +15,6 @@
 @import "./components/sidebar/post-schedule/style.scss";
 @import "./components/sidebar/post-slug/style.scss";
 @import "./components/sidebar/post-template/style.scss";
-@import "./components/sidebar/post-url/style.scss";
 @import "./components/sidebar/post-visibility/style.scss";
 @import "./components/sidebar/settings-header/style.scss";
 @import "./components/sidebar/template-summary/style.scss";

package/build/components/sidebar/post-url/index.js

@@ -1,62 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = PostURL;
-var _react = require("react");
-var _element = require("@wordpress/element");
-var _components = require("@wordpress/components");
-var _i18n = require("@wordpress/i18n");
-var _editor = require("@wordpress/editor");
-/**
- * WordPress dependencies
- */
-
-function PostURL() {
-  // Use internal state instead of a ref to make sure that the component
-  // re-renders when the popover's anchor updates.
-  const [popoverAnchor, setPopoverAnchor] = (0, _element.useState)(null);
-  // Memoize popoverProps to avoid returning a new object every time.
-  const popoverProps = (0, _element.useMemo)(() => ({
-    anchor: popoverAnchor,
-    placement: 'bottom-end'
-  }), [popoverAnchor]);
-  return (0, _react.createElement)(_editor.PostURLCheck, null, (0, _react.createElement)(_components.PanelRow, {
-    className: "edit-post-post-url",
-    ref: setPopoverAnchor
-  }, (0, _react.createElement)("span", null, (0, _i18n.__)('URL')), (0, _react.createElement)(_components.Dropdown, {
-    popoverProps: popoverProps,
-    className: "edit-post-post-url__dropdown",
-    contentClassName: "edit-post-post-url__dialog",
-    focusOnMount: true,
-    renderToggle: ({
-      isOpen,
-      onToggle
-    }) => (0, _react.createElement)(PostURLToggle, {
-      isOpen: isOpen,
-      onClick: onToggle
-    }),
-    renderContent: ({
-      onClose
-    }) => (0, _react.createElement)(_editor.PostURL, {
-      onClose: onClose
-    })
-  })));
-}
-function PostURLToggle({
-  isOpen,
-  onClick
-}) {
-  const label = (0, _editor.usePostURLLabel)();
-  return (0, _react.createElement)(_components.Button, {
-    className: "edit-post-post-url__toggle",
-    variant: "tertiary",
-    "aria-expanded": isOpen
-    // translators: %s: Current post URL.
-    ,
-    "aria-label": (0, _i18n.sprintf)((0, _i18n.__)('Change URL: %s'), label),
-    onClick: onClick
-  }, label);
-}
-//# sourceMappingURL=index.js.map

package/build/components/sidebar/post-url/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_element","require","_components","_i18n","_editor","PostURL","popoverAnchor","setPopoverAnchor","useState","popoverProps","useMemo","anchor","placement","_react","createElement","PostURLCheck","PanelRow","className","ref","__","Dropdown","contentClassName","focusOnMount","renderToggle","isOpen","onToggle","PostURLToggle","onClick","renderContent","onClose","label","usePostURLLabel","Button","variant","sprintf"],"sources":["@wordpress/edit-post/src/components/sidebar/post-url/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\nimport { PanelRow, Dropdown, Button } from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tPostURLCheck,\n\tPostURL as PostURLForm,\n\tusePostURLLabel,\n} from '@wordpress/editor';\n\nexport default function PostURL() {\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps = useMemo(\n\t\t() => ( { anchor: popoverAnchor, placement: 'bottom-end' } ),\n\t\t[ popoverAnchor ]\n\t);\n\n\treturn (\n\t\t<PostURLCheck>\n\t\t\t<PanelRow className=\"edit-post-post-url\" ref={ setPopoverAnchor }>\n\t\t\t\t<span>{ __( 'URL' ) }</span>\n\t\t\t\t<Dropdown\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\tclassName=\"edit-post-post-url__dropdown\"\n\t\t\t\t\tcontentClassName=\"edit-post-post-url__dialog\"\n\t\t\t\t\tfocusOnMount\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<PostURLToggle isOpen={ isOpen } onClick={ onToggle } />\n\t\t\t\t\t) }\n\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t<PostURLForm onClose={ onClose } />\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</PanelRow>\n\t\t</PostURLCheck>\n\t);\n}\n\nfunction PostURLToggle( { isOpen, onClick } ) {\n\tconst label = usePostURLLabel();\n\treturn (\n\t\t<Button\n\t\t\tclassName=\"edit-post-post-url__toggle\"\n\t\t\tvariant=\"tertiary\"\n\t\t\taria-expanded={ isOpen }\n\t\t\t// translators: %s: Current post URL.\n\t\t\taria-label={ sprintf( __( 'Change URL: %s' ), label ) }\n\t\t\tonClick={ onClick }\n\t\t>\n\t\t\t{ label }\n\t\t</Button>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AANA;AACA;AACA;;AAUe,SAASI,OAAOA,CAAA,EAAG;EACjC;EACA;EACA,MAAM,CAAEC,aAAa,EAAEC,gBAAgB,CAAE,GAAG,IAAAC,iBAAQ,EAAE,IAAK,CAAC;EAC5D;EACA,MAAMC,YAAY,GAAG,IAAAC,gBAAO,EAC3B,OAAQ;IAAEC,MAAM,EAAEL,aAAa;IAAEM,SAAS,EAAE;EAAa,CAAC,CAAE,EAC5D,CAAEN,aAAa,CAChB,CAAC;EAED,OACC,IAAAO,MAAA,CAAAC,aAAA,EAACV,OAAA,CAAAW,YAAY,QACZ,IAAAF,MAAA,CAAAC,aAAA,EAACZ,WAAA,CAAAc,QAAQ;IAACC,SAAS,EAAC,oBAAoB;IAACC,GAAG,EAAGX;EAAkB,GAChE,IAAAM,MAAA,CAAAC,aAAA,gBAAQ,IAAAK,QAAE,EAAE,KAAM,CAAS,CAAC,EAC5B,IAAAN,MAAA,CAAAC,aAAA,EAACZ,WAAA,CAAAkB,QAAQ;IACRX,YAAY,EAAGA,YAAc;IAC7BQ,SAAS,EAAC,8BAA8B;IACxCI,gBAAgB,EAAC,4BAA4B;IAC7CC,YAAY;IACZC,YAAY,EAAGA,CAAE;MAAEC,MAAM;MAAEC;IAAS,CAAC,KACpC,IAAAZ,MAAA,CAAAC,aAAA,EAACY,aAAa;MAACF,MAAM,EAAGA,MAAQ;MAACG,OAAO,EAAGF;IAAU,CAAE,CACrD;IACHG,aAAa,EAAGA,CAAE;MAAEC;IAAQ,CAAC,KAC5B,IAAAhB,MAAA,CAAAC,aAAA,EAACV,OAAA,CAAAC,OAAW;MAACwB,OAAO,EAAGA;IAAS,CAAE;EAChC,CACH,CACQ,CACG,CAAC;AAEjB;AAEA,SAASH,aAAaA,CAAE;EAAEF,MAAM;EAAEG;AAAQ,CAAC,EAAG;EAC7C,MAAMG,KAAK,GAAG,IAAAC,uBAAe,EAAC,CAAC;EAC/B,OACC,IAAAlB,MAAA,CAAAC,aAAA,EAACZ,WAAA,CAAA8B,MAAM;IACNf,SAAS,EAAC,4BAA4B;IACtCgB,OAAO,EAAC,UAAU;IAClB,iBAAgBT;IAChB;IAAA;IACA,cAAa,IAAAU,aAAO,EAAE,IAAAf,QAAE,EAAE,gBAAiB,CAAC,EAAEW,KAAM,CAAG;IACvDH,OAAO,EAAGA;EAAS,GAEjBG,KACK,CAAC;AAEX"}