@wordpress/block-library 7.6.0 → 7.9.0

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

@@ -46,22 +46,18 @@ export default function TemplatePartEdit( {
 } ) {
 	const { slug, theme, tagName, layout = {} } = attributes;
 	const templatePartId = createTemplatePartId( theme, slug );
-	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
-		templatePartId
-	);
-	const [
-		isTemplatePartSelectionOpen,
-		setIsTemplatePartSelectionOpen,
-	] = useState( false );
+	const [ hasAlreadyRendered, RecursionProvider ] =
+		useNoRecursiveRenders( templatePartId );
+	const [ isTemplatePartSelectionOpen, setIsTemplatePartSelectionOpen ] =
+		useState( false );
 
 	// Set the postId block attribute if it did not exist,
 	// but wait until the inner blocks have loaded to allow
 	// new edits to trigger this.
 	const { isResolved, innerBlocks, isMissing, area } = useSelect(
 		( select ) => {
-			const { getEditedEntityRecord, hasFinishedResolution } = select(
-				coreStore
-			);
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
 			const { getBlocks } = select( blockEditorStore );
 
 			const getEntityArgs = [

package/src/template-part/edit/utils/hooks.js

@@ -28,9 +28,8 @@ import { createTemplatePartId } from './create-template-part-id';
  */
 export function useAlternativeTemplateParts( area, excludedId ) {
 	const { templateParts, isResolving } = useSelect( ( select ) => {
-		const { getEntityRecords, isResolving: _isResolving } = select(
-			coreStore
-		);
+		const { getEntityRecords, isResolving: _isResolving } =
+			select( coreStore );
 		const query = { per_page: -1 };
 		return {
 			templateParts: getEntityRecords(
@@ -144,10 +143,12 @@ export function useTemplatePartArea( area ) {
 		( select ) => {
 			// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
 			// Blocks can be loaded into a *non-post* block editor.
-			// eslint-disable-next-line @wordpress/data-no-store-string-literals
-			const definedAreas = select(
-				'core/editor'
-			).__experimentalGetDefaultTemplatePartAreas();
+			/* eslint-disable @wordpress/data-no-store-string-literals */
+			const definedAreas =
+				select(
+					'core/editor'
+				).__experimentalGetDefaultTemplatePartAreas();
+			/* eslint-enable @wordpress/data-no-store-string-literals */
 
 			const selectedArea = find( definedAreas, { area } );
 			const defaultArea = find( definedAreas, { area: 'uncategorized' } );

package/src/transformationCategories.native.js

@@ -32,9 +32,9 @@ const transformationCategories = {
 };
 
 export const transformationCategory = ( blockName ) => {
-	const found = Object.entries(
-		transformationCategories
-	).find( ( [ , value ] ) => value.includes( blockName ) );
+	const found = Object.entries( transformationCategories ).find(
+		( [ , value ] ) => value.includes( blockName )
+	);
 	if ( ! found ) {
 		return [];
 	}

package/src/video/block.json

@@ -76,7 +76,12 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": true
+		"align": true,
+		"__experimentalStyle": {
+			"spacing": {
+				"margin": "0 0 1em 0"
+			}
+		}
 	},
 	"editorStyle": "wp-block-video-editor",
 	"style": "wp-block-video"

package/src/video/edit-common-settings.js

@@ -12,14 +12,8 @@ const options = [
 ];
 
 const VideoSettings = ( { setAttributes, attributes } ) => {
-	const {
-		autoplay,
-		controls,
-		loop,
-		muted,
-		playsInline,
-		preload,
-	} = attributes;
+	const { autoplay, controls, loop, muted, playsInline, preload } =
+		attributes;
 
 	const autoPlayHelpText = __(
 		'Autoplay may cause usability issues for some users.'

package/src/video/edit.js

@@ -26,6 +26,7 @@ import {
 	RichText,
 	useBlockProps,
 	store as blockEditorStore,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { useRef, useEffect } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
@@ -266,6 +267,9 @@ function VideoEdit( {
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
 						tagName="figcaption"
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
 						aria-label={ __( 'Video caption text' ) }
 						placeholder={ __( 'Add caption' ) }
 						value={ caption }

package/src/video/edit.native.js

@@ -36,11 +36,13 @@ import { __, sprintf } from '@wordpress/i18n';
 import { isURL, getProtocol } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
 import { video as SvgIcon, replace } from '@wordpress/icons';
-import { withSelect } from '@wordpress/data';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
+import { createUpgradedEmbedBlock } from '../embed/util';
 import style from './style.scss';
 import SvgIconRetry from './icon-retry';
 import VideoCommonSettings from './edit-common-settings';
@@ -61,15 +63,13 @@ class VideoEdit extends Component {
 		};
 
 		this.mediaUploadStateReset = this.mediaUploadStateReset.bind( this );
-		this.onSelectMediaUploadOption = this.onSelectMediaUploadOption.bind(
-			this
-		);
-		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(
-			this
-		);
-		this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind(
-			this
-		);
+		this.onSelectMediaUploadOption =
+			this.onSelectMediaUploadOption.bind( this );
+		this.onSelectURL = this.onSelectURL.bind( this );
+		this.finishMediaUploadWithSuccess =
+			this.finishMediaUploadWithSuccess.bind( this );
+		this.finishMediaUploadWithFailure =
+			this.finishMediaUploadWithFailure.bind( this );
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
 		this.onVideoPressed = this.onVideoPressed.bind( this );
 		this.onVideoContanerLayout = this.onVideoContanerLayout.bind( this );
@@ -160,6 +160,25 @@ class VideoEdit extends Component {
 		setAttributes( { id, src: url } );
 	}
 
+	onSelectURL( url ) {
+		const { createErrorNotice, onReplace, setAttributes } = this.props;
+
+		if ( isURL( url ) ) {
+			// Check if there's an embed block that handles this URL.
+			const embedBlock = createUpgradedEmbedBlock( {
+				attributes: { url },
+			} );
+			if ( undefined !== embedBlock ) {
+				onReplace( embedBlock );
+				return;
+			}
+
+			setAttributes( { id: url, src: url } );
+		} else {
+			createErrorNotice( __( 'Invalid URL.' ) );
+		}
+	}
+
 	onVideoContanerLayout( event ) {
 		const { width } = event.nativeEvent.layout;
 		const height = width / VIDEO_ASPECT_RATIO;
@@ -191,12 +210,8 @@ class VideoEdit extends Component {
 	}
 
 	render() {
-		const {
-			setAttributes,
-			attributes,
-			isSelected,
-			wasBlockJustInserted,
-		} = this.props;
+		const { setAttributes, attributes, isSelected, wasBlockJustInserted } =
+			this.props;
 		const { id, src } = attributes;
 		const { videoContainerHeight } = this.state;
 
@@ -205,6 +220,7 @@ class VideoEdit extends Component {
 				allowedTypes={ [ MEDIA_TYPE_VIDEO ] }
 				isReplacingMedia={ true }
 				onSelect={ this.onSelectMediaUploadOption }
+				onSelectURL={ this.onSelectURL }
 				render={ ( { open, getMediaOptions } ) => {
 					return (
 						<ToolbarGroup>
@@ -226,6 +242,7 @@ class VideoEdit extends Component {
 					<MediaPlaceholder
 						allowedTypes={ [ MEDIA_TYPE_VIDEO ] }
 						onSelect={ this.onSelectMediaUploadOption }
+						onSelectURL={ this.onSelectURL }
 						icon={ this.getIcon( ICON_TYPE.PLACEHOLDER ) }
 						onFocus={ this.props.onFocus }
 						autoOpenMediaUpload={
@@ -378,5 +395,10 @@ export default compose( [
 			'inserter_menu'
 		),
 	} ) ),
+	withDispatch( ( dispatch ) => {
+		const { createErrorNotice } = dispatch( noticesStore );
+
+		return { createErrorNotice };
+	} ),
 	withPreferredColorScheme,
 ] )( VideoEdit );

package/src/video/index.js

@@ -20,8 +20,7 @@ export const settings = {
 	icon,
 	example: {
 		attributes: {
-			src:
-				'https://upload.wikimedia.org/wikipedia/commons/c/ca/Wood_thrush_in_Central_Park_switch_sides_%2816510%29.webm',
+			src: 'https://upload.wikimedia.org/wikipedia/commons/c/ca/Wood_thrush_in_Central_Park_switch_sides_%2816510%29.webm',
 			// translators: Caption accompanying a video of the wood thrush singing, which serves as an example for the Video block.
 			caption: __( 'Wood thrush singing in Central Park, NYC.' ),
 		},

package/src/video/save.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -38,7 +42,11 @@ export default function save( { attributes } ) {
 				</video>
 			) }
 			{ ! RichText.isEmpty( caption ) && (
-				<RichText.Content tagName="figcaption" value={ caption } />
+				<RichText.Content
+					className={ __experimentalGetElementClassName( 'caption' ) }
+					tagName="figcaption"
+					value={ caption }
+				/>
 			) }
 		</figure>
 	);

package/src/video/style.scss

@@ -1,6 +1,4 @@
 .wp-block-video {
-	margin: 0 0 1em 0;
-
 	video {
 		width: 100%;
 	}