@wordpress/block-library 9.6.1 → 9.7.1-next.5368f64a9.0

package/src/template-part/edit/index.js

@@ -254,16 +254,18 @@ export default function TemplatePartEdit( {
 							</ToolbarButton>
 						</BlockControls>
 					) }
-				<InspectorControls group="advanced">
-					<TemplatePartAdvancedControls
-						tagName={ tagName }
-						setAttributes={ setAttributes }
-						isEntityAvailable={ isEntityAvailable }
-						templatePartId={ templatePartId }
-						defaultWrapper={ areaObject.tagName }
-						hasInnerBlocks={ hasInnerBlocks }
-					/>
-				</InspectorControls>
+				{ canUserEdit && (
+					<InspectorControls group="advanced">
+						<TemplatePartAdvancedControls
+							tagName={ tagName }
+							setAttributes={ setAttributes }
+							isEntityAvailable={ isEntityAvailable }
+							templatePartId={ templatePartId }
+							defaultWrapper={ areaObject.tagName }
+							hasInnerBlocks={ hasInnerBlocks }
+						/>
+					</InspectorControls>
+				) }
 				{ isPlaceholder && (
 					<TagName { ...blockProps }>
 						<TemplatePartPlaceholder

package/src/template-part/edit/inner-blocks.js

@@ -100,6 +100,12 @@ function EditableTemplatePartInnerBlocks( {
 	tagName: TagName,
 	blockProps,
 } ) {
+	const onNavigateToEntityRecord = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().onNavigateToEntityRecord,
+		[]
+	);
+
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		'wp_template_part',
@@ -114,7 +120,20 @@ function EditableTemplatePartInnerBlocks( {
 		layout: useLayout( layout ),
 	} );
 
-	return <TagName { ...innerBlocksProps } />;
+	const blockEditingMode = useBlockEditingMode();
+
+	const customProps =
+		blockEditingMode === 'contentOnly' && onNavigateToEntityRecord
+			? {
+					onDoubleClick: () =>
+						onNavigateToEntityRecord( {
+							postId: id,
+							postType: 'wp_template_part',
+						} ),
+			  }
+			: {};
+
+	return <TagName { ...innerBlocksProps } { ...customProps } />;
 }
 
 export default function TemplatePartInnerBlocks( {

package/src/template-part/edit/placeholder.js

@@ -74,13 +74,18 @@ export default function TemplatePartPlaceholder( {
 
 			{ ! isResolving &&
 				!! ( templateParts.length || blockPatterns.length ) && (
-					<Button variant="primary" onClick={ onOpenSelectionModal }>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						onClick={ onOpenSelectionModal }
+					>
 						{ __( 'Choose' ) }
 					</Button>
 				) }
 
 			{ ! isResolving && isBlockBasedTheme && canCreateTemplatePart && (
 				<Button
+					__next40pxDefaultSize
 					variant="secondary"
 					onClick={ () => {
 						setShowTitleModal( true );

package/src/utils/hooks.js

@@ -37,36 +37,36 @@ export function useCanEditEntity( kind, name, recordId ) {
  * @param {Function} args.onError      Function called when an error happens.
  */
 export function useUploadMediaFromBlobURL( args = {} ) {
-	const latestArgs = useRef( args );
-	const hasUploadStarted = useRef( false );
+	const latestArgsRef = useRef( args );
+	const hasUploadStartedRef = useRef( false );
 	const { getSettings } = useSelect( blockEditorStore );
 
 	useLayoutEffect( () => {
-		latestArgs.current = args;
+		latestArgsRef.current = args;
 	} );
 
 	useEffect( () => {
 		// Uploading is a special effect that can't be canceled via the cleanup method.
 		// The extra check avoids duplicate uploads in development mode (React.StrictMode).
-		if ( hasUploadStarted.current ) {
+		if ( hasUploadStartedRef.current ) {
 			return;
 		}
 		if (
-			! latestArgs.current.url ||
-			! isBlobURL( latestArgs.current.url )
+			! latestArgsRef.current.url ||
+			! isBlobURL( latestArgsRef.current.url )
 		) {
 			return;
 		}
 
-		const file = getBlobByURL( latestArgs.current.url );
+		const file = getBlobByURL( latestArgsRef.current.url );
 		if ( ! file ) {
 			return;
 		}
 
-		const { url, allowedTypes, onChange, onError } = latestArgs.current;
+		const { url, allowedTypes, onChange, onError } = latestArgsRef.current;
 		const { mediaUpload } = getSettings();
 
-		hasUploadStarted.current = true;
+		hasUploadStartedRef.current = true;
 
 		mediaUpload( {
 			filesList: [ file ],
@@ -78,12 +78,12 @@ export function useUploadMediaFromBlobURL( args = {} ) {
 
 				revokeBlobURL( url );
 				onChange( media );
-				hasUploadStarted.current = false;
+				hasUploadStartedRef.current = false;
 			},
 			onError: ( message ) => {
 				revokeBlobURL( url );
 				onError( message );
-				hasUploadStarted.current = false;
+				hasUploadStartedRef.current = false;
 			},
 		} );
 	}, [ getSettings ] );

package/src/video/edit.js

@@ -42,23 +42,6 @@ import TracksEditor from './tracks-editor';
 import Tracks from './tracks';
 import { Caption } from '../utils/caption';
 
-// Much of this description is duplicated from MediaPlaceholder.
-const placeholder = ( content ) => {
-	return (
-		<Placeholder
-			className="block-editor-media-placeholder"
-			withIllustration
-			icon={ icon }
-			label={ __( 'Video' ) }
-			instructions={ __(
-				'Upload a video file, pick one from your media library, or add one with a URL.'
-			) }
-		>
-			{ content }
-		</Placeholder>
-	);
-};
-
 const ALLOWED_MEDIA_TYPES = [ 'video' ];
 const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
 
@@ -149,6 +132,23 @@ function VideoEdit( {
 		createErrorNotice( message, { type: 'snackbar' } );
 	}
 
+	// Much of this description is duplicated from MediaPlaceholder.
+	const placeholder = ( content ) => {
+		return (
+			<Placeholder
+				className="block-editor-media-placeholder"
+				withIllustration={ ! isSingleSelected }
+				icon={ icon }
+				label={ __( 'Video' ) }
+				instructions={ __(
+					'Upload a video file, pick one from your media library, or add one with a URL.'
+				) }
+			>
+				{ content }
+			</Placeholder>
+		);
+	};
+
 	const classes = clsx( className, {
 		'is-transient': !! temporaryURL,
 	} );
@@ -208,6 +208,7 @@ function VideoEdit( {
 							onSelect={ onSelectVideo }
 							onSelectURL={ onSelectURL }
 							onError={ onUploadError }
+							onReset={ () => onSelectVideo( undefined ) }
 						/>
 					</BlockControls>
 				</>
@@ -231,6 +232,7 @@ function VideoEdit( {
 								}
 								render={ ( { open } ) => (
 									<Button
+										__next40pxDefaultSize
 										variant="primary"
 										onClick={ open }
 										ref={ posterImageButton }
@@ -259,6 +261,7 @@ function VideoEdit( {
 							</p>
 							{ !! poster && (
 								<Button
+									__next40pxDefaultSize
 									onClick={ onRemovePoster }
 									variant="tertiary"
 								>
@@ -271,10 +274,10 @@ function VideoEdit( {
 			</InspectorControls>
 			<figure { ...blockProps }>
 				{ /*
-					Disable the video tag if the block is not selected
-					so the user clicking on it won't play the
-					video when the controls are enabled.
-				*/ }
+                Disable the video tag if the block is not selected
+                so the user clicking on it won't play the
+                video when the controls are enabled.
+            */ }
 				<Disabled isDisabled={ ! isSingleSelected }>
 					<video
 						controls={ controls }

package/src/video/editor.scss

@@ -1,40 +1,3 @@
-// Provide special styling for the placeholder.
-// @todo this particular minimal style of placeholder could be componentized further.
-.wp-block-video.wp-block-video {
-	// Show Placeholder style on-select.
-	&.is-selected .components-placeholder {
-		// Block UI appearance.
-		color: $gray-900;
-		background-color: $white;
-		box-shadow: inset 0 0 0 $border-width $gray-900;
-		border: none;
-
-		// @todo this should eventually be overridden by a custom border-radius set in the inspector.
-		border-radius: $radius-block-ui;
-
-		> svg {
-			opacity: 0;
-		}
-
-		.components-placeholder__illustration {
-			display: none;
-		}
-
-		&::before {
-			opacity: 0;
-		}
-	}
-
-	// Remove the transition while we still have a legacy placeholder style.
-	// Otherwise the content jumps between the 1px placeholder border, and any inherited custom
-	// parent border that may get applied when you deselect.
-	.components-placeholder__label,
-	.components-placeholder__instructions,
-	.components-button {
-		transition: none;
-	}
-}
-
 .wp-block[data-align="center"] > .wp-block-video {
 	text-align: center;
 }
@@ -85,7 +48,6 @@
 
 .block-library-video-tracks-editor > .components-popover__content {
 	width: 360px;
-	padding: 0;
 }
 
 .block-library-video-tracks-editor__track-list,
@@ -94,10 +56,3 @@
 		padding: 0;
 	}
 }
-
-.block-library-video-tracks-editor__single-track-editor,
-.block-library-video-tracks-editor__track-list,
-.block-library-video-tracks-editor__add-tracks-container {
-	padding: $grid-unit-15;
-}
-

package/src/video/tracks-editor.js

@@ -58,6 +58,7 @@ function TrackList( { tracks, onEditPress } ) {
 				>
 					<span>{ track.label } </span>
 					<Button
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ () => onEditPress( index ) }
 						aria-label={ sprintf(
@@ -145,6 +146,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 					/>
 					<HStack className="block-library-video-tracks-editor__single-track-editor-buttons-container">
 						<Button
+							__next40pxDefaultSize
 							variant="secondary"
 							onClick={ () => {
 								const changes = {};
@@ -173,6 +175,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 							{ __( 'Close' ) }
 						</Button>
 						<Button
+							__next40pxDefaultSize
 							isDestructive
 							variant="link"
 							onClick={ onRemove }

package/src/media-text/test/media-container.js

@@ -1,24 +0,0 @@
-/**
- * Internal dependencies
- */
-import { imageFillStyles } from '../media-container';
-
-describe( 'imageFillStyles()', () => {
-	it( 'should return image url', () => {
-		const { backgroundImage } = imageFillStyles( 'image.jpg' );
-		expect( backgroundImage ).toBe( 'url(image.jpg)' );
-	} );
-
-	it( 'should return centered background position', () => {
-		const { backgroundPosition } = imageFillStyles( 'image.jpg' );
-		expect( backgroundPosition ).toBe( '50% 50%' );
-	} );
-
-	it( 'should return custom background position', () => {
-		const { backgroundPosition } = imageFillStyles( 'image.jpg', {
-			x: 0.56,
-			y: 0.57,
-		} );
-		expect( backgroundPosition ).toBe( '56% 57%' );
-	} );
-} );