@wordpress/block-library 7.6.0 → 7.9.0

package/src/shortcode/edit.native.js

@@ -9,6 +9,7 @@ import { View, Text } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import { PlainText } from '@wordpress/block-editor';
 import { withPreferredColorScheme } from '@wordpress/compose';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,11 +24,16 @@ export function ShortcodeEdit( props ) {
 		onFocus,
 		onBlur,
 		getStylesFromColorScheme,
+		blockWidth,
 	} = props;
 	const titleStyle = getStylesFromColorScheme(
 		styles.blockTitle,
 		styles.blockTitleDark
 	);
+	const shortcodeContainerStyle = getStylesFromColorScheme(
+		styles.blockShortcodeContainer,
+		styles.blockShortcodeContainerDark
+	);
 	const shortcodeStyle = getStylesFromColorScheme(
 		styles.blockShortcode,
 		styles.blockShortcodeDark
@@ -37,24 +43,33 @@ export function ShortcodeEdit( props ) {
 		styles.placeholderDark
 	);
 
+	const maxWidth =
+		blockWidth -
+		shortcodeContainerStyle.paddingLeft +
+		shortcodeContainerStyle.paddingRight;
+
+	const onChange = useCallback(
+		( text ) => setAttributes( { text } ),
+		[ setAttributes ]
+	);
+
 	return (
 		<View>
 			<Text style={ titleStyle }>{ __( 'Shortcode' ) }</Text>
-			<PlainText
-				value={ attributes.text }
-				style={ shortcodeStyle }
-				multiline={ true }
-				underlineColorAndroid="transparent"
-				onChange={ ( text ) => setAttributes( { text } ) }
-				placeholder={ __( 'Add a shortcode…' ) }
-				aria-label={ __( 'Shortcode' ) }
-				isSelected={ props.isSelected }
-				onFocus={ onFocus }
-				onBlur={ onBlur }
-				autoCorrect={ false }
-				autoComplete="off"
-				placeholderTextColor={ placeholderStyle.color }
-			/>
+			<View style={ shortcodeContainerStyle }>
+				<PlainText
+					__experimentalVersion={ 2 }
+					value={ attributes.text }
+					style={ shortcodeStyle }
+					onChange={ onChange }
+					placeholder={ __( 'Add a shortcode…' ) }
+					onFocus={ onFocus }
+					onBlur={ onBlur }
+					placeholderTextColor={ placeholderStyle.color }
+					maxWidth={ maxWidth }
+					disableAutocorrection
+				/>
+			</View>
 		</View>
 	);
 }

package/src/shortcode/style.native.scss

@@ -11,18 +11,25 @@
 	color: $gray-50;
 }
 
+.blockShortcodeContainer {
+	padding: 12px;
+	border-radius: 4px;
+	background-color: $gray-light;
+}
+
+.blockShortcodeContainerDark {
+	background-color: $gray-100;
+}
+
 .blockShortcode {
 	font-family: $default-monospace-font;
 	font-weight: 400;
 	font-size: 14px;
-	padding: 12px;
-	border-radius: 4px;
-	background-color: $gray-light;
+	color: $gray-900;
 }
 
 .blockShortcodeDark {
 	color: $white;
-	background-color: $gray-100;
 }
 
 .placeholder {

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Shortcode block edits content 1`] = `
+"<!-- wp:shortcode -->
+[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]
+<!-- /wp:shortcode -->"
+`;
+
+exports[`Shortcode block inserts block 1`] = `"<!-- wp:shortcode /-->"`;

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

@@ -1,58 +1,73 @@
 /**
  * External dependencies
  */
-import renderer from 'react-test-renderer';
-import { TextInput } from 'react-native';
+import {
+	getEditorHtml,
+	initializeEditor,
+	fireEvent,
+	waitFor,
+} from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
-import { BlockEdit } from '@wordpress/block-editor';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
 
-/**
- * Internal dependencies
- */
-import { metadata, settings, name } from '../index';
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Shortcode block', () => {
+	it( 'inserts block', async () => {
+		const { getByA11yLabel, getByTestId, getByText } =
+			await initializeEditor();
 
-const Shortcode = ( { clientId, ...props } ) => (
-	<BlockEdit name={ name } clientId={ clientId || 0 } { ...props } />
-);
+		fireEvent.press( getByA11yLabel( 'Add block' ) );
 
-describe( 'Shortcode', () => {
-	beforeAll( () => {
-		registerBlockType( name, {
-			...metadata,
-			...settings,
+		const blockList = getByTestId( 'InserterUI-Blocks' );
+		// onScroll event used to force the FlatList to render all items
+		fireEvent.scroll( blockList, {
+			nativeEvent: {
+				contentOffset: { y: 0, x: 0 },
+				contentSize: { width: 100, height: 100 },
+				layoutMeasurement: { width: 100, height: 100 },
+			},
 		} );
-	} );
 
-	afterAll( () => {
-		unregisterBlockType( name );
-	} );
+		fireEvent.press( await waitFor( () => getByText( 'Shortcode' ) ) );
 
-	it( 'renders without crashing', () => {
-		const component = renderer.create(
-			<Shortcode attributes={ { text: '' } } />
-		);
-		const rendered = component.toJSON();
-		expect( rendered ).toBeTruthy();
+		expect( getByA11yLabel( /Shortcode Block\. Row 1/ ) ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	it( 'renders given text without crashing', () => {
-		const component = renderer.create(
-			<Shortcode
-				attributes={ {
-					text:
-						'[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]',
-				} }
-			/>
-		);
-		const testInstance = component.root;
-		const textInput = testInstance.findByType( TextInput );
-		expect( textInput ).toBeTruthy();
-		expect( textInput.props.value ).toBe(
-			'[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]'
+	it( 'edits content', async () => {
+		const { getByA11yLabel, getByPlaceholderText } = await initializeEditor(
+			{
+				initialHtml: '<!-- wp:shortcode /-->',
+			}
 		);
+		const shortcodeBlock = getByA11yLabel( /Shortcode Block\. Row 1/ );
+		fireEvent.press( shortcodeBlock );
+
+		const textField = getByPlaceholderText( 'Add a shortcode…' );
+		fireEvent( textField, 'focus' );
+		fireEvent( textField, 'onChange', {
+			nativeEvent: {
+				eventCount: 1,
+				target: undefined,
+				text: '[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]',
+			},
+		} );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 } );

package/src/site-logo/edit.js

@@ -40,7 +40,6 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { crop, upload } from '@wordpress/icons';
-import { SVG, Path } from '@wordpress/primitives';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -370,9 +369,8 @@ export default function LogoEdit( {
 		mediaItemData,
 		isRequestingMediaItem,
 	} = useSelect( ( select ) => {
-		const { canUser, getEntityRecord, getEditedEntityRecord } = select(
-			coreStore
-		);
+		const { canUser, getEntityRecord, getEditedEntityRecord } =
+			select( coreStore );
 		const siteSettings = getEditedEntityRecord( 'root', 'site' );
 		const siteData = getEntityRecord( 'root', '__unstableBase' );
 		const _siteLogo = siteSettings?.site_logo;
@@ -520,20 +518,8 @@ export default function LogoEdit( {
 			<Placeholder
 				className={ placeholderClassName }
 				preview={ logoImage }
+				withIllustration={ true }
 			>
-				{
-					<SVG
-						className="components-placeholder__illustration"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 60 60"
-					>
-						<Path
-							vectorEffect="non-scaling-stroke"
-							d="m61 32.622-13.555-9.137-15.888 9.859a5 5 0 0 1-5.386-.073l-9.095-5.989L1 37.5"
-						/>
-					</SVG>
-				}
 				{ content }
 			</Placeholder>
 		);

package/src/site-logo/editor.scss

@@ -131,20 +131,6 @@
 		.components-button.components-button > svg {
 			color: $white;
 		}
-
-		// Style the placeholder illustration.
-		.components-placeholder__illustration {
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			stroke: currentColor;
-			stroke-dasharray: 3;
-			opacity: 0.4;
-		}
 	}
 
 	// Show upload button on block selection.

package/src/site-logo/style.scss

@@ -11,6 +11,12 @@
 		height: auto;
 	}
 
+	// Constrain the image to its container.
+	img {
+		height: auto;
+		max-width: 100%;
+	}
+
 	// Inherit border radius from style variations.
 	a,
 	img {

package/src/social-links/deprecated.js

@@ -99,12 +99,14 @@ const deprecated = [
 			const className = classNames( size, {
 				'has-icon-color': iconColorValue,
 				'has-icon-background-color': iconBackgroundColorValue,
-				[ `items-justified-${ itemsJustification }` ]: itemsJustification,
+				[ `items-justified-${ itemsJustification }` ]:
+					itemsJustification,
 			} );
 
 			const style = {
 				'--wp--social-links--icon-color': iconColorValue,
-				'--wp--social-links--icon-background-color': iconBackgroundColorValue,
+				'--wp--social-links--icon-background-color':
+					iconBackgroundColorValue,
 			};
 
 			return (

package/src/social-links/edit.js

@@ -215,16 +215,17 @@ export function SocialLinksEdit( props ) {
 					__experimentalIsRenderedInSidebar
 					title={ __( 'Color' ) }
 					colorSettings={ colorSettings }
-				/>
-				{ ! logosOnly && (
-					<ContrastChecker
-						{ ...{
-							textColor: iconColorValue,
-							backgroundColor: iconBackgroundColorValue,
-						} }
-						isLargeText={ false }
-					/>
-				) }
+				>
+					{ ! logosOnly && (
+						<ContrastChecker
+							{ ...{
+								textColor: iconColorValue,
+								backgroundColor: iconBackgroundColorValue,
+							} }
+							isLargeText={ false }
+						/>
+					) }
+				</PanelColorSettings>
 			</InspectorControls>
 			<ul { ...innerBlocksProps } />
 		</Fragment>

package/src/social-links/edit.native.js

@@ -68,11 +68,9 @@ function SocialLinksEdit( {
 	);
 
 	function renderPlaceholder() {
-		return [
-			...new Array( innerBlocks.length || 1 ),
-		].map( ( _, index ) => (
-			<View style={ placeholderStyle } key={ index } />
-		) );
+		return [ ...new Array( innerBlocks.length || 1 ) ].map(
+			( _, index ) => <View style={ placeholderStyle } key={ index } />
+		);
 	}
 
 	function filterInnerBlocks( blockIds ) {

package/src/spacer/controls.js

@@ -43,9 +43,8 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	};
 
 	// Force the unit to update to `px` when the Spacer is being resized.
-	const [ parsedQuantity, parsedUnit ] = parseQuantityAndUnitFromRawValue(
-		value
-	);
+	const [ parsedQuantity, parsedUnit ] =
+		parseQuantityAndUnitFromRawValue( value );
 	const computedValue = [
 		parsedQuantity,
 		isResizing ? 'px' : parsedUnit,

package/src/spacer/test/index.native.js

@@ -28,11 +28,8 @@ afterAll( () => {
 
 describe( 'Spacer block', () => {
 	it( 'inserts block', async () => {
-		const {
-			getByA11yLabel,
-			getByTestId,
-			getByText,
-		} = await initializeEditor();
+		const { getByA11yLabel, getByTestId, getByText } =
+			await initializeEditor();
 
 		fireEvent.press( getByA11yLabel( 'Add block' ) );
 
@@ -56,14 +53,10 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const {
-			getByA11yLabel,
-			getByDisplayValue,
-			getByTestId,
-			getByText,
-		} = await initializeEditor( {
-			initialHtml,
-		} );
+		const { getByA11yLabel, getByDisplayValue, getByTestId, getByText } =
+			await initializeEditor( {
+				initialHtml,
+			} );
 
 		// Select Spacer block
 		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
@@ -87,14 +80,10 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const {
-			getByA11yLabel,
-			getByDisplayValue,
-			getByTestId,
-			getByText,
-		} = await initializeEditor( {
-			initialHtml,
-		} );
+		const { getByA11yLabel, getByDisplayValue, getByTestId, getByText } =
+			await initializeEditor( {
+				initialHtml,
+			} );
 
 		// Select Spacer block
 		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );

package/src/table/block.json

@@ -156,7 +156,12 @@
 				"width": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-table > table"
+		"__experimentalSelector": ".wp-block-table > table",
+		"__experimentalStyle": {
+			"spacing": {
+				"margin": "0 0 1em 0"
+			}
+		}
 	},
 	"styles": [
 		{

package/src/table/deprecated.js

@@ -198,7 +198,8 @@ const deprecated = [
 										cellIndex
 									) => {
 										const cellClasses = classnames( {
-											[ `has-text-align-${ align }` ]: align,
+											[ `has-text-align-${ align }` ]:
+												align,
 										} );
 
 										return (
@@ -367,13 +368,8 @@ const deprecated = [
 		},
 		supports,
 		save( { attributes } ) {
-			const {
-				hasFixedLayout,
-				head,
-				body,
-				foot,
-				backgroundColor,
-			} = attributes;
+			const { hasFixedLayout, head, body, foot, backgroundColor } =
+				attributes;
 			const isEmpty = ! head.length && ! body.length && ! foot.length;
 
 			if ( isEmpty ) {

package/src/table/edit.js

@@ -16,6 +16,7 @@ import {
 	useBlockProps,
 	__experimentalUseColorProps as useColorProps,
 	__experimentalUseBorderProps as useBorderProps,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import {
@@ -509,6 +510,7 @@ function TableEdit( {
 			{ ! isEmpty && (
 				<RichText
 					tagName="figcaption"
+					className={ __experimentalGetElementClassName( 'caption' ) }
 					aria-label={ __( 'Table caption text' ) }
 					placeholder={ __( 'Add caption' ) }
 					value={ caption }

package/src/table/save.js

@@ -11,6 +11,7 @@ import {
 	useBlockProps,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
@@ -82,7 +83,11 @@ export default function save( { attributes } ) {
 				<Section type="foot" rows={ foot } />
 			</table>
 			{ hasCaption && (
-				<RichText.Content tagName="figcaption" value={ caption } />
+				<RichText.Content
+					tagName="figcaption"
+					value={ caption }
+					className={ __experimentalGetElementClassName( 'caption' ) }
+				/>
 			) }
 		</figure>
 	);

package/src/table/state.js

@@ -79,10 +79,8 @@ export function updateSelectedCell( state, selection, updateCell ) {
 	}
 
 	const tableSections = pick( state, [ 'head', 'body', 'foot' ] );
-	const {
-		sectionName: selectionSectionName,
-		rowIndex: selectionRowIndex,
-	} = selection;
+	const { sectionName: selectionSectionName, rowIndex: selectionRowIndex } =
+		selection;
 
 	return mapValues( tableSections, ( section, sectionName ) => {
 		if ( selectionSectionName && selectionSectionName !== sectionName ) {

package/src/table/style.scss

@@ -1,5 +1,4 @@
 .wp-block-table {
-	margin: 0 0 1em 0;
 	$subtle-light-gray: #f3f4f5;
 	$subtle-pale-green: #e9fbe5;
 	$subtle-pale-blue: #e7f5fe;

package/src/table-of-contents/edit.js

@@ -13,7 +13,7 @@ import {
 	store as blockEditorStore,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { createBlock, store as blocksStore } from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
 import {
 	PanelBody,
 	Placeholder,
@@ -57,15 +57,19 @@ export default function TableOfContentsEdit( {
 	const blockProps = useBlockProps();
 	const disabledRef = useDisabled();
 
-	const listBlockExists = useSelect(
-		( select ) => !! select( blocksStore ).getBlockType( 'core/list' ),
-		[]
+	const canInsertList = useSelect(
+		( select ) => {
+			const { getBlockRootClientId, canInsertBlockType } =
+				select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+
+			return canInsertBlockType( 'core/list', rootClientId );
+		},
+		[ clientId ]
 	);
 
-	const {
-		__unstableMarkNextChangeAsNotPersistent,
-		replaceBlocks,
-	} = useDispatch( blockEditorStore );
+	const { __unstableMarkNextChangeAsNotPersistent, replaceBlocks } =
+		useDispatch( blockEditorStore );
 
 	/**
 	 * The latest heading data, or null if the new data deeply equals the saved
@@ -177,9 +181,8 @@ export default function TableOfContentsEdit( {
 					headingPage === tocPage
 				) {
 					if ( blockName === 'core/heading' ) {
-						const headingAttributes = getBlockAttributes(
-							blockClientId
-						);
+						const headingAttributes =
+							getBlockAttributes( blockClientId );
 
 						const canBeLinked =
 							typeof headingPageLink === 'string' &&
@@ -187,7 +190,13 @@ export default function TableOfContentsEdit( {
 							headingAttributes.anchor !== '';
 
 						_latestHeadings.push( {
-							content: stripHTML( headingAttributes.content ),
+							// Convert line breaks to spaces, and get rid of HTML tags in the headings.
+							content: stripHTML(
+								headingAttributes.content.replace(
+									/(<br *\/?>)+/g,
+									' '
+								)
+							),
 							level: headingAttributes.level,
 							link: canBeLinked
 								? `${ headingPageLink }#${ headingAttributes.anchor }`
@@ -216,7 +225,7 @@ export default function TableOfContentsEdit( {
 
 	const headingTree = linearToNestedHeadingList( headings );
 
-	const toolbarControls = listBlockExists && (
+	const toolbarControls = canInsertList && (
 		<BlockControls>
 			<ToolbarGroup>
 				<ToolbarButton

package/src/tag-cloud/edit.js

@@ -83,9 +83,8 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 
 	const onFontSizeChange = ( fontSizeLabel, newValue ) => {
 		// eslint-disable-next-line @wordpress/no-unused-vars-before-return
-		const [ quantity, newUnit ] = parseQuantityAndUnitFromRawValue(
-			newValue
-		);
+		const [ quantity, newUnit ] =
+			parseQuantityAndUnitFromRawValue( newValue );
 		if ( ! Number.isFinite( quantity ) ) {
 			return;
 		}
@@ -96,10 +95,8 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 			smallestFontSize,
 			largestFontSize,
 		} ).forEach( ( [ attribute, currentValue ] ) => {
-			const [
-				currentQuantity,
-				currentUnit,
-			] = parseQuantityAndUnitFromRawValue( currentValue );
+			const [ currentQuantity, currentUnit ] =
+				parseQuantityAndUnitFromRawValue( currentValue );
 			// Only add an update if the other font size attribute has a different unit.
 			if ( attribute !== fontSizeLabel && currentUnit !== newUnit ) {
 				updateObj[ attribute ] = `${ currentQuantity }${ newUnit }`;

package/src/template-part/edit/advanced-controls.js

@@ -31,10 +31,10 @@ export function TemplatePartAdvancedControls( {
 	const { areaOptions } = useSelect( ( 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 */
 		return {
 			areaOptions: definedAreas.map( ( { label, area: _area } ) => ( {
 				label,