@wordpress/editor 14.9.0 → 14.10.0

package/src/components/post-url/panel.js

@@ -3,11 +3,7 @@
  */
 import { useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import {
-	Dropdown,
-	Button,
-	__experimentalTruncate as Truncate,
-} from '@wordpress/components';
+import { Dropdown, Button, ExternalLink } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { safeDecodeURIComponent } from '@wordpress/url';
 import { store as coreStore } from '@wordpress/core-data';
@@ -26,6 +22,20 @@ import { store as editorStore } from '../../store';
  * @return {JSX.Element} The rendered PostURLPanel component.
  */
 export default function PostURLPanel() {
+	const { isFrontPage } = useSelect( ( select ) => {
+		const { getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord, canUser } = select( coreStore );
+		const siteSettings = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? getEditedEntityRecord( 'root', 'site' )
+			: undefined;
+		const _id = getCurrentPostId();
+		return {
+			isFrontPage: siteSettings?.page_on_front === _id,
+		};
+	}, [] );
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
@@ -42,41 +52,38 @@ export default function PostURLPanel() {
 		[ popoverAnchor ]
 	);
 
+	const label = isFrontPage ? __( 'Link' ) : __( 'Slug' );
+
 	return (
 		<PostURLCheck>
-			<PostPanelRow label={ __( 'Link' ) } ref={ setPopoverAnchor }>
-				<Dropdown
-					popoverProps={ popoverProps }
-					className="editor-post-url__panel-dropdown"
-					contentClassName="editor-post-url__panel-dialog"
-					focusOnMount
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<PostURLToggle isOpen={ isOpen } onClick={ onToggle } />
-					) }
-					renderContent={ ( { onClose } ) => (
-						<PostURL onClose={ onClose } />
-					) }
-				/>
+			<PostPanelRow label={ label } ref={ setPopoverAnchor }>
+				{ ! isFrontPage && (
+					<Dropdown
+						popoverProps={ popoverProps }
+						className="editor-post-url__panel-dropdown"
+						contentClassName="editor-post-url__panel-dialog"
+						focusOnMount
+						renderToggle={ ( { isOpen, onToggle } ) => (
+							<PostURLToggle
+								isOpen={ isOpen }
+								onClick={ onToggle }
+							/>
+						) }
+						renderContent={ ( { onClose } ) => (
+							<PostURL onClose={ onClose } />
+						) }
+					/>
+				) }
+				{ isFrontPage && <FrontPageLink /> }
 			</PostPanelRow>
 		</PostURLCheck>
 	);
 }
 
 function PostURLToggle( { isOpen, onClick } ) {
-	const { slug, isFrontPage, postLink } = useSelect( ( select ) => {
-		const { getCurrentPostId, getCurrentPost } = select( editorStore );
-		const { getEditedEntityRecord, canUser } = select( coreStore );
-		const siteSettings = canUser( 'read', {
-			kind: 'root',
-			name: 'site',
-		} )
-			? getEditedEntityRecord( 'root', 'site' )
-			: undefined;
-		const _id = getCurrentPostId();
+	const { slug } = useSelect( ( select ) => {
 		return {
 			slug: select( editorStore ).getEditedPostSlug(),
-			isFrontPage: siteSettings?.page_on_front === _id,
-			postLink: getCurrentPost()?.link,
 		};
 	}, [] );
 	const decodedSlug = safeDecodeURIComponent( slug );
@@ -90,9 +97,26 @@ function PostURLToggle( { isOpen, onClick } ) {
 			aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
 			onClick={ onClick }
 		>
-			<Truncate numberOfLines={ 1 }>
-				{ isFrontPage ? postLink : `/${ decodedSlug }` }
-			</Truncate>
+			<>{ decodedSlug }</>
 		</Button>
 	);
 }
+
+function FrontPageLink() {
+	const { postLink } = useSelect( ( select ) => {
+		const { getCurrentPost } = select( editorStore );
+		return {
+			postLink: getCurrentPost()?.link,
+		};
+	}, [] );
+
+	return (
+		<ExternalLink
+			className="editor-post-url__front-page-link"
+			href={ postLink }
+			target="_blank"
+		>
+			{ postLink }
+		</ExternalLink>
+	);
+}

package/src/components/post-url/style.scss

@@ -9,14 +9,19 @@
 }
 
 /* rtl:begin:ignore */
-.editor-post-url__link {
+.editor-post-url__link,
+.editor-post-url__front-page-link {
 	direction: ltr;
 	word-break: break-word;
-	margin-top: $grid-unit-05;
-	color: $gray-700;
 }
 /* rtl:end:ignore */
 
+.editor-post-url__front-page-link {
+	// Match padding on tertiary buttons for alignment.
+	padding: $grid-unit-15 * 0.5 0 $grid-unit-15 * 0.5 $grid-unit-15;
+}
+
+
 .editor-post-url__link-slug {
 	font-weight: 600;
 }
@@ -30,3 +35,16 @@
 .editor-post-url__panel-toggle {
 	word-break: break-word;
 }
+
+.editor-post-url__intro {
+	margin: 0;
+}
+
+.editor-post-url__permalink {
+	margin-top: $grid-unit-10;
+	margin-bottom: 0;
+
+	&-visual-label {
+		display: block;
+	}
+}

package/src/components/provider/index.js

@@ -222,6 +222,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			shouldRenderTemplate,
 			post.id,
 			post.type,
+			post.slug,
 			rootLevelPost.type,
 			rootLevelPost.slug,
 			postTypes,

package/src/components/visual-editor/edit-template-blocks-notification.js

@@ -61,7 +61,11 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 			) {
 				return;
 			}
-			setIsDialogOpen( true );
+
+			if ( ! event.defaultPrevented ) {
+				event.preventDefault();
+				setIsDialogOpen( true );
+			}
 		};
 
 		const canvas = contentRef.current;

package/src/components/visual-editor/index.js

@@ -48,6 +48,7 @@ const {
 	useLayoutStyles,
 	ExperimentalBlockCanvas: BlockCanvas,
 	useFlashEditableBlocks,
+	useZoomOutModeExit,
 } = unlock( blockEditorPrivateApis );
 
 /**
@@ -335,13 +336,14 @@ function VisualEditor( {
 		useSelectNearestEditableBlock( {
 			isEnabled: renderingMode === 'template-locked',
 		} ),
+		useZoomOutModeExit(),
 	] );
 
 	const zoomOutProps =
 		isZoomedOut && ! isTabletViewport
 			? {
 					scale: 'default',
-					frameSize: '48px',
+					frameSize: '40px',
 			  }
 			: {};
 

package/src/private-apis.js

@@ -23,10 +23,7 @@ import {
 	mergeBaseAndUserConfigs,
 	GlobalStylesProvider,
 } from './components/global-styles-provider';
-import {
-	registerCoreBlockBindingsSources,
-	bootstrapBlockBindingsSourcesFromServer,
-} from './bindings/api';
+import { registerCoreBlockBindingsSources } from './bindings/api';
 
 const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
 
@@ -47,7 +44,6 @@ lock( privateApis, {
 	ViewMoreMenuGroup,
 	ResizableEditor,
 	registerCoreBlockBindingsSources,
-	bootstrapBlockBindingsSourcesFromServer,
 
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
 	interfaceStore,

package/src/store/actions.js

@@ -159,6 +159,29 @@ export function setEditedPost( postType, postId ) {
  *
  * @param {Object} edits   Post attributes to edit.
  * @param {Object} options Options for the edit.
+ *
+ * @example
+ * ```js
+ * // Update the post title
+ * wp.data.dispatch( 'core/editor' ).editPost( { title: `${ newTitle }` } );
+ * ```
+ *
+ * @example
+ *```js
+ * 	// Get specific media size based on the featured media ID
+ * 	// Note: change sizes?.large for any registered size
+ * 	const getFeaturedMediaUrl = useSelect( ( select ) => {
+ * 		const getFeaturedMediaId =
+ * 			select( 'core/editor' ).getEditedPostAttribute( 'featured_media' );
+ * 		const getMedia = select( 'core' ).getMedia( getFeaturedMediaId );
+ *
+ * 		return (
+ * 			getMedia?.media_details?.sizes?.large?.source_url || getMedia?.source_url || ''
+ * 		);
+ * }, [] );
+ * ```
+ *
+ * @return {Object} Action object
  */
 export const editPost =
 	( edits, options ) =>
@@ -255,7 +278,11 @@ export const savePost =
 
 		if ( ! error ) {
 			try {
-				await doActionAsync( 'editor.savePost', options );
+				await doActionAsync(
+					'editor.savePost',
+					{ id: previousRecord.id },
+					options
+				);
 			} catch ( err ) {
 				error = err;
 			}

package/src/store/selectors.js

@@ -177,6 +177,11 @@ export const getCurrentPost = createRegistrySelector(
  *
  * @param {Object} state Global application state.
  *
+ * @example
+ *
+ *```js
+ * const currentPostType = wp.data.select( 'core/editor' ).getCurrentPostType();
+ *```
  * @return {string} Post type.
  */
 export function getCurrentPostType( state ) {
@@ -316,6 +321,22 @@ const getNestedEditedPostProperty = createSelector(
  * @param {Object} state         Global application state.
  * @param {string} attributeName Post attribute name.
  *
+ * @example
+ *
+ *```js
+ * 	// Get specific media size based on the featured media ID
+ * 	// Note: change sizes?.large for any registered size
+ * 	const getFeaturedMediaUrl = useSelect( ( select ) => {
+ * 		const getFeaturedMediaId =
+ * 			select( 'core/editor' ).getEditedPostAttribute( 'featured_media' );
+ * 		const getMedia = select( 'core' ).getMedia( getFeaturedMediaId );
+ *
+ * 		return (
+ * 			getMedia?.media_details?.sizes?.large?.source_url || getMedia?.source_url || ''
+ * 		);
+ * }, [] );
+ *```
+ *
  * @return {*} Post attribute value.
  */
 export function getEditedPostAttribute( state, attributeName ) {