@wordpress/block-library 7.7.0 → 7.10.0

package/src/embed/edit.native.js

@@ -72,57 +72,53 @@ const EmbedEdit = ( props ) => {
 	const [ isEditingURL, setIsEditingURL ] = useState(
 		isSelected && wasBlockJustInserted && ! url
 	);
-	const [ showEmbedBottomSheet, setShowEmbedBottomSheet ] = useState(
-		isEditingURL
-	);
+	const [ showEmbedBottomSheet, setShowEmbedBottomSheet ] =
+		useState( isEditingURL );
 	const { invalidateResolution } = useDispatch( coreStore );
 
-	const {
-		preview,
-		fetching,
-		themeSupportsResponsive,
-		cannotEmbed,
-	} = useSelect(
-		( select ) => {
-			const {
-				getEmbedPreview,
-				hasFinishedResolution,
-				isPreviewEmbedFallback,
-				getThemeSupports,
-			} = select( coreStore );
-			if ( ! url ) {
-				return { fetching: false, cannotEmbed: false };
-			}
+	const { preview, fetching, themeSupportsResponsive, cannotEmbed } =
+		useSelect(
+			( select ) => {
+				const {
+					getEmbedPreview,
+					hasFinishedResolution,
+					isPreviewEmbedFallback,
+					getThemeSupports,
+				} = select( coreStore );
+				if ( ! url ) {
+					return { fetching: false, cannotEmbed: false };
+				}
 
-			const embedPreview = getEmbedPreview( url );
-			const hasResolvedEmbedPreview = hasFinishedResolution(
-				'getEmbedPreview',
-				[ url ]
-			);
-			const previewIsFallback = isPreviewEmbedFallback( url );
+				const embedPreview = getEmbedPreview( url );
+				const hasResolvedEmbedPreview = hasFinishedResolution(
+					'getEmbedPreview',
+					[ url ]
+				);
+				const previewIsFallback = isPreviewEmbedFallback( url );
 
-			// The external oEmbed provider does not exist. We got no type info and no html.
-			const badEmbedProvider =
-				embedPreview?.html === false &&
-				embedPreview?.type === undefined;
-			// Some WordPress URLs that can't be embedded will cause the API to return
-			// a valid JSON response with no HTML and `code` set to 404, rather
-			// than generating a fallback response as other embeds do.
-			const wordpressCantEmbed = embedPreview?.code === '404';
-			const validPreview =
-				!! embedPreview && ! badEmbedProvider && ! wordpressCantEmbed;
+				// The external oEmbed provider does not exist. We got no type info and no html.
+				const badEmbedProvider =
+					embedPreview?.html === false &&
+					embedPreview?.type === undefined;
+				// Some WordPress URLs that can't be embedded will cause the API to return
+				// a valid JSON response with no HTML and `code` set to 404, rather
+				// than generating a fallback response as other embeds do.
+				const wordpressCantEmbed = embedPreview?.code === '404';
+				const validPreview =
+					!! embedPreview &&
+					! badEmbedProvider &&
+					! wordpressCantEmbed;
 
-			return {
-				preview: validPreview ? embedPreview : undefined,
-				fetching: ! hasResolvedEmbedPreview,
-				themeSupportsResponsive: getThemeSupports()[
-					'responsive-embeds'
-				],
-				cannotEmbed: ! validPreview || previewIsFallback,
-			};
-		},
-		[ url ]
-	);
+				return {
+					preview: validPreview ? embedPreview : undefined,
+					fetching: ! hasResolvedEmbedPreview,
+					themeSupportsResponsive:
+						getThemeSupports()[ 'responsive-embeds' ],
+					cannotEmbed: ! validPreview || previewIsFallback,
+				};
+			},
+			[ url ]
+		);
 
 	/**
 	 * Returns the attributes derived from the preview, merged with the current attributes.
@@ -187,9 +183,10 @@ const EmbedEdit = ( props ) => {
 		}
 	}, [ preview, isEditingURL ] );
 
-	useEffect( () => setShowEmbedBottomSheet( isEditingURL ), [
-		isEditingURL,
-	] );
+	useEffect(
+		() => setShowEmbedBottomSheet( isEditingURL ),
+		[ isEditingURL ]
+	);
 
 	const onEditURL = useCallback( ( value ) => {
 		// The order of the following calls is important, we need to update the URL attribute before changing `isEditingURL`,

package/src/embed/embed-controls.native.js

@@ -30,9 +30,8 @@ const EmbedControls = ( {
 	linkLabel,
 	onEditURL,
 } ) => {
-	const { closeGeneralSidebar: closeSettingsBottomSheet } = useDispatch(
-		editPostStore
-	);
+	const { closeGeneralSidebar: closeSettingsBottomSheet } =
+		useDispatch( editPostStore );
 
 	return (
 		<>

package/src/embed/embed-preview.js

@@ -13,7 +13,11 @@ import classnames from 'classnames/dedupe';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Placeholder, SandBox } from '@wordpress/components';
-import { RichText, BlockIcon } from '@wordpress/block-editor';
+import {
+	RichText,
+	BlockIcon,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
@@ -140,6 +144,9 @@ class EmbedPreview extends Component {
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
 						tagName="figcaption"
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
 						placeholder={ __( 'Add caption' ) }
 						value={ caption }
 						onChange={ onCaptionChange }

package/src/embed/icons.js

@@ -153,3 +153,28 @@ export const embedWolframIcon = (
 		<Path d="M32.59521,22.001l4.31885-4.84473-6.34131-1.38379.646-6.459-5.94336,2.61035L22,6.31934l-3.27344,5.60351L12.78418,9.3125l.645,6.458L7.08643,17.15234,11.40479,21.999,7.08594,26.84375l6.34131,1.38379-.64551,6.458,5.94287-2.60938L22,37.68066l3.27344-5.60351,5.94287,2.61035-.64551-6.458,6.34277-1.38183Zm.44385,2.75244L30.772,23.97827l-1.59558-2.07391,1.97888.735Zm-8.82147,6.1579L22.75,33.424V30.88977l1.52228-2.22168ZM18.56226,13.48816,19.819,15.09534l-2.49219-.88642L15.94037,12.337Zm6.87719.00116,2.62043-1.15027-1.38654,1.86981L24.183,15.0946Zm3.59357,2.6029-1.22546,1.7381.07525-2.73486,1.44507-1.94867ZM22,29.33008l-2.16406-3.15686L22,23.23688l2.16406,2.93634Zm-4.25458-9.582-.10528-3.836,3.60986,1.284v3.73242Zm5.00458-2.552,3.60986-1.284-.10528,3.836L22.75,20.92853Zm-7.78174-1.10559-.29352-2.94263,1.44245,1.94739.07519,2.73321Zm2.30982,5.08319,3.50817,1.18164-2.16247,2.9342-3.678-1.08447Zm2.4486,7.49285L21.25,30.88977v2.53485L19.78052,30.91Zm3.48707-6.31121,3.50817-1.18164,2.33228,3.03137-3.678,1.08447Zm10.87219-4.28113-2.714,3.04529L28.16418,19.928l1.92176-2.72565ZM24.06036,12.81769l-2.06012,2.6322-2.059-2.63318L22,9.292ZM9.91455,18.07227l4.00079-.87195,1.921,2.72735-3.20794,1.19019Zm2.93024,4.565,1.9801-.73462L13.228,23.97827l-2.26838.77429Zm-1.55591,3.58819L13.701,25.4021l2.64935.78058-2.14447.67853Zm3.64868,1.977L18.19,27.17334l.08313,3.46332L14.52979,32.2793Zm10.7876,2.43549.08447-3.464,3.25165,1.03052.407,4.07684Zm4.06824-3.77478-2.14545-.68,2.65063-.781,2.41266.825Z" />
 	</SVG>
 );
+
+export const embedPocketCastsIcon = {
+	foreground: '#f43e37',
+	src: (
+		<SVG
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<Path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M24,12A12,12,0,1,1,12,0,12,12,0,0,1,24,12Z"
+			/>
+			<Path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M2.67,12a9.33,9.33,0,0,1,18.66,0H19a7,7,0,1,0-7,7v2.33A9.33,9.33,0,0,1,2.67,12ZM12,17.6A5.6,5.6,0,1,1,17.6,12h-2A3.56,3.56,0,1,0,12,15.56Z"
+				fill="#fff"
+			/>
+		</SVG>
+	),
+};

package/src/embed/save.js

@@ -6,7 +6,11 @@ import classnames from 'classnames/dedupe';
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { url, caption, type, providerNameSlug } = attributes;
@@ -27,7 +31,11 @@ export default function save( { attributes } ) {
 				{ `\n${ url }\n` /* URL needs to be on its own line. */ }
 			</div>
 			{ ! RichText.isEmpty( caption ) && (
-				<RichText.Content tagName="figcaption" value={ caption } />
+				<RichText.Content
+					className={ __experimentalGetElementClassName( 'caption' ) }
+					tagName="figcaption"
+					value={ caption }
+				/>
 			) }
 		</figure>
 	);

package/src/embed/style.scss

@@ -20,7 +20,6 @@
 }
 
 .wp-block-embed {
-	margin: 0 0 1em 0;
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 
 	// Supply caption styles to embeds, even if the theme hasn't opted in.

package/src/embed/test/__snapshots__/index.native.js.snap

@@ -186,6 +186,6 @@ exports[`Embed block sets block caption 1`] = `
 "<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
 <figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
 https://twitter.com/notnownikki
-</div><figcaption>Caption</figcaption></figure>
+</div><figcaption class=\\"wp-element-caption\\">Caption</figcaption></figure>
 <!-- /wp:embed -->"
 `;

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

@@ -246,10 +246,8 @@ describe( 'Embed block', () => {
 		it( 'sets a valid URL when dismissing edit URL modal', async () => {
 			const expectedURL = 'https://twitter.com/notnownikki';
 
-			const {
-				getByPlaceholderText,
-				getByTestId,
-			} = await insertEmbedBlock();
+			const { getByPlaceholderText, getByTestId } =
+				await insertEmbedBlock();
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = getByTestId( 'embed-edit-url-modal' );
@@ -336,11 +334,8 @@ describe( 'Embed block', () => {
 		it( 'sets a valid URL when dismissing edit URL modal', async () => {
 			const expectedURL = 'https://twitter.com/notnownikki';
 
-			const {
-				getByPlaceholderText,
-				getByTestId,
-				getByText,
-			} = await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
+			const { getByPlaceholderText, getByTestId, getByText } =
+				await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
 
 			// Edit URL.
 			fireEvent.press( getByText( 'ADD LINK' ) );
@@ -412,10 +407,8 @@ describe( 'Embed block', () => {
 
 	describe( 'edit URL', () => {
 		it( 'keeps the previous URL if no URL is set', async () => {
-			const {
-				getByA11yLabel,
-				getByTestId,
-			} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+			const { getByA11yLabel, getByTestId } =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press(
@@ -437,11 +430,8 @@ describe( 'Embed block', () => {
 			const initialURL = 'https://twitter.com/notnownikki';
 			const expectedURL = 'https://www.youtube.com/watch?v=lXMskKTw3Bc';
 
-			const {
-				getByA11yLabel,
-				getByDisplayValue,
-				getByTestId,
-			} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+			const { getByA11yLabel, getByDisplayValue, getByTestId } =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press(
@@ -673,10 +663,8 @@ describe( 'Embed block', () => {
 			'Full width',
 		].forEach( ( alignmentOption ) =>
 			it( `sets ${ alignmentOption } option`, async () => {
-				const {
-					getByA11yLabel,
-					getByText,
-				} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+				const { getByA11yLabel, getByText } =
+					await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 				// Open alignment options.
 				fireEvent.press(
@@ -743,10 +731,8 @@ describe( 'Embed block', () => {
 				);
 			} );
 
-			const {
-				getByA11yLabel,
-				getByText,
-			} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+			const { getByA11yLabel, getByText } =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Convert embed to link.
 			fireEvent.press( getByText( 'More options' ) );
@@ -955,11 +941,8 @@ describe( 'Embed block', () => {
 	describe( 'insert via slash inserter', () => {
 		it( 'insert generic embed block', async () => {
 			const embedBlockSlashInserter = '/Embed';
-			const {
-				getByPlaceholderText,
-				getByA11yLabel,
-				getByText,
-			} = await initializeEditor( { initialHtml: EMPTY_PARAGRAPH_HTML } );
+			const { getByPlaceholderText, getByA11yLabel, getByText } =
+				await initializeEditor( { initialHtml: EMPTY_PARAGRAPH_HTML } );
 
 			const paragraphText = getByPlaceholderText( 'Start writing…' );
 			fireEvent( paragraphText, 'focus' );
@@ -997,13 +980,10 @@ describe( 'Embed block', () => {
 		MOST_USED_PROVIDERS.forEach( ( { title } ) =>
 			it( `inserts ${ title } embed block`, async () => {
 				const embedBlockSlashInserter = `/${ title }`;
-				const {
-					getByPlaceholderText,
-					getByA11yLabel,
-					getByText,
-				} = await initializeEditor( {
-					initialHtml: EMPTY_PARAGRAPH_HTML,
-				} );
+				const { getByPlaceholderText, getByA11yLabel, getByText } =
+					await initializeEditor( {
+						initialHtml: EMPTY_PARAGRAPH_HTML,
+					} );
 
 				const paragraphText = getByPlaceholderText( 'Start writing…' );
 				fireEvent( paragraphText, 'focus' );
@@ -1043,10 +1023,8 @@ describe( 'Embed block', () => {
 	it( 'sets block caption', async () => {
 		const expectedCaption = 'Caption';
 
-		const {
-			getByPlaceholderText,
-			getByDisplayValue,
-		} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+		const { getByPlaceholderText, getByDisplayValue } =
+			await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 		// Set a caption.
 		const captionField = getByPlaceholderText( 'Add caption' );
@@ -1087,10 +1065,8 @@ describe( 'Embed block', () => {
 
 	describe( 'block settings', () => {
 		it( 'toggles resize for smaller devices media settings', async () => {
-			const {
-				getByA11yLabel,
-				getByText,
-			} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+			const { getByA11yLabel, getByText } =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press(
@@ -1106,10 +1082,8 @@ describe( 'Embed block', () => {
 		} );
 
 		it( 'does not show media settings panel if responsive is not supported', async () => {
-			const {
-				getByA11yLabel,
-				getByText,
-			} = await initializeWithEmbedBlock( WP_EMBED_HTML );
+			const { getByA11yLabel, getByText } =
+				await initializeWithEmbedBlock( WP_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press(

package/src/embed/variations.js

@@ -26,6 +26,7 @@ import {
 	embedDailymotionIcon,
 	embedPinterestIcon,
 	embedWolframIcon,
+	embedPocketCastsIcon,
 } from './icons';
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
@@ -216,6 +217,15 @@ const variations = [
 		patterns: [ /^https?:\/\/(www\.)?mixcloud\.com\/.+/i ],
 		attributes: { providerNameSlug: 'mixcloud', responsive: true },
 	},
+	{
+		name: 'pocketcasts',
+		title: 'Pocket Casts',
+		icon: embedPocketCastsIcon,
+		keywords: [ __( 'podcast' ), __( 'audio' ) ],
+		description: __( 'Embed a podcast player from Pocket Casts.' ),
+		patterns: [ /^https:\/\/pca.st\/\w+/i ],
+		attributes: { providerNameSlug: 'pocketcasts', responsive: true },
+	},
 	{
 		name: 'reddit',
 		title: 'Reddit',

package/src/file/edit.js

@@ -22,7 +22,7 @@ import {
 	RichText,
 	useBlockProps,
 	store as blockEditorStore,
-	__experimentalElementButtonClassName,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
@@ -91,10 +91,8 @@ function FileEdit( {
 		[ id ]
 	);
 
-	const {
-		toggleSelection,
-		__unstableMarkNextChangeAsNotPersistent,
-	} = useDispatch( blockEditorStore );
+	const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	useEffect( () => {
 		// Upload a file drag-and-dropped into the editor.
@@ -304,7 +302,9 @@ function FileEdit( {
 								aria-label={ __( 'Download button text' ) }
 								className={ classnames(
 									'wp-block-file__button',
-									__experimentalElementButtonClassName
+									__experimentalGetElementClassName(
+										'button'
+									)
 								) }
 								value={ downloadButtonText }
 								withoutInteractiveFormatting

package/src/file/edit.native.js

@@ -72,28 +72,22 @@ export class FileEdit extends Component {
 		this.onLayout = this.onLayout.bind( this );
 		this.onSelectFile = this.onSelectFile.bind( this );
 		this.onChangeFileName = this.onChangeFileName.bind( this );
-		this.onChangeDownloadButtonText = this.onChangeDownloadButtonText.bind(
-			this
-		);
+		this.onChangeDownloadButtonText =
+			this.onChangeDownloadButtonText.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.getFileComponent = this.getFileComponent.bind( this );
-		this.onChangeDownloadButtonVisibility = this.onChangeDownloadButtonVisibility.bind(
-			this
-		);
+		this.onChangeDownloadButtonVisibility =
+			this.onChangeDownloadButtonVisibility.bind( this );
 		this.onCopyURL = this.onCopyURL.bind( this );
-		this.onChangeOpenInNewWindow = this.onChangeOpenInNewWindow.bind(
-			this
-		);
+		this.onChangeOpenInNewWindow =
+			this.onChangeOpenInNewWindow.bind( this );
 
-		this.onChangeLinkDestinationOption = this.onChangeLinkDestinationOption.bind(
-			this
-		);
+		this.onChangeLinkDestinationOption =
+			this.onChangeLinkDestinationOption.bind( this );
 		this.onShowLinkSettings = this.onShowLinkSettings.bind( this );
 		this.onFilePressed = this.onFilePressed.bind( this );
 		this.mediaUploadStateReset = this.mediaUploadStateReset.bind( this );
@@ -398,13 +392,8 @@ export class FileEdit extends Component {
 		const { attributes, media, isSelected } = this.props;
 		const { isButtonFocused, placeholderTextWidth } = this.state;
 
-		const {
-			fileName,
-			downloadButtonText,
-			id,
-			showDownloadButton,
-			align,
-		} = attributes;
+		const { fileName, downloadButtonText, id, showDownloadButton, align } =
+			attributes;
 
 		const minWidth =
 			isButtonFocused ||

package/src/file/index.js

@@ -21,8 +21,7 @@ export const settings = {
 	icon,
 	example: {
 		attributes: {
-			href:
-				'https://upload.wikimedia.org/wikipedia/commons/d/dd/Armstrong_Small_Step.ogg',
+			href: 'https://upload.wikimedia.org/wikipedia/commons/d/dd/Armstrong_Small_Step.ogg',
 			fileName: _x( 'Armstrong_Small_Step', 'Name of the file' ),
 		},
 	},

package/src/file/save.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import {
 	RichText,
 	useBlockProps,
-	__experimentalElementButtonClassName,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -74,7 +74,7 @@ export default function save( { attributes } ) {
 						href={ href }
 						className={ classnames(
 							'wp-block-file__button',
-							__experimentalElementButtonClassName
+							__experimentalGetElementClassName( 'button' )
 						) }
 						download={ true }
 						aria-describedby={ describedById }

package/src/file/style.scss

@@ -1,6 +1,10 @@
 .wp-block-file {
 	margin-bottom: 1.5em;
 
+	&:not(.wp-element-button) {
+		font-size: 0.8em;
+	}
+
 	&.aligncenter {
 		text-align: center;
 	}
@@ -10,20 +14,21 @@
 		text-align: right;
 	}
 
-	.wp-block-file__embed {
-		margin-bottom: 1em;
+	* + .wp-block-file__button {
+		margin-left: 0.75em;
 	}
+}
 
-	.wp-block-file__button {
-		background: #32373c;
-		border-radius: 2em;
-		color: $white;
-		font-size: 0.8em;
-		padding: 0.5em 1em;
-	}
+.wp-block-file__embed {
+	margin-bottom: 1em;
+}
 
-	a.wp-block-file__button {
-		text-decoration: none;
+//This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
+:where(.wp-block-file__button) {
+	border-radius: 2em;
+	padding: 0.5em 1em;
+
+	&:is(a) {
 
 		&:hover,
 		&:visited,
@@ -35,8 +40,4 @@
 			text-decoration: none;
 		}
 	}
-
-	* + .wp-block-file__button {
-		margin-left: 0.75em;
-	}
 }

package/src/freeform/editor.scss

@@ -211,8 +211,6 @@
 		margin: 0;
 		text-align: center;
 		padding: 6px;
-		-webkit-box-sizing: border-box;
-		-moz-box-sizing: border-box;
 		box-sizing: border-box;
 	}