@wordpress/block-library 8.0.0 → 8.2.0

package/src/freeform/edit.js

@@ -6,10 +6,10 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { debounce } from '@wordpress/compose';
+import { debounce, useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { ToolbarGroup } from '@wordpress/components';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { BACKSPACE, DELETE, F10, isKeyboardEvent } from '@wordpress/keycodes';
 
@@ -17,6 +17,7 @@ import { BACKSPACE, DELETE, F10, isKeyboardEvent } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import ConvertToBlocksButton from './convert-to-blocks-button';
+import ModalEdit from './modal';
 
 const { wp } = window;
 
@@ -36,17 +37,44 @@ function isTmceEmpty( editor ) {
 	return /^\n?$/.test( body.innerText || body.textContent );
 }
 
-export default function ClassicEdit( {
+export default function FreeformEdit( props ) {
+	const { clientId } = props;
+	const canRemove = useSelect(
+		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
+		[ clientId ]
+	);
+	const [ isIframed, setIsIframed ] = useState( false );
+	const ref = useRefEffect( ( element ) => {
+		setIsIframed( element.ownerDocument !== document );
+	}, [] );
+
+	return (
+		<>
+			{ canRemove && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ConvertToBlocksButton clientId={ clientId } />
+					</ToolbarGroup>
+				</BlockControls>
+			) }
+			<div { ...useBlockProps( { ref } ) }>
+				{ isIframed ? (
+					<ModalEdit { ...props } />
+				) : (
+					<ClassicEdit { ...props } />
+				) }
+			</div>
+		</>
+	);
+}
+
+function ClassicEdit( {
 	clientId,
 	attributes: { content },
 	setAttributes,
 	onReplace,
 } ) {
 	const { getMultiSelectedBlockClientIds } = useSelect( blockEditorStore );
-	const canRemove = useSelect(
-		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
-		[ clientId ]
-	);
 	const didMount = useRef( false );
 
 	useEffect( () => {
@@ -225,28 +253,19 @@ export default function ClassicEdit( {
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
 		<>
-			{ canRemove && (
-				<BlockControls>
-					<ToolbarGroup>
-						<ConvertToBlocksButton clientId={ clientId } />
-					</ToolbarGroup>
-				</BlockControls>
-			) }
-			<div { ...useBlockProps() }>
-				<div
-					key="toolbar"
-					id={ `toolbar-${ clientId }` }
-					className="block-library-classic__toolbar"
-					onClick={ focus }
-					data-placeholder={ __( 'Classic' ) }
-					onKeyDown={ onToolbarKeyDown }
-				/>
-				<div
-					key="editor"
-					id={ `editor-${ clientId }` }
-					className="wp-block-freeform block-library-rich-text__tinymce"
-				/>
-			</div>
+			<div
+				key="toolbar"
+				id={ `toolbar-${ clientId }` }
+				className="block-library-classic__toolbar"
+				onClick={ focus }
+				data-placeholder={ __( 'Classic' ) }
+				onKeyDown={ onToolbarKeyDown }
+			/>
+			<div
+				key="editor"
+				id={ `editor-${ clientId }` }
+				className="wp-block-freeform block-library-rich-text__tinymce"
+			/>
 		</>
 	);
 	/* eslint-enable jsx-a11y/no-static-element-interactions */

package/src/freeform/modal.js

@@ -0,0 +1,111 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockControls, store } from '@wordpress/block-editor';
+import {
+	ToolbarGroup,
+	ToolbarButton,
+	Modal,
+	Button,
+} from '@wordpress/components';
+import { useEffect, useState, RawHTML } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+
+function ClassicEdit( props ) {
+	const styles = useSelect(
+		( select ) => select( store ).getSettings().styles
+	);
+	useEffect( () => {
+		const { baseURL, suffix, settings } = window.wpEditorL10n.tinymce;
+
+		window.tinymce.EditorManager.overrideDefaults( {
+			base_url: baseURL,
+			suffix,
+		} );
+
+		window.wp.oldEditor.initialize( props.id, {
+			tinymce: {
+				...settings,
+				height: 500,
+				setup( editor ) {
+					editor.on( 'init', () => {
+						const doc = editor.getDoc();
+						styles.forEach( ( { css } ) => {
+							const styleEl = doc.createElement( 'style' );
+							styleEl.innerHTML = css;
+							doc.head.appendChild( styleEl );
+						} );
+					} );
+				},
+			},
+		} );
+
+		return () => {
+			window.wp.oldEditor.remove( props.id );
+		};
+	}, [] );
+
+	return <textarea { ...props } />;
+}
+
+export default function ModalEdit( props ) {
+	const {
+		clientId,
+		attributes: { content },
+		setAttributes,
+		onReplace,
+	} = props;
+	const [ isOpen, setOpen ] = useState( false );
+	const id = `editor-${ clientId }`;
+	const label = __( 'Classic Edit' );
+
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarButton onClick={ () => setOpen( true ) }>
+						{ label }
+					</ToolbarButton>
+				</ToolbarGroup>
+			</BlockControls>
+			{ content && <RawHTML>{ content }</RawHTML> }
+			{ ( isOpen || ! content ) && (
+				<Modal title={ label } __experimentalHideHeader={ true }>
+					<h2
+						style={ {
+							display: 'flex',
+							justifyContent: 'space-between',
+						} }
+					>
+						<div>{ label }</div>
+						<div>
+							<Button
+								onClick={ () =>
+									content ? setOpen( false ) : onReplace( [] )
+								}
+							>
+								{ __( 'Cancel' ) }
+							</Button>
+							<Button
+								isPrimary
+								onClick={ () => {
+									setAttributes( {
+										content:
+											window.wp.oldEditor.getContent(
+												id
+											),
+									} );
+									setOpen( false );
+								} }
+							>
+								{ __( 'Save' ) }
+							</Button>
+						</div>
+					</h2>
+					<ClassicEdit id={ id } defaultValue={ content } />
+				</Modal>
+			) }
+		</>
+	);
+}

package/src/gallery/edit.js

@@ -20,6 +20,7 @@ import {
 	MediaPlaceholder,
 	InspectorControls,
 	useBlockProps,
+	useInnerBlocksProps,
 	BlockControls,
 	MediaReplaceFlow,
 } from '@wordpress/block-editor';
@@ -63,6 +64,8 @@ const linkOptions = [
 	},
 ];
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
+const allowedBlocks = [ 'core/image' ];
+const LAYOUT = { type: 'default', alignments: [] };
 
 const PLACEHOLDER_TEXT = Platform.isNative
 	? __( 'ADD MEDIA' )
@@ -483,8 +486,20 @@ function GalleryEdit( props ) {
 		className: classnames( className, 'has-nested-images' ),
 	} );
 
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks,
+		orientation: 'horizontal',
+		renderAppender: false,
+		__experimentalLayout: LAYOUT,
+	} );
+
 	if ( ! hasImages ) {
-		return <View { ...blockProps }>{ mediaPlaceholder }</View>;
+		return (
+			<View { ...innerBlocksProps }>
+				{ innerBlocksProps.children }
+				{ mediaPlaceholder }
+			</View>
+		);
 	}
 
 	const hasLinkTo = linkTo && linkTo !== 'none';
@@ -516,6 +531,7 @@ function GalleryEdit( props ) {
 						help={ getImageCropHelp }
 					/>
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link to' ) }
 						value={ linkTo }
 						onChange={ setLinkTo }
@@ -531,6 +547,7 @@ function GalleryEdit( props ) {
 					) }
 					{ imageSizeOptions?.length > 0 && (
 						<SelectControl
+							__nextHasNoMarginBottom
 							label={ __( 'Image size' ) }
 							value={ sizeSlug }
 							options={ imageSizeOptions }
@@ -579,7 +596,7 @@ function GalleryEdit( props ) {
 						? mediaPlaceholder
 						: undefined
 				}
-				blockProps={ blockProps }
+				blockProps={ innerBlocksProps }
 				insertBlocksAfter={ insertBlocksAfter }
 			/>
 		</>

package/src/gallery/gallery.js

@@ -8,7 +8,6 @@ import classnames from 'classnames';
  */
 import {
 	RichText,
-	useInnerBlocksProps,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
@@ -16,8 +15,6 @@ import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { View } from '@wordpress/primitives';
 
-const allowedBlocks = [ 'core/image' ];
-
 export const Gallery = ( props ) => {
 	const {
 		attributes,
@@ -31,16 +28,9 @@ export const Gallery = ( props ) => {
 
 	const { align, columns, caption, imageCrop } = attributes;
 
-	const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps, {
-		allowedBlocks,
-		orientation: 'horizontal',
-		renderAppender: false,
-		__experimentalLayout: { type: 'default', alignments: [] },
-	} );
-
 	return (
 		<figure
-			{ ...innerBlocksProps }
+			{ ...blockProps }
 			className={ classnames(
 				blockProps.className,
 				layoutClassNames,
@@ -53,14 +43,15 @@ export const Gallery = ( props ) => {
 				}
 			) }
 		>
-			{ children }
-			{ isSelected && ! children && (
+			{ blockProps.children }
+			{ isSelected && ! blockProps.children && (
 				<View className="blocks-gallery-media-placeholder-wrapper">
 					{ mediaPlaceholder }
 				</View>
 			) }
 			<RichTextVisibilityHelper
 				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
+				identifier="caption"
 				tagName="figcaption"
 				className={ classnames(
 					'blocks-gallery-caption',

package/src/gallery/v1/edit.js

@@ -420,6 +420,7 @@ function GalleryEdit( props ) {
 						help={ getImageCropHelp }
 					/>
 					<SelectControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link to' ) }
 						value={ linkTo }
 						onChange={ setLinkTo }
@@ -428,6 +429,7 @@ function GalleryEdit( props ) {
 					/>
 					{ shouldShowSizeOptions && (
 						<SelectControl
+							__nextHasNoMarginBottom
 							label={ __( 'Image size' ) }
 							value={ sizeSlug }
 							options={ imageSizeOptions }

package/src/group/block.json

@@ -56,6 +56,9 @@
 				"width": true
 			}
 		},
+		"position": {
+			"sticky": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/group/edit.js

@@ -51,6 +51,7 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
 	return (
 		<InspectorControls __experimentalGroup="advanced">
 			<SelectControl
+				__nextHasNoMarginBottom
 				label={ __( 'HTML element' ) }
 				options={ [
 					{ label: __( 'Default (<div>)' ), value: 'div' },

package/src/image/image.js

@@ -125,37 +125,30 @@ export default function Image( {
 		},
 		[ id, isSelected, clientId ]
 	);
-	const { canInsertCover, imageEditing, imageSizes, maxWidth, mediaUpload } =
-		useSelect(
-			( select ) => {
-				const {
-					getBlockRootClientId,
-					getSettings,
-					canInsertBlockType,
-				} = select( blockEditorStore );
-
-				const rootClientId = getBlockRootClientId( clientId );
-				const settings = Object.fromEntries(
-					Object.entries( getSettings() ).filter( ( [ key ] ) =>
-						[
-							'imageEditing',
-							'imageSizes',
-							'maxWidth',
-							'mediaUpload',
-						].includes( key )
+	const { canInsertCover, imageEditing, imageSizes, mediaUpload } = useSelect(
+		( select ) => {
+			const { getBlockRootClientId, getSettings, canInsertBlockType } =
+				select( blockEditorStore );
+
+			const rootClientId = getBlockRootClientId( clientId );
+			const settings = Object.fromEntries(
+				Object.entries( getSettings() ).filter( ( [ key ] ) =>
+					[ 'imageEditing', 'imageSizes', 'mediaUpload' ].includes(
+						key
 					)
-				);
+				)
+			);
 
-				return {
-					...settings,
-					canInsertCover: canInsertBlockType(
-						'core/cover',
-						rootClientId
-					),
-				};
-			},
-			[ clientId ]
-		);
+			return {
+				...settings,
+				canInsertCover: canInsertBlockType(
+					'core/cover',
+					rootClientId
+				),
+			};
+		},
+		[ clientId ]
+	);
 	const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
@@ -413,6 +406,7 @@ export default function Image( {
 				<PanelBody title={ __( 'Settings' ) }>
 					{ ! multiImageSelection && (
 						<TextareaControl
+							__nextHasNoMarginBottom
 							label={ __( 'Alt text (alternative text)' ) }
 							value={ alt }
 							onChange={ updateAlt }
@@ -548,13 +542,9 @@ export default function Image( {
 		// With the current implementation of ResizableBox, an image needs an
 		// explicit pixel value for the max-width. In absence of being able to
 		// set the content-width, this max-width is currently dictated by the
-		// vanilla editor style. The following variable adds a buffer to this
-		// vanilla style, so 3rd party themes have some wiggleroom. This does,
-		// in most cases, allow you to scale the image beyond the width of the
-		// main column, though not infinitely.
-		// @todo It would be good to revisit this once a content-width variable
-		// becomes available.
-		const maxWidthBuffer = maxWidth * 2.5;
+		// vanilla editor style. We'll use the clientWidth here, to prevent the width
+		// of the image growing larger than the width of the block column.
+		const maxWidthBuffer = clientWidth;
 
 		let showRightHandle = false;
 		let showLeftHandle = false;
@@ -638,6 +628,7 @@ export default function Image( {
 			{ showCaption &&
 				( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
+						identifier="caption"
 						className={ __experimentalGetElementClassName(
 							'caption'
 						) }

package/src/latest-posts/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, pickBy } from 'lodash';
+import { get } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -104,16 +104,15 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				categories && categories.length > 0
 					? categories.map( ( cat ) => cat.id )
 					: [];
-			const latestPostsQuery = pickBy(
-				{
+			const latestPostsQuery = Object.fromEntries(
+				Object.entries( {
 					categories: catIds,
 					author: selectedAuthor,
 					order,
 					orderby: orderBy,
 					per_page: postsToShow,
 					_embed: 'wp:featuredmedia',
-				},
-				( value ) => typeof value !== 'undefined'
+				} ).filter( ( [ , value ] ) => typeof value !== 'undefined' )
 			);
 
 			return {
@@ -433,7 +432,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				<ToolbarGroup controls={ layoutControls } />
 			</BlockControls>
 			<ul { ...blockProps }>
-				{ displayPosts.map( ( post, i ) => {
+				{ displayPosts.map( ( post ) => {
 					const titleTrimmed = post.title.rendered.trim();
 					let excerpt = post.excerpt.rendered;
 					const currentAuthor = authorList?.find(
@@ -493,7 +492,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					);
 
 					return (
-						<li key={ i }>
+						<li key={ post.id }>
 							{ renderFeaturedImage && (
 								<div className={ imageClasses }>
 									{ addLinkToFeaturedImage ? (

package/src/latest-posts/test/__snapshots__/edit.native.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Latest Posts block inserts block 1`] = `"<!-- wp:latest-posts /-->"`;

package/src/latest-posts/test/edit.native.js

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getEditorHtml,
+	initializeEditor,
+	getBlock,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import apiFetch from '@wordpress/api-fetch';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Latest Posts block', () => {
+	afterEach( () => {
+		apiFetch.mockReset();
+	} );
+
+	it( 'inserts block', async () => {
+		const screen = await initializeEditor();
+
+		// Mock return value for categories
+		apiFetch.mockReturnValueOnce( Promise.resolve( [] ) );
+
+		// Add block
+		await addBlock( screen, 'Latest Posts' );
+
+		// Get block
+		const latestPostsBlock = await getBlock( screen, 'Latest Posts' );
+		expect( latestPostsBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );

package/src/media-text/edit.js

@@ -281,6 +281,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			) }
 			{ mediaType === 'image' && (
 				<TextareaControl
+					__nextHasNoMarginBottom
 					label={ __( 'Alt text (alternative text)' ) }
 					value={ mediaAlt }
 					onChange={ onMediaAltChange }

package/src/missing/edit.native.js

@@ -151,7 +151,8 @@ export class UnsupportedBlockEdit extends Component {
 		const infoTitle = sprintf( titleFormat, blockTitle );
 		const missingBlockDetail = applyFilters(
 			'native.missing_block_detail',
-			__( 'We are working hard to add more blocks with each release.' )
+			__( 'We are working hard to add more blocks with each release.' ),
+			blockName
 		);
 		const missingBlockActionButton = applyFilters(
 			'native.missing_block_action_button',
@@ -205,11 +206,17 @@ export class UnsupportedBlockEdit extends Component {
 					<Text style={ [ infoTextStyle, infoTitleStyle ] }>
 						{ infoTitle }
 					</Text>
-					{ isEditableInUnsupportedBlockEditor && (
-						<Text style={ [ infoTextStyle, infoDescriptionStyle ] }>
-							{ missingBlockDetail }
-						</Text>
-					) }
+					{ isEditableInUnsupportedBlockEditor &&
+						missingBlockDetail && (
+							<Text
+								style={ [
+									infoTextStyle,
+									infoDescriptionStyle,
+								] }
+							>
+								{ missingBlockDetail }
+							</Text>
+						) }
 				</View>
 				{ ( isUnsupportedBlockEditorSupported ||
 					canEnableUnsupportedBlockEditor ) &&

package/src/more/test/__snapshots__/edit.native.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`More block inserts block 1`] = `
+"<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->"
+`;

package/src/more/test/edit.native.js

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getEditorHtml,
+	initializeEditor,
+	getBlock,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'More block', () => {
+	it( 'inserts block', async () => {
+		const screen = await initializeEditor();
+
+		// Add block
+		await addBlock( screen, 'More' );
+
+		// Get block
+		const moreBlock = await getBlock( screen, 'More' );
+		expect( moreBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );