@wordpress/block-library 9.23.0 → 9.25.0

package/src/social-link/variations.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -57,292 +62,292 @@ const variations = [
 		isDefault: true,
 		name: 'wordpress',
 		attributes: { service: 'wordpress' },
-		title: 'WordPress',
+		title: __( 'WordPress' ),
 		icon: WordPressIcon,
 	},
 
 	{
 		name: 'fivehundredpx',
 		attributes: { service: 'fivehundredpx' },
-		title: '500px',
+		title: __( '500px' ),
 		icon: FivehundredpxIcon,
 	},
 	{
 		name: 'amazon',
 		attributes: { service: 'amazon' },
-		title: 'Amazon',
+		title: __( 'Amazon' ),
 		icon: AmazonIcon,
 	},
 	{
 		name: 'bandcamp',
 		attributes: { service: 'bandcamp' },
-		title: 'Bandcamp',
+		title: __( 'Bandcamp' ),
 		icon: BandcampIcon,
 	},
 	{
 		name: 'behance',
 		attributes: { service: 'behance' },
-		title: 'Behance',
+		title: __( 'Behance' ),
 		icon: BehanceIcon,
 	},
 	{
 		name: 'bluesky',
 		attributes: { service: 'bluesky' },
-		title: 'Bluesky',
+		title: __( 'Bluesky' ),
 		icon: BlueskyIcon,
 	},
 	{
 		name: 'chain',
 		attributes: { service: 'chain' },
-		title: 'Link',
+		title: __( 'Link' ),
 		icon: ChainIcon,
 	},
 	{
 		name: 'codepen',
 		attributes: { service: 'codepen' },
-		title: 'CodePen',
+		title: __( 'CodePen' ),
 		icon: CodepenIcon,
 	},
 	{
 		name: 'deviantart',
 		attributes: { service: 'deviantart' },
-		title: 'DeviantArt',
+		title: __( 'DeviantArt' ),
 		icon: DeviantArtIcon,
 	},
 	{
 		name: 'discord',
 		attributes: { service: 'discord' },
-		title: 'Discord',
+		title: __( 'Discord' ),
 		icon: DiscordIcon,
 	},
 	{
 		name: 'dribbble',
 		attributes: { service: 'dribbble' },
-		title: 'Dribbble',
+		title: __( 'Dribbble' ),
 		icon: DribbbleIcon,
 	},
 	{
 		name: 'dropbox',
 		attributes: { service: 'dropbox' },
-		title: 'Dropbox',
+		title: __( 'Dropbox' ),
 		icon: DropboxIcon,
 	},
 	{
 		name: 'etsy',
 		attributes: { service: 'etsy' },
-		title: 'Etsy',
+		title: __( 'Etsy' ),
 		icon: EtsyIcon,
 	},
 	{
 		name: 'facebook',
 		attributes: { service: 'facebook' },
-		title: 'Facebook',
+		title: __( 'Facebook' ),
 		icon: FacebookIcon,
 	},
 	{
 		name: 'feed',
 		attributes: { service: 'feed' },
-		title: 'RSS Feed',
+		title: __( 'RSS Feed' ),
 		icon: FeedIcon,
 	},
 	{
 		name: 'flickr',
 		attributes: { service: 'flickr' },
-		title: 'Flickr',
+		title: __( 'Flickr' ),
 		icon: FlickrIcon,
 	},
 	{
 		name: 'foursquare',
 		attributes: { service: 'foursquare' },
-		title: 'Foursquare',
+		title: __( 'Foursquare' ),
 		icon: FoursquareIcon,
 	},
 	{
 		name: 'goodreads',
 		attributes: { service: 'goodreads' },
-		title: 'Goodreads',
+		title: __( 'Goodreads' ),
 		icon: GoodreadsIcon,
 	},
 	{
 		name: 'google',
 		attributes: { service: 'google' },
-		title: 'Google',
+		title: __( 'Google' ),
 		icon: GoogleIcon,
 	},
 	{
 		name: 'github',
 		attributes: { service: 'github' },
-		title: 'GitHub',
+		title: __( 'GitHub' ),
 		icon: GitHubIcon,
 	},
 	{
 		name: 'gravatar',
 		attributes: { service: 'gravatar' },
-		title: 'Gravatar',
+		title: __( 'Gravatar' ),
 		icon: GravatarIcon,
 	},
 	{
 		name: 'instagram',
 		attributes: { service: 'instagram' },
-		title: 'Instagram',
+		title: __( 'Instagram' ),
 		icon: InstagramIcon,
 	},
 	{
 		name: 'lastfm',
 		attributes: { service: 'lastfm' },
-		title: 'Last.fm',
+		title: __( 'Last.fm' ),
 		icon: LastfmIcon,
 	},
 	{
 		name: 'linkedin',
 		attributes: { service: 'linkedin' },
-		title: 'LinkedIn',
+		title: __( 'LinkedIn' ),
 		icon: LinkedInIcon,
 	},
 	{
 		name: 'mail',
 		attributes: { service: 'mail' },
-		title: 'Mail',
+		title: __( 'Mail' ),
 		keywords: [ 'email', 'e-mail' ],
 		icon: MailIcon,
 	},
 	{
 		name: 'mastodon',
 		attributes: { service: 'mastodon' },
-		title: 'Mastodon',
+		title: __( 'Mastodon' ),
 		icon: MastodonIcon,
 	},
 	{
 		name: 'meetup',
 		attributes: { service: 'meetup' },
-		title: 'Meetup',
+		title: __( 'Meetup' ),
 		icon: MeetupIcon,
 	},
 	{
 		name: 'medium',
 		attributes: { service: 'medium' },
-		title: 'Medium',
+		title: __( 'Medium' ),
 		icon: MediumIcon,
 	},
 	{
 		name: 'patreon',
 		attributes: { service: 'patreon' },
-		title: 'Patreon',
+		title: __( 'Patreon' ),
 		icon: PatreonIcon,
 	},
 	{
 		name: 'pinterest',
 		attributes: { service: 'pinterest' },
-		title: 'Pinterest',
+		title: __( 'Pinterest' ),
 		icon: PinterestIcon,
 	},
 	{
 		name: 'pocket',
 		attributes: { service: 'pocket' },
-		title: 'Pocket',
+		title: __( 'Pocket' ),
 		icon: PocketIcon,
 	},
 	{
 		name: 'reddit',
 		attributes: { service: 'reddit' },
-		title: 'Reddit',
+		title: __( 'Reddit' ),
 		icon: RedditIcon,
 	},
 	{
 		name: 'skype',
 		attributes: { service: 'skype' },
-		title: 'Skype',
+		title: __( 'Skype' ),
 		icon: SkypeIcon,
 	},
 	{
 		name: 'snapchat',
 		attributes: { service: 'snapchat' },
-		title: 'Snapchat',
+		title: __( 'Snapchat' ),
 		icon: SnapchatIcon,
 	},
 	{
 		name: 'soundcloud',
 		attributes: { service: 'soundcloud' },
-		title: 'SoundCloud',
+		title: __( 'SoundCloud' ),
 		icon: SoundCloudIcon,
 	},
 	{
 		name: 'spotify',
 		attributes: { service: 'spotify' },
-		title: 'Spotify',
+		title: __( 'Spotify' ),
 		icon: SpotifyIcon,
 	},
 	{
 		name: 'telegram',
 		attributes: { service: 'telegram' },
-		title: 'Telegram',
+		title: __( 'Telegram' ),
 		icon: TelegramIcon,
 	},
 	{
 		name: 'threads',
 		attributes: { service: 'threads' },
-		title: 'Threads',
+		title: __( 'Threads' ),
 		icon: ThreadsIcon,
 	},
 	{
 		name: 'tiktok',
 		attributes: { service: 'tiktok' },
-		title: 'TikTok',
+		title: __( 'TikTok' ),
 		icon: TiktokIcon,
 	},
 	{
 		name: 'tumblr',
 		attributes: { service: 'tumblr' },
-		title: 'Tumblr',
+		title: __( 'Tumblr' ),
 		icon: TumblrIcon,
 	},
 	{
 		name: 'twitch',
 		attributes: { service: 'twitch' },
-		title: 'Twitch',
+		title: __( 'Twitch' ),
 		icon: TwitchIcon,
 	},
 	{
 		name: 'twitter',
 		attributes: { service: 'twitter' },
-		title: 'Twitter',
+		title: __( 'Twitter' ),
 		icon: TwitterIcon,
 	},
 	{
 		name: 'vimeo',
 		attributes: { service: 'vimeo' },
-		title: 'Vimeo',
+		title: __( 'Vimeo' ),
 		icon: VimeoIcon,
 	},
 	{
 		name: 'vk',
 		attributes: { service: 'vk' },
-		title: 'VK',
+		title: __( 'VK' ),
 		icon: VkIcon,
 	},
 	{
 		name: 'whatsapp',
 		attributes: { service: 'whatsapp' },
-		title: 'WhatsApp',
+		title: __( 'WhatsApp' ),
 		icon: WhatsAppIcon,
 	},
 	{
 		name: 'x',
 		attributes: { service: 'x' },
 		keywords: [ 'twitter' ],
-		title: 'X',
+		title: __( 'X' ),
 		icon: XIcon,
 	},
 	{
 		name: 'yelp',
 		attributes: { service: 'yelp' },
-		title: 'Yelp',
+		title: __( 'Yelp' ),
 		icon: YelpIcon,
 	},
 	{
 		name: 'youtube',
 		attributes: { service: 'youtube' },
-		title: 'YouTube',
+		title: __( 'YouTube' ),
 		icon: YouTubeIcon,
 	},
 ];

package/src/social-links/edit.js

@@ -8,7 +8,6 @@ import clsx from 'clsx';
  */
 import { useEffect } from '@wordpress/element';
 import {
-	BlockControls,
 	useInnerBlocksProps,
 	useBlockProps,
 	InspectorControls,
@@ -20,15 +19,12 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
-	MenuGroup,
-	MenuItem,
 	ToggleControl,
-	ToolbarDropdownMenu,
+	SelectControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { check } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -37,10 +33,10 @@ import { useSelect } from '@wordpress/data';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const sizeOptions = [
-	{ name: __( 'Small' ), value: 'has-small-icon-size' },
-	{ name: __( 'Normal' ), value: 'has-normal-icon-size' },
-	{ name: __( 'Large' ), value: 'has-large-icon-size' },
-	{ name: __( 'Huge' ), value: 'has-huge-icon-size' },
+	{ label: __( 'Small' ), value: 'has-small-icon-size' },
+	{ label: __( 'Normal' ), value: 'has-normal-icon-size' },
+	{ label: __( 'Large' ), value: 'has-large-icon-size' },
+	{ label: __( 'Huge' ), value: 'has-huge-icon-size' },
 ];
 
 export function SocialLinksEdit( props ) {
@@ -123,10 +119,6 @@ export function SocialLinksEdit( props ) {
 				: undefined,
 	} );
 
-	const POPOVER_PROPS = {
-		position: 'bottom right',
-	};
-
 	const colorSettings = [
 		{
 			// Use custom attribute as fallback to prevent loss of named color selection when
@@ -167,43 +159,6 @@ export function SocialLinksEdit( props ) {
 
 	return (
 		<>
-			<BlockControls group="other">
-				<ToolbarDropdownMenu
-					label={ __( 'Size' ) }
-					text={ __( 'Size' ) }
-					icon={ null }
-					popoverProps={ POPOVER_PROPS }
-				>
-					{ ( { onClose } ) => (
-						<MenuGroup>
-							{ sizeOptions.map( ( entry ) => {
-								return (
-									<MenuItem
-										icon={
-											( size === entry.value ||
-												( ! size &&
-													entry.value ===
-														'has-normal-icon-size' ) ) &&
-											check
-										}
-										isSelected={ size === entry.value }
-										key={ entry.value }
-										onClick={ () => {
-											setAttributes( {
-												size: entry.value,
-											} );
-										} }
-										onClose={ onClose }
-										role="menuitemradio"
-									>
-										{ entry.name }
-									</MenuItem>
-								);
-							} ) }
-						</MenuGroup>
-					) }
-				</ToolbarDropdownMenu>
-			</BlockControls>
 			<InspectorControls>
 				<ToolsPanel
 					label={ __( 'Settings' ) }
@@ -211,27 +166,32 @@ export function SocialLinksEdit( props ) {
 						setAttributes( {
 							openInNewTab: false,
 							showLabels: false,
+							size: 'has-normal-icon-size',
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
 						isShownByDefault
-						label={ __( 'Open links in new tab' ) }
-						hasValue={ () => !! openInNewTab }
+						hasValue={ () =>
+							!! size && size !== 'has-normal-icon-size'
+						}
+						label={ __( 'Icon size' ) }
 						onDeselect={ () =>
-							setAttributes( { openInNewTab: false } )
+							setAttributes( { size: 'has-normal-icon-size' } )
 						}
 					>
-						<ToggleControl
+						<SelectControl
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
-							label={ __( 'Open links in new tab' ) }
-							checked={ openInNewTab }
-							onChange={ () =>
+							label={ __( 'Icon Size' ) }
+							onChange={ ( newSize ) => {
 								setAttributes( {
-									openInNewTab: ! openInNewTab,
-								} )
-							}
+									size: newSize,
+								} );
+							} }
+							value={ size ?? 'has-normal-icon-size' }
+							options={ sizeOptions }
 						/>
 					</ToolsPanelItem>
 					<ToolsPanelItem
@@ -251,6 +211,25 @@ export function SocialLinksEdit( props ) {
 							}
 						/>
 					</ToolsPanelItem>
+					<ToolsPanelItem
+						isShownByDefault
+						label={ __( 'Open links in new tab' ) }
+						hasValue={ () => !! openInNewTab }
+						onDeselect={ () =>
+							setAttributes( { openInNewTab: false } )
+						}
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open links in new tab' ) }
+							checked={ openInNewTab }
+							onChange={ () =>
+								setAttributes( {
+									openInNewTab: ! openInNewTab,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
 			{ colorGradientSettings.hasColorsOrGradients && (

package/src/table/block.json

@@ -14,7 +14,8 @@
 		"caption": {
 			"type": "rich-text",
 			"source": "rich-text",
-			"selector": "figcaption"
+			"selector": "figcaption",
+			"role": "content"
 		},
 		"head": {
 			"type": "array",
@@ -30,7 +31,8 @@
 					"query": {
 						"content": {
 							"type": "rich-text",
-							"source": "rich-text"
+							"source": "rich-text",
+							"role": "content"
 						},
 						"tag": {
 							"type": "string",
@@ -75,7 +77,8 @@
 					"query": {
 						"content": {
 							"type": "rich-text",
-							"source": "rich-text"
+							"source": "rich-text",
+							"role": "content"
 						},
 						"tag": {
 							"type": "string",
@@ -120,7 +123,8 @@
 					"query": {
 						"content": {
 							"type": "rich-text",
-							"source": "rich-text"
+							"source": "rich-text",
+							"role": "content"
 						},
 						"tag": {
 							"type": "string",

package/src/table/edit.js

@@ -16,6 +16,7 @@ import {
 	useBlockProps,
 	__experimentalUseColorProps as useColorProps,
 	__experimentalUseBorderProps as useBorderProps,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import {
@@ -106,6 +107,7 @@ function TableEdit( {
 
 	const colorProps = useColorProps( attributes );
 	const borderProps = useBorderProps( attributes );
+	const blockEditingMode = useBlockEditingMode();
 
 	const tableRef = useRef();
 	const [ hasTableCreated, setHasTableCreated ] = useState( false );
@@ -455,7 +457,7 @@ function TableEdit( {
 
 	return (
 		<figure { ...useBlockProps( { ref: tableRef } ) }>
-			{ ! isEmpty && (
+			{ ! isEmpty && blockEditingMode === 'default' && (
 				<>
 					<BlockControls group="block">
 						<AlignmentControl
@@ -605,7 +607,9 @@ function TableEdit( {
 					isSelected={ isSingleSelected }
 					insertBlocksAfter={ insertBlocksAfter }
 					label={ __( 'Table caption text' ) }
-					showToolbarButton={ isSingleSelected }
+					showToolbarButton={
+						isSingleSelected && blockEditingMode === 'default'
+					}
 				/>
 			) }
 		</figure>

package/src/verse/test/__snapshots__/transforms.native.js.snap

@@ -23,3 +23,9 @@ exports[`Verse block transforms to Paragraph block 1`] = `
 <p>Come<br />Home.</p>
 <!-- /wp:paragraph -->"
 `;
+
+exports[`Verse block transforms to Preformatted block 1`] = `
+"<!-- wp:preformatted -->
+<pre class="wp-block-preformatted">Come<br />Home.</pre>
+<!-- /wp:preformatted -->"
+`;

package/src/verse/test/transforms.native.js

@@ -16,7 +16,11 @@ const initialHtml = `
 <!-- /wp:verse -->`;
 
 const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ 'Paragraph', ...transformsWithInnerBlocks ];
+const blockTransforms = [
+	'Paragraph',
+	'Preformatted',
+	...transformsWithInnerBlocks,
+];
 
 setupCoreBlocks();