@wordpress/block-library 7.7.0 → 7.10.0

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

@@ -3,17 +3,22 @@
  */
 import {
 	act,
+	changeTextOfRichText,
+	fireEvent,
+	getBlock,
 	getEditorHtml,
 	initializeEditor,
-	fireEvent,
+	openBlockSettings,
+	setupCoreBlocks,
+	setupMediaPicker,
+	setupMediaUpload,
+	triggerBlockListLayout,
 	within,
 } from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
-import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
-import { registerCoreBlocks } from '@wordpress/block-library';
 import { Platform } from '@wordpress/element';
 import {
 	getOtherMediaOptions,
@@ -28,12 +33,7 @@ import {
 	addGalleryBlock,
 	initializeWithGalleryBlock,
 	getGalleryItem,
-	setupMediaUpload,
 	generateGalleryBlock,
-	setCaption,
-	setupMediaPicker,
-	triggerGalleryLayout,
-	openBlockSettings,
 } from './helpers';
 
 const media = [
@@ -57,23 +57,13 @@ const media = [
 	},
 ];
 
-beforeAll( () => {
-	// Register all core blocks
-	registerCoreBlocks();
-} );
-
-afterAll( () => {
-	// Clean up registered blocks
-	getBlockTypes().forEach( ( block ) => {
-		unregisterBlockType( block.name );
-	} );
-} );
+setupCoreBlocks();
 
 describe( 'Gallery block', () => {
 	it( 'inserts block', async () => {
-		const { getByA11yLabel } = await addGalleryBlock();
+		const screen = await addGalleryBlock();
 
-		expect( getByA11yLabel( /Gallery Block\. Row 1/ ) ).toBeVisible();
+		expect( getBlock( screen, 'Gallery' ) ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
@@ -110,13 +100,10 @@ describe( 'Gallery block', () => {
 	// is addressed.
 	it.skip( 'displays media options picker when selecting the block', async () => {
 		// Initialize with an empty gallery
-		const {
-			getByA11yLabel,
-			getByText,
-			getByTestId,
-		} = await initializeEditor( {
-			initialHtml: generateGalleryBlock( 0 ),
-		} );
+		const { getByA11yLabel, getByText, getByTestId } =
+			await initializeEditor( {
+				initialHtml: generateGalleryBlock( 0 ),
+			} );
 
 		// Tap on Gallery block
 		fireEvent.press( getByText( 'ADD MEDIA' ) );
@@ -186,7 +173,7 @@ describe( 'Gallery block', () => {
 		const captionField = within(
 			getByA11yLabel( /Gallery caption. Empty/ )
 		).getByPlaceholderText( 'Add caption' );
-		setCaption(
+		changeTextOfRichText(
 			captionField,
 			'<strong>Bold</strong> <em>italic</em> <s>strikethrough</s> gallery caption'
 		);
@@ -208,10 +195,9 @@ describe( 'Gallery block', () => {
 		fireEvent.press( galleryItem );
 
 		// Set gallery item caption
-		const captionField = within( galleryItem ).getByPlaceholderText(
-			'Add caption'
-		);
-		setCaption(
+		const captionField =
+			within( galleryItem ).getByPlaceholderText( 'Add caption' );
+		changeTextOfRichText(
 			captionField,
 			'<strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption'
 		);
@@ -223,10 +209,8 @@ describe( 'Gallery block', () => {
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc005
 	it( 'successfully uploads items', async () => {
 		const { notifyUploadingState, notifySucceedState } = setupMediaUpload();
-		const {
-			expectMediaPickerCall,
-			mediaPickerCallback,
-		} = setupMediaPicker();
+		const { expectMediaPickerCall, mediaPickerCallback } =
+			setupMediaPicker();
 
 		// Initialize with an empty gallery
 		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
@@ -240,7 +224,7 @@ describe( 'Gallery block', () => {
 		await mediaPickerCallback( media[ 0 ], media[ 1 ] );
 
 		// Check that gallery items are visible
-		await triggerGalleryLayout( galleryBlock );
+		await triggerBlockListLayout( galleryBlock );
 		const galleryItem1 = getGalleryItem( galleryBlock, 1 );
 		const galleryItem2 = getGalleryItem( galleryBlock, 2 );
 		expect( galleryItem1 ).toBeVisible();
@@ -263,10 +247,8 @@ describe( 'Gallery block', () => {
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc006
 	it( 'handles failed uploads', async () => {
 		const { notifyUploadingState, notifyFailedState } = setupMediaUpload();
-		const {
-			expectMediaPickerCall,
-			mediaPickerCallback,
-		} = setupMediaPicker();
+		const { expectMediaPickerCall, mediaPickerCallback } =
+			setupMediaPicker();
 
 		// Initialize with an empty gallery
 		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
@@ -280,7 +262,7 @@ describe( 'Gallery block', () => {
 		await mediaPickerCallback( media[ 0 ], media[ 1 ] );
 
 		// Check that gallery items are visible
-		await triggerGalleryLayout( galleryBlock );
+		await triggerBlockListLayout( galleryBlock );
 		const galleryItem1 = getGalleryItem( galleryBlock, 1 );
 		const galleryItem2 = getGalleryItem( galleryBlock, 2 );
 		expect( galleryItem1 ).toBeVisible();
@@ -319,10 +301,8 @@ describe( 'Gallery block', () => {
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc007
 	it( 'takes a photo', async () => {
 		const { notifyUploadingState, notifySucceedState } = setupMediaUpload();
-		const {
-			expectMediaPickerCall,
-			mediaPickerCallback,
-		} = setupMediaPicker();
+		const { expectMediaPickerCall, mediaPickerCallback } =
+			setupMediaPicker();
 
 		// Initialize with an empty gallery
 		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
@@ -336,7 +316,7 @@ describe( 'Gallery block', () => {
 		await mediaPickerCallback( media[ 0 ] );
 
 		// Check gallery item is visible
-		await triggerGalleryLayout( galleryBlock );
+		await triggerBlockListLayout( galleryBlock );
 		const galleryItem = getGalleryItem( galleryBlock, 1 );
 		expect( galleryItem ).toBeVisible();
 
@@ -360,10 +340,8 @@ describe( 'Gallery block', () => {
 			}.jpeg`,
 		} ) );
 		const { notifyUploadingState, notifySucceedState } = setupMediaUpload();
-		const {
-			expectMediaPickerCall,
-			mediaPickerCallback,
-		} = setupMediaPicker();
+		const { expectMediaPickerCall, mediaPickerCallback } =
+			setupMediaPicker();
 
 		let otherMediaOptionsCallback;
 		getOtherMediaOptions.mockImplementation( ( filter, callback ) => {
@@ -394,7 +372,7 @@ describe( 'Gallery block', () => {
 		);
 
 		// Check that gallery items are visible
-		await triggerGalleryLayout( galleryBlock );
+		await triggerBlockListLayout( galleryBlock );
 		const galleryItem1 = getGalleryItem( galleryBlock, 1 );
 		const galleryItem2 = getGalleryItem( galleryBlock, 2 );
 		expect( galleryItem1 ).toBeVisible();
@@ -417,10 +395,8 @@ describe( 'Gallery block', () => {
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc009
 	it( 'cancels uploads', async () => {
 		const { notifyUploadingState, notifyResetState } = setupMediaUpload();
-		const {
-			expectMediaPickerCall,
-			mediaPickerCallback,
-		} = setupMediaPicker();
+		const { expectMediaPickerCall, mediaPickerCallback } =
+			setupMediaPicker();
 
 		// Initialize with an empty gallery
 		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
@@ -434,7 +410,7 @@ describe( 'Gallery block', () => {
 		await mediaPickerCallback( media[ 0 ], media[ 1 ] );
 
 		// Check that gallery items are visible
-		await triggerGalleryLayout( galleryBlock );
+		await triggerBlockListLayout( galleryBlock );
 		const galleryItem1 = getGalleryItem( galleryBlock, 1 );
 		const galleryItem2 = getGalleryItem( galleryBlock, 2 );
 		expect( galleryItem1 ).toBeVisible();
@@ -506,10 +482,8 @@ describe( 'Gallery block', () => {
 			localUrl: `file:///IMG_${ index + 1 }.JPG`,
 		} ) );
 		const { notifyUploadingState, notifySucceedState } = setupMediaUpload();
-		const {
-			expectMediaPickerCall,
-			mediaPickerCallback,
-		} = setupMediaPicker();
+		const { expectMediaPickerCall, mediaPickerCallback } =
+			setupMediaPicker();
 
 		let otherMediaOptionsCallback;
 		getOtherMediaOptions.mockImplementation( ( filter, callback ) => {
@@ -535,7 +509,7 @@ describe( 'Gallery block', () => {
 		await mediaPickerCallback( otherAppsMedia[ 0 ], otherAppsMedia[ 1 ] );
 
 		// Check that gallery items are visible
-		await triggerGalleryLayout( galleryBlock );
+		await triggerBlockListLayout( galleryBlock );
 		const galleryItem1 = getGalleryItem( galleryBlock, 1 );
 		const galleryItem2 = getGalleryItem( galleryBlock, 2 );
 		expect( galleryItem1 ).toBeVisible();

package/src/gallery/transforms.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, every, toString } from 'lodash';
+import { filter, every } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -160,7 +160,7 @@ const transforms = {
 				return createBlock( 'core/gallery', {
 					images: validImages.map(
 						( { id, url, alt, caption } ) => ( {
-							id: toString( id ),
+							id: id.toString(),
 							url,
 							alt,
 							caption,
@@ -182,7 +182,7 @@ const transforms = {
 					shortcode: ( { named: { ids } } ) => {
 						if ( ! isGalleryV2Enabled() ) {
 							return parseShortcodeIds( ids ).map( ( id ) => ( {
-								id: toString( id ),
+								id: id.toString(),
 							} ) );
 						}
 					},
@@ -195,16 +195,6 @@ const transforms = {
 						}
 					},
 				},
-				shortCodeTransforms: {
-					type: 'array',
-					shortcode: ( { named: { ids } } ) => {
-						if ( isGalleryV2Enabled() ) {
-							return parseShortcodeIds( ids ).map( ( id ) => ( {
-								id: parseInt( id ),
-							} ) );
-						}
-					},
-				},
 				columns: {
 					type: 'number',
 					shortcode: ( { named: { columns = '3' } } ) => {
@@ -235,6 +225,31 @@ const transforms = {
 					},
 				},
 			},
+			transform( { named: { ids, columns = 3, link } } ) {
+				const imageIds = parseShortcodeIds( ids ).map( ( id ) =>
+					parseInt( id, 10 )
+				);
+
+				let linkTo = LINK_DESTINATION_NONE;
+				if ( link === 'post' ) {
+					linkTo = LINK_DESTINATION_ATTACHMENT;
+				} else if ( link === 'file' ) {
+					linkTo = LINK_DESTINATION_MEDIA;
+				}
+
+				const galleryBlock = createBlock(
+					'core/gallery',
+					{
+						columns: parseInt( columns, 10 ),
+						linkTo,
+					},
+					imageIds.map( ( imageId ) =>
+						createBlock( 'core/image', { id: imageId } )
+					)
+				);
+
+				return galleryBlock;
+			},
 			isMatch( { named } ) {
 				return undefined !== named.ids;
 			},

package/src/gallery/use-get-media.js

@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
+const EMPTY_IMAGE_MEDIA = [];
+
 /**
  * Retrieves the extended media info for each gallery image from the store. This is used to
  * determine which image size options are available for the current gallery.
@@ -14,42 +15,24 @@ import { store as coreStore } from '@wordpress/core-data';
  * @return {Array} An array of media info options for each gallery image.
  */
 export default function useGetMedia( innerBlockImages ) {
-	const [ currentImageMedia, setCurrentImageMedia ] = useState( [] );
-
-	const imageMedia = useSelect(
+	return useSelect(
 		( select ) => {
-			if ( ! innerBlockImages?.length ) {
-				return currentImageMedia;
-			}
-
 			const imageIds = innerBlockImages
 				.map( ( imageBlock ) => imageBlock.attributes.id )
 				.filter( ( id ) => id !== undefined );
 
 			if ( imageIds.length === 0 ) {
-				return currentImageMedia;
+				return EMPTY_IMAGE_MEDIA;
 			}
 
-			return select( coreStore ).getMediaItems( {
-				include: imageIds.join( ',' ),
-				per_page: imageIds.length,
-				orderby: 'include',
-			} );
+			return (
+				select( coreStore ).getMediaItems( {
+					include: imageIds.join( ',' ),
+					per_page: imageIds.length,
+					orderby: 'include',
+				} ) ?? EMPTY_IMAGE_MEDIA
+			);
 		},
 		[ innerBlockImages ]
 	);
-
-	if (
-		imageMedia?.length !== currentImageMedia?.length ||
-		imageMedia?.some(
-			( newImage ) =>
-				! currentImageMedia.find(
-					( currentImage ) => currentImage.id === newImage.id
-				)
-		)
-	) {
-		setCurrentImageMedia( imageMedia );
-		return imageMedia;
-	}
-	return currentImageMedia;
 }

package/src/gallery/v1/edit.js

@@ -11,7 +11,6 @@ import {
 	map,
 	reduce,
 	some,
-	toString,
 } from 'lodash';
 
 /**
@@ -90,27 +89,22 @@ function GalleryEdit( props ) {
 	} = attributes;
 	const [ selectedImage, setSelectedImage ] = useState();
 	const [ attachmentCaptions, setAttachmentCaptions ] = useState();
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
-	const {
-		imageSizes,
-		mediaUpload,
-		getMedia,
-		wasBlockJustInserted,
-	} = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
-
-		return {
-			imageSizes: settings.imageSizes,
-			mediaUpload: settings.mediaUpload,
-			getMedia: select( coreStore ).getMedia,
-			wasBlockJustInserted: select(
-				blockEditorStore
-			).wasBlockJustInserted( clientId, 'inserter_menu' ),
-		};
-	} );
+	const { imageSizes, mediaUpload, getMedia, wasBlockJustInserted } =
+		useSelect( ( select ) => {
+			const settings = select( blockEditorStore ).getSettings();
+
+			return {
+				imageSizes: settings.imageSizes,
+				mediaUpload: settings.mediaUpload,
+				getMedia: select( coreStore ).getMedia,
+				wasBlockJustInserted: select(
+					blockEditorStore
+				).wasBlockJustInserted( clientId, 'inserter_menu' ),
+			};
+		} );
 
 	const resizedImages = useMemo( () => {
 		if ( isSelected ) {
@@ -231,7 +225,7 @@ function GalleryEdit( props ) {
 		// The image id in both the images and attachmentCaptions arrays is a
 		// string, so ensure comparison works correctly by converting the
 		// newImage.id to a string.
-		const newImageId = toString( newImage.id );
+		const newImageId = newImage.id.toString();
 		const currentImage = find( images, { id: newImageId } );
 		const currentImageCaption = currentImage
 			? currentImage.caption
@@ -258,7 +252,7 @@ function GalleryEdit( props ) {
 			newImages.map( ( newImage ) => ( {
 				// Store the attachmentCaption id as a string for consistency
 				// with the type of the id in the images attribute.
-				id: toString( newImage.id ),
+				id: newImage.id.toString(),
 				caption: newImage.caption,
 			} ) )
 		);
@@ -269,7 +263,7 @@ function GalleryEdit( props ) {
 				// The id value is stored in a data attribute, so when the
 				// block is parsed it's converted to a string. Converting
 				// to a string here ensures it's type is consistent.
-				id: toString( newImage.id ),
+				id: newImage.id.toString(),
 			} ) ),
 			columns: attributes.columns
 				? Math.min( newImages.length, attributes.columns )

package/src/gallery/v1/gallery-image.js

@@ -16,6 +16,7 @@ import {
 	RichText,
 	MediaPlaceholder,
 	store as blockEditorStore,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { isBlobURL } from '@wordpress/blob';
 import { compose } from '@wordpress/compose';
@@ -47,9 +48,8 @@ class GalleryImage extends Component {
 		this.onRemoveImage = this.onRemoveImage.bind( this );
 		this.bindContainer = this.bindContainer.bind( this );
 		this.onEdit = this.onEdit.bind( this );
-		this.onSelectImageFromLibrary = this.onSelectImageFromLibrary.bind(
-			this
-		);
+		this.onSelectImageFromLibrary =
+			this.onSelectImageFromLibrary.bind( this );
 		this.onSelectCustomURL = this.onSelectCustomURL.bind( this );
 		this.state = {
 			isEditing: false,
@@ -84,11 +84,8 @@ class GalleryImage extends Component {
 	}
 
 	componentDidUpdate() {
-		const {
-			image,
-			url,
-			__unstableMarkNextChangeAsNotPersistent,
-		} = this.props;
+		const { image, url, __unstableMarkNextChangeAsNotPersistent } =
+			this.props;
 		if ( image && ! url ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			this.props.setAttributes( {
@@ -249,6 +246,9 @@ class GalleryImage extends Component {
 				{ ! isEditing && ( isSelected || caption ) && (
 					<RichText
 						tagName="figcaption"
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
 						aria-label={ __( 'Image caption text' ) }
 						placeholder={ isSelected ? __( 'Add caption' ) : null }
 						value={ caption }
@@ -273,9 +273,8 @@ export default compose( [
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
-		const { __unstableMarkNextChangeAsNotPersistent } = dispatch(
-			blockEditorStore
-		);
+		const { __unstableMarkNextChangeAsNotPersistent } =
+			dispatch( blockEditorStore );
 		return {
 			__unstableMarkNextChangeAsNotPersistent,
 		};

package/src/gallery/v1/gallery-image.native.js

@@ -50,12 +50,10 @@ class GalleryImage extends Component {
 		this.onSelectMedia = this.onSelectMedia.bind( this );
 
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
-		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(
-			this
-		);
-		this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind(
-			this
-		);
+		this.finishMediaUploadWithSuccess =
+			this.finishMediaUploadWithSuccess.bind( this );
+		this.finishMediaUploadWithFailure =
+			this.finishMediaUploadWithFailure.bind( this );
 		this.renderContent = this.renderContent.bind( this );
 
 		this.state = {
@@ -79,11 +77,8 @@ class GalleryImage extends Component {
 
 	onMediaPressed() {
 		const { id, url, isSelected } = this.props;
-		const {
-			captionSelected,
-			isUploadInProgress,
-			didUploadFail,
-		} = this.state;
+		const { captionSelected, isUploadInProgress, didUploadFail } =
+			this.state;
 
 		this.onSelectImage();
 
@@ -303,12 +298,8 @@ class GalleryImage extends Component {
 	}
 
 	render() {
-		const {
-			id,
-			onRemove,
-			getStylesFromColorScheme,
-			isSelected,
-		} = this.props;
+		const { id, onRemove, getStylesFromColorScheme, isSelected } =
+			this.props;
 
 		const containerStyle = getStylesFromColorScheme(
 			style.galleryImageContainer,

package/src/gallery/v1/gallery.js

@@ -6,7 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import {
+	RichText,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
@@ -94,7 +97,10 @@ export const Gallery = ( props ) => {
 			<RichTextVisibilityHelper
 				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
 				tagName="figcaption"
-				className="blocks-gallery-caption"
+				className={ classnames(
+					'blocks-gallery-caption',
+					__experimentalGetElementClassName( 'caption' )
+				) }
 				aria-label={ __( 'Gallery caption text' ) }
 				placeholder={ __( 'Write gallery caption…' ) }
 				value={ caption }

package/src/gallery/v1/save.js

@@ -1,7 +1,16 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -60,7 +69,12 @@ export default function saveV1( { attributes } ) {
 								{ ! RichText.isEmpty( image.caption ) && (
 									<RichText.Content
 										tagName="figcaption"
-										className="blocks-gallery-item__caption"
+										className={ classnames(
+											'blocks-gallery-item',
+											__experimentalGetElementClassName(
+												'caption'
+											)
+										) }
 										value={ image.caption }
 									/>
 								) }
@@ -72,7 +86,10 @@ export default function saveV1( { attributes } ) {
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"
-					className="blocks-gallery-caption"
+					className={ classnames(
+						'blocks-gallery-caption',
+						__experimentalGetElementClassName( 'caption' )
+					) }
 					value={ caption }
 				/>
 			) }

package/src/group/block.json

@@ -21,6 +21,7 @@
 		"__experimentalSettings": true,
 		"align": [ "wide", "full" ],
 		"anchor": true,
+		"ariaLabel": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/group/edit.js

@@ -52,9 +52,7 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 	const { type = 'default' } = usedLayout;
 	const layoutSupportEnabled = themeSupportsLayout || type !== 'default';
 
-	const blockProps = useBlockProps( {
-		className: `is-layout-${ type }`,
-	} );
+	const blockProps = useBlockProps();
 
 	const innerBlocksProps = useInnerBlocksProps(
 		layoutSupportEnabled

package/src/heading/autogenerate-anchors.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { deburr, trim } from 'lodash';
+import removeAccents from 'remove-accents';
 
 /**
  * Object map tracking anchors.
@@ -32,11 +32,14 @@ const getTextWithoutMarkup = ( text ) => {
  */
 const getSlug = ( content ) => {
 	// Get the slug.
-	return trim(
-		deburr( getTextWithoutMarkup( content ) )
+	return (
+		removeAccents( getTextWithoutMarkup( content ) )
+			// Convert anything that's not a letter or number to a hyphen.
 			.replace( /[^\p{L}\p{N}]+/gu, '-' )
-			.toLowerCase(),
-		'-'
+			// Convert to lowercase
+			.toLowerCase()
+			// Remove any remaining leading or trailing hyphens.
+			.replace( /(^-+)|(-+$)/g, '' )
 	);
 };