@wordpress/block-library 7.18.0 → 8.0.0

package/src/rss/edit.js

@@ -111,6 +111,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Number of items' ) }
 						value={ itemsToShow }
 						onChange={ ( value ) =>
@@ -137,6 +138,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 					/>
 					{ displayExcerpt && (
 						<RangeControl
+							__nextHasNoMarginBottom
 							label={ __( 'Max number of words in excerpt' ) }
 							value={ excerptLength }
 							onChange={ ( value ) =>
@@ -149,6 +151,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 					) }
 					{ blockLayout === 'grid' && (
 						<RangeControl
+							__nextHasNoMarginBottom
 							label={ __( 'Columns' ) }
 							value={ columns }
 							onChange={ ( value ) =>

package/src/search/edit.native.js

@@ -42,6 +42,36 @@ const BUTTON_OPTIONS = [
 	{ value: 'no-button', label: __( 'No button' ) },
 ];
 
+function useIsScreenReaderEnabled() {
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
+		useState( false );
+
+	useEffect( () => {
+		let mounted = true;
+
+		const changeListener = AccessibilityInfo.addEventListener(
+			'screenReaderChanged',
+			( enabled ) => setIsScreenReaderEnabled( enabled )
+		);
+
+		AccessibilityInfo.isScreenReaderEnabled().then(
+			( screenReaderEnabled ) => {
+				if ( mounted && screenReaderEnabled ) {
+					setIsScreenReaderEnabled( screenReaderEnabled );
+				}
+			}
+		);
+
+		return () => {
+			mounted = false;
+
+			changeListener.remove();
+		};
+	}, [] );
+
+	return isScreenReaderEnabled;
+}
+
 export default function SearchEdit( {
 	onFocus,
 	isSelected,
@@ -57,8 +87,7 @@ export default function SearchEdit( {
 		useState( false );
 	const [ isLongButton, setIsLongButton ] = useState( false );
 	const [ buttonWidth, setButtonWidth ] = useState( MIN_BUTTON_WIDTH );
-	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
-		useState( false );
+	const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
 	const textInputRef = useRef( null );
 
@@ -71,31 +100,6 @@ export default function SearchEdit( {
 		buttonText,
 	} = attributes;
 
-	/*
-	 * Check if screenreader is enabled and save to state. This is important for
-	 * properly creating accessibilityLabel text.
-	 */
-	useEffect( () => {
-		const a11yInfoChangeSubscription = AccessibilityInfo.addEventListener(
-			'screenReaderChanged',
-			handleScreenReaderToggled
-		);
-
-		AccessibilityInfo.isScreenReaderEnabled().then(
-			( screenReaderEnabled ) => {
-				setIsScreenReaderEnabled( screenReaderEnabled );
-			}
-		);
-
-		return () => {
-			a11yInfoChangeSubscription.remove();
-		};
-	}, [] );
-
-	const handleScreenReaderToggled = ( screenReaderEnabled ) => {
-		setIsScreenReaderEnabled( screenReaderEnabled );
-	};
-
 	/*
 	 * Called when the value of isSelected changes. Blurs the PlainText component
 	 * used by the placeholder when this block loses focus.

package/src/search/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { search as icon } from '@wordpress/icons';
 
 /**
@@ -17,7 +18,10 @@ export { metadata, name };
 
 export const settings = {
 	icon,
-	example: {},
+	example: {
+		attributes: { buttonText: __( 'Search' ), label: __( 'Search' ) },
+		viewportWidth: 400,
+	},
 	variations,
 	edit,
 };

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

@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	getEditorHtml,
-	initializeEditor,
-	fireEvent,
-	waitFor,
-} from 'test/helpers';
+import { getEditorHtml, initializeEditor, fireEvent } from 'test/helpers';
 
 /**
  * WordPress dependencies
@@ -28,12 +23,11 @@ afterAll( () => {
 
 describe( 'Shortcode block', () => {
 	it( 'inserts block', async () => {
-		const { getByA11yLabel, getByTestId, getByText } =
-			await initializeEditor();
+		const screen = await initializeEditor();
 
-		fireEvent.press( getByA11yLabel( 'Add block' ) );
+		fireEvent.press( screen.getByLabelText( 'Add block' ) );
 
-		const blockList = getByTestId( 'InserterUI-Blocks' );
+		const blockList = screen.getByTestId( 'InserterUI-Blocks' );
 		// onScroll event used to force the FlatList to render all items
 		fireEvent.scroll( blockList, {
 			nativeEvent: {
@@ -43,22 +37,25 @@ describe( 'Shortcode block', () => {
 			},
 		} );
 
-		fireEvent.press( await waitFor( () => getByText( 'Shortcode' ) ) );
+		fireEvent.press( await screen.findByText( 'Shortcode' ) );
 
-		expect( getByA11yLabel( /Shortcode Block\. Row 1/ ) ).toBeVisible();
+		const [ shortcodeBlock ] = screen.getAllByLabelText(
+			/Shortcode Block\. Row 1/
+		);
+		expect( shortcodeBlock ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
 	it( 'edits content', async () => {
-		const { getByA11yLabel, getByPlaceholderText } = await initializeEditor(
-			{
-				initialHtml: '<!-- wp:shortcode /-->',
-			}
+		const screen = await initializeEditor( {
+			initialHtml: '<!-- wp:shortcode /-->',
+		} );
+		const [ shortcodeBlock ] = screen.getAllByLabelText(
+			/Shortcode Block\. Row 1/
 		);
-		const shortcodeBlock = getByA11yLabel( /Shortcode Block\. Row 1/ );
 		fireEvent.press( shortcodeBlock );
 
-		const textField = getByPlaceholderText( 'Add a shortcode…' );
+		const textField = screen.getByPlaceholderText( 'Add a shortcode…' );
 		fireEvent( textField, 'focus' );
 		fireEvent( textField, 'onChange', {
 			nativeEvent: {

package/src/site-logo/edit.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { pick } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -87,7 +86,11 @@ const SiteLogo = ( {
 		);
 		return {
 			title: siteEntities?.name,
-			...pick( getSettings(), [ 'imageEditing', 'maxWidth' ] ),
+			...Object.fromEntries(
+				Object.entries( getSettings() ).filter( ( [ key ] ) =>
+					[ 'imageEditing', 'maxWidth' ].includes( key )
+				)
+			),
 		};
 	}, [] );
 
@@ -120,9 +123,10 @@ const SiteLogo = ( {
 			src={ logoUrl }
 			alt={ alt }
 			onLoad={ ( event ) => {
-				setNaturalSize(
-					pick( event.target, [ 'naturalWidth', 'naturalHeight' ] )
-				);
+				setNaturalSize( {
+					naturalWidth: event.target.naturalWidth,
+					naturalHeight: event.target.naturalHeight,
+				} );
 			} }
 		/>
 	);
@@ -291,6 +295,7 @@ const SiteLogo = ( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Image width' ) }
 						onChange={ ( newWidth ) =>
 							setAttributes( { width: newWidth } )
@@ -394,7 +399,7 @@ export default function LogoEdit( {
 		return {
 			siteLogoId: _siteLogoId,
 			canUserEdit: _canUserEdit,
-			url: siteData?.url,
+			url: siteData?.home,
 			mediaItemData: mediaItem,
 			isRequestingMediaItem: _isRequestingMediaItem,
 			siteIconId: _siteIconId,
@@ -512,6 +517,9 @@ export default function LogoEdit( {
 				className={ placeholderClassName }
 				preview={ logoImage }
 				withIllustration={ true }
+				style={ {
+					width,
+				} }
 			>
 				{ content }
 			</Placeholder>

package/src/site-logo/index.js

@@ -16,6 +16,7 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	example: {},
 	edit,
 	transforms,
 };

package/src/site-title/index.js

@@ -17,6 +17,7 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	example: {},
 	edit,
 	transforms,
 	deprecated,

package/src/social-link/social-list.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -22,7 +17,7 @@ import { ChainIcon } from './icons';
  * @return {WPComponent} Icon component for social service.
  */
 export const getIconBySite = ( name ) => {
-	const variation = find( variations, { name } );
+	const variation = variations.find( ( v ) => v.name === name );
 	return variation ? variation.icon : ChainIcon;
 };
 
@@ -34,6 +29,6 @@ export const getIconBySite = ( name ) => {
  * @return {string} Display name for social service
  */
 export const getNameBySite = ( name ) => {
-	const variation = find( variations, { name } );
+	const variation = variations.find( ( v ) => v.name === name );
 	return variation ? variation.title : __( 'Social Icon' );
 };

package/src/social-link/test/index.native.js

@@ -33,7 +33,7 @@ describe( '<SocialLinkEdit/>', () => {
 
 		// Act
 		fireEvent.press(
-			await waitFor( () => subject.getByA11yLabel( 'Add block' ) )
+			await waitFor( () => subject.getByLabelText( 'Add block' ) )
 		);
 		fireEvent.changeText(
 			await waitFor( () =>
@@ -42,16 +42,13 @@ describe( '<SocialLinkEdit/>', () => {
 			'social icons'
 		);
 		fireEvent.press(
-			await waitFor( () =>
-				subject.getByA11yLabel( 'Social Icons block' )
-			)
+			await subject.findByLabelText( 'Social Icons block' )
+		);
+		const [ socialIconsBlock ] = subject.getAllByLabelText(
+			/Social Icons Block. Row 1/
 		);
 		fireEvent(
-			await waitFor( () =>
-				within(
-					subject.getByA11yLabel( /Social Icons Block. Row 1/ )
-				).getByTestId( 'block-list-wrapper' )
-			),
+			within( socialIconsBlock ).getByTestId( 'block-list-wrapper' ),
 			'layout',
 			{ nativeEvent: { layout: { width: 100 } } }
 		);
@@ -59,22 +56,22 @@ describe( '<SocialLinkEdit/>', () => {
 		// Assert
 		expect(
 			await waitFor( () =>
-				subject.getByA11yLabel( /WordPress social icon/ )
+				subject.getByLabelText( /WordPress social icon/ )
 			)
 		).toBeDefined();
 		expect(
 			await waitFor( () =>
-				subject.getByA11yLabel( /Facebook social icon/ )
+				subject.getByLabelText( /Facebook social icon/ )
 			)
 		).toBeDefined();
 		expect(
 			await waitFor( () =>
-				subject.getByA11yLabel( /Twitter social icon/ )
+				subject.getByLabelText( /Twitter social icon/ )
 			)
 		).toBeDefined();
 		expect(
 			await waitFor( () =>
-				subject.getByA11yLabel( /Instagram social icon/ )
+				subject.getByLabelText( /Instagram social icon/ )
 			)
 		).toBeDefined();
 	} );
@@ -90,7 +87,7 @@ describe( '<SocialLinkEdit/>', () => {
 
 		// Act
 		fireEvent.press(
-			await waitFor( () => subject.getByA11yLabel( 'Add block' ) )
+			await waitFor( () => subject.getByLabelText( 'Add block' ) )
 		);
 		fireEvent.changeText(
 			await waitFor( () =>
@@ -99,16 +96,13 @@ describe( '<SocialLinkEdit/>', () => {
 			'social icons'
 		);
 		fireEvent.press(
-			await waitFor( () =>
-				subject.getByA11yLabel( 'Social Icons block' )
-			)
+			await subject.findByLabelText( 'Social Icons block' )
+		);
+		const [ socialIconsBlock ] = subject.getAllByLabelText(
+			/Social Icons Block. Row 1/
 		);
 		fireEvent(
-			await waitFor( () =>
-				within(
-					subject.getByA11yLabel( /Social Icons Block. Row 1/ )
-				).getByTestId( 'block-list-wrapper' )
-			),
+			within( socialIconsBlock ).getByTestId( 'block-list-wrapper' ),
 			'layout',
 			{ nativeEvent: { layout: { width: 100 } } }
 		);

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

@@ -88,7 +88,7 @@ describe( 'Social links block', () => {
 
 		// Check there's only one active social link
 		const socialLinks =
-			within( socialLinksBlock ).getAllByA11yLabel( / social icon/ );
+			within( socialLinksBlock ).getAllByLabelText( / social icon/ );
 		expect( socialLinks.length ).toBe( 1 );
 
 		// Check the WordPress link is shown when unselected
@@ -104,7 +104,6 @@ describe( 'Social links block', () => {
 
 	it( 'shows the social links bottom sheet when tapping on the inline appender', async () => {
 		const screen = await initializeEditor();
-		const { getByTestId, getByText } = screen;
 
 		// Add block
 		await addBlock( screen, 'Social Icons' );
@@ -131,7 +130,7 @@ describe( 'Social links block', () => {
 		fireEvent.press( appenderButton );
 
 		// Find a social link in the inserter
-		const blockList = getByTestId( 'InserterUI-Blocks' );
+		const blockList = screen.getByTestId( 'InserterUI-Blocks' );
 
 		// onScroll event used to force the FlatList to render all items
 		fireEvent.scroll( blockList, {
@@ -143,17 +142,19 @@ describe( 'Social links block', () => {
 		} );
 
 		// Add the Amazon link
-		const amazonBlock = await waitFor( () => getByText( 'Amazon' ) );
+		const amazonBlock = await screen.findByText( 'Amazon' );
 		expect( amazonBlock ).toBeVisible();
 
 		fireEvent.press( amazonBlock );
 
+		await screen.findByTestId( 'navigation-screen-LinkSettingsScreen' );
+
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
 	it( 'shows the ghost placeholder when no icon is active', async () => {
 		const screen = await initializeEditor();
-		const { getByA11yLabel } = screen;
+		const { getByLabelText } = screen;
 
 		// Add block
 		await addBlock( screen, 'Social Icons' );
@@ -178,11 +179,11 @@ describe( 'Social links block', () => {
 		fireEvent.press( firstLinkBlock );
 
 		// Open block actions menu
-		const blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ );
+		const blockActionsButton = getByLabelText( /Open Block Actions Menu/ );
 		fireEvent.press( blockActionsButton );
 
 		// Delete the social link
-		const deleteButton = getByA11yLabel( /Remove block/ );
+		const deleteButton = getByLabelText( /Remove block/ );
 		fireEvent.press( deleteButton );
 
 		// Add Paragraph block

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

@@ -28,12 +28,11 @@ afterAll( () => {
 
 describe( 'Spacer block', () => {
 	it( 'inserts block', async () => {
-		const { getByA11yLabel, getByTestId, getByText } =
-			await initializeEditor();
+		const screen = await initializeEditor();
 
-		fireEvent.press( getByA11yLabel( 'Add block' ) );
+		fireEvent.press( screen.getByLabelText( 'Add block' ) );
 
-		const blockList = getByTestId( 'InserterUI-Blocks' );
+		const blockList = screen.getByTestId( 'InserterUI-Blocks' );
 		// onScroll event used to force the FlatList to render all items
 		fireEvent.scroll( blockList, {
 			nativeEvent: {
@@ -43,9 +42,11 @@ describe( 'Spacer block', () => {
 			},
 		} );
 
-		fireEvent.press( await waitFor( () => getByText( 'Spacer' ) ) );
+		fireEvent.press( screen.getByText( 'Spacer' ) );
 
-		expect( getByA11yLabel( /Spacer Block\. Row 1/ ) ).toBeVisible();
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
+		expect( spacerBlock ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
@@ -53,24 +54,24 @@ 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 screen = await initializeEditor( {
+			initialHtml,
+		} );
 
 		// Select Spacer block
-		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
 		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
+			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
 		// Update height attribute
-		fireEvent.press( getByText( '100' ) );
-		const heightTextInput = getByDisplayValue( '100' );
+		fireEvent.press( screen.getByText( '100' ) );
+		const heightTextInput = screen.getByDisplayValue( '100' );
 		fireEvent.changeText( heightTextInput, '50' );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -80,28 +81,28 @@ 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 screen = await initializeEditor( {
+			initialHtml,
+		} );
 
 		// Select Spacer block
-		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
 		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
+			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
 		// Set vh unit
-		fireEvent.press( getByText( 'px' ) );
-		fireEvent.press( getByText( 'Viewport height (vh)' ) );
+		fireEvent.press( screen.getByText( 'px' ) );
+		fireEvent.press( screen.getByText( 'Viewport height (vh)' ) );
 
 		// Update height attribute
-		fireEvent.press( getByText( '100' ) );
-		const heightTextInput = getByDisplayValue( '100' );
+		fireEvent.press( screen.getByText( '100' ) );
+		const heightTextInput = screen.getByDisplayValue( '100' );
 		fireEvent.changeText( heightTextInput, '25' );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -111,23 +112,24 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select Spacer block
-		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
 		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
+			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
 		// Increment height
 		fireEvent(
-			getByA11yLabel( /Height\. Value is 100 Pixels \(px\)/ ),
+			screen.getByLabelText( /Height\. Value is 100 Pixels \(px\)/ ),
 			'accessibilityAction',
 			{
 				nativeEvent: { actionName: 'increment' },
@@ -141,23 +143,24 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select Spacer block
-		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
 		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
+			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
 		// Increment height
 		fireEvent(
-			getByA11yLabel( /Height\. Value is 100 Pixels \(px\)/ ),
+			screen.getByLabelText( /Height\. Value is 100 Pixels \(px\)/ ),
 			'accessibilityAction',
 			{
 				nativeEvent: { actionName: 'decrement' },

package/src/table/block.json

@@ -47,6 +47,11 @@
 							"type": "string",
 							"source": "attribute",
 							"attribute": "data-align"
+						},
+						"colspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "colspan"
 						}
 					}
 				}
@@ -82,6 +87,11 @@
 							"type": "string",
 							"source": "attribute",
 							"attribute": "data-align"
+						},
+						"colspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "colspan"
 						}
 					}
 				}
@@ -117,6 +127,11 @@
 							"type": "string",
 							"source": "attribute",
 							"attribute": "data-align"
+						},
+						"colspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "colspan"
 						}
 					}
 				}

package/src/table/edit.js

@@ -404,7 +404,7 @@ function TableEdit( {
 				<tr key={ rowIndex }>
 					{ cells.map(
 						(
-							{ content, tag: CellTag, scope, align },
+							{ content, tag: CellTag, scope, align, colspan },
 							columnIndex
 						) => (
 							<RichText
@@ -417,6 +417,7 @@ function TableEdit( {
 									'wp-block-table__cell-content'
 								) }
 								scope={ CellTag === 'th' ? scope : undefined }
+								colSpan={ colspan }
 								value={ content }
 								onChange={ onChange }
 								unstableOnFocus={ () => {

package/src/table/editor.scss

@@ -31,6 +31,7 @@
 	td,
 	th {
 		border: $border-width solid;
+		padding: 0.5em;
 	}
 
 	td.is-selected,
@@ -40,10 +41,6 @@
 		border-style: double;
 	}
 
-	figcaption {
-		@include caption-style-theme();
-	}
-
 	// This is only required in the editor to overcome the fact the editor
 	// rewrites border width styles into shorthand.
 	table.has-individual-borders {