@wordpress/block-library 8.24.1 → 8.25.0

package/src/paragraph/edit.js

@@ -49,6 +49,48 @@ function hasDropCapDisabled( align ) {
 	return align === ( isRTL() ? 'left' : 'right' ) || align === 'center';
 }
 
+function DropCapControl( { clientId, attributes, setAttributes } ) {
+	// Please do no add a useSelect call to the paragraph block unconditionaly.
+	// Every useSelect added to a (frequestly used) block will degrade the load
+	// and type bit. By moving it within InspectorControls, the subscription is
+	// now only added for the selected block(s).
+	const [ isDropCapFeatureEnabled ] = useSettings( 'typography.dropCap' );
+
+	if ( ! isDropCapFeatureEnabled ) {
+		return null;
+	}
+
+	const { align, dropCap } = attributes;
+
+	let helpText;
+	if ( hasDropCapDisabled( align ) ) {
+		helpText = __( 'Not available for aligned text.' );
+	} else if ( dropCap ) {
+		helpText = __( 'Showing large initial letter.' );
+	} else {
+		helpText = __( 'Toggle to show a large initial letter.' );
+	}
+
+	return (
+		<ToolsPanelItem
+			hasValue={ () => !! dropCap }
+			label={ __( 'Drop cap' ) }
+			onDeselect={ () => setAttributes( { dropCap: undefined } ) }
+			resetAllFilter={ () => ( { dropCap: undefined } ) }
+			panelId={ clientId }
+		>
+			<ToggleControl
+				__nextHasNoMarginBottom
+				label={ __( 'Drop cap' ) }
+				checked={ !! dropCap }
+				onChange={ () => setAttributes( { dropCap: ! dropCap } ) }
+				help={ helpText }
+				disabled={ hasDropCapDisabled( align ) ? true : false }
+			/>
+		</ToolsPanelItem>
+	);
+}
+
 function ParagraphBlock( {
 	attributes,
 	mergeBlocks,
@@ -58,7 +100,6 @@ function ParagraphBlock( {
 	clientId,
 } ) {
 	const { align, content, direction, dropCap, placeholder } = attributes;
-	const [ isDropCapFeatureEnabled ] = useSettings( 'typography.dropCap' );
 	const blockProps = useBlockProps( {
 		ref: useOnEnter( { clientId, content } ),
 		className: classnames( {
@@ -68,15 +109,6 @@ function ParagraphBlock( {
 		style: { direction },
 	} );
 
-	let helpText;
-	if ( hasDropCapDisabled( align ) ) {
-		helpText = __( 'Not available for aligned text.' );
-	} else if ( dropCap ) {
-		helpText = __( 'Showing large initial letter.' );
-	} else {
-		helpText = __( 'Toggle to show a large initial letter.' );
-	}
-
 	return (
 		<>
 			<BlockControls group="block">
@@ -98,32 +130,13 @@ function ParagraphBlock( {
 					}
 				/>
 			</BlockControls>
-			{ isDropCapFeatureEnabled && (
-				<InspectorControls group="typography">
-					<ToolsPanelItem
-						hasValue={ () => !! dropCap }
-						label={ __( 'Drop cap' ) }
-						onDeselect={ () =>
-							setAttributes( { dropCap: undefined } )
-						}
-						resetAllFilter={ () => ( { dropCap: undefined } ) }
-						panelId={ clientId }
-					>
-						<ToggleControl
-							__nextHasNoMarginBottom
-							label={ __( 'Drop cap' ) }
-							checked={ !! dropCap }
-							onChange={ () =>
-								setAttributes( { dropCap: ! dropCap } )
-							}
-							help={ helpText }
-							disabled={
-								hasDropCapDisabled( align ) ? true : false
-							}
-						/>
-					</ToolsPanelItem>
-				</InspectorControls>
-			) }
+			<InspectorControls group="typography">
+				<DropCapControl
+					clientId={ clientId }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+				/>
+			</InspectorControls>
 			<RichText
 				identifier="content"
 				tagName="p"
@@ -154,13 +167,13 @@ function ParagraphBlock( {
 				onReplace={ onReplace }
 				onRemove={ onRemove }
 				aria-label={
-					content
-						? __( 'Block: Paragraph' )
-						: __(
+					RichText.isEmpty( content )
+						? __(
 								'Empty block; start writing or type forward slash to choose a block'
 						  )
+						: __( 'Block: Paragraph' )
 				}
-				data-empty={ content ? false : true }
+				data-empty={ RichText.isEmpty( content ) }
 				placeholder={ placeholder || __( 'Type / to choose a block' ) }
 				data-custom-placeholder={ placeholder ? true : undefined }
 				__unstableEmbedURLOnPaste

package/src/post-title/block.json

@@ -55,9 +55,7 @@
 			"__experimentalTextDecoration": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
-				"fontSize": true,
-				"fontAppearance": true,
-				"textTransform": true
+				"fontSize": true
 			}
 		}
 	},

package/src/preformatted/block.json

@@ -8,10 +8,9 @@
 	"textdomain": "default",
 	"attributes": {
 		"content": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "pre",
-			"default": "",
 			"__unstablePreserveWhiteSpace": true,
 			"__experimentalRole": "content"
 		}

package/src/pullquote/block.json

@@ -8,16 +8,15 @@
 	"textdomain": "default",
 	"attributes": {
 		"value": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "p",
 			"__experimentalRole": "content"
 		},
 		"citation": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "cite",
-			"default": "",
 			"__experimentalRole": "content"
 		},
 		"textAlign": {
@@ -46,8 +45,7 @@
 			"__experimentalTextDecoration": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
-				"fontSize": true,
-				"fontAppearance": true
+				"fontSize": true
 			}
 		},
 		"__experimentalBorder": {

package/src/query/edit/inspector-controls/taxonomy-controls.js

@@ -6,6 +6,7 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useState, useEffect } from '@wordpress/element';
 import { useDebounce } from '@wordpress/compose';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -177,6 +178,7 @@ function TaxonomyItem( { taxonomy, termIds, onChange } ) {
 				value={ value }
 				onInputChange={ debouncedSearch }
 				suggestions={ suggestions }
+				displayTransform={ decodeEntities }
 				onChange={ onTermsChange }
 				__experimentalShowHowTo={ false }
 			/>

package/src/query-title/block.json

@@ -50,9 +50,7 @@
 			"__experimentalTextTransform": true,
 			"__experimentalTextDecoration": true,
 			"__experimentalDefaultControls": {
-				"fontSize": true,
-				"fontAppearance": true,
-				"textTransform": true
+				"fontSize": true
 			}
 		}
 	},

package/src/quote/block.json

@@ -17,10 +17,9 @@
 			"__experimentalRole": "content"
 		},
 		"citation": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "cite",
-			"default": "",
 			"__experimentalRole": "content"
 		},
 		"align": {
@@ -42,8 +41,7 @@
 			"__experimentalTextDecoration": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
-				"fontSize": true,
-				"fontAppearance": true
+				"fontSize": true
 			}
 		},
 		"color": {

package/src/quote/transforms.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { RichText } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 
 const transforms = {
@@ -113,14 +114,14 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
 			transform: ( { citation }, innerBlocks ) =>
-				citation
-					? [
+				RichText.isEmpty( citation )
+					? innerBlocks
+					: [
 							...innerBlocks,
 							createBlock( 'core/paragraph', {
 								content: citation,
 							} ),
-					  ]
-					: innerBlocks,
+					  ],
 		},
 		{
 			type: 'block',
@@ -129,26 +130,26 @@ const transforms = {
 				createBlock(
 					'core/group',
 					{ anchor },
-					citation
-						? [
+					RichText.isEmpty( citation )
+						? innerBlocks
+						: [
 								...innerBlocks,
 								createBlock( 'core/paragraph', {
 									content: citation,
 								} ),
 						  ]
-						: innerBlocks
 				),
 		},
 	],
 	ungroup: ( { citation }, innerBlocks ) =>
-		citation
-			? [
+		RichText.isEmpty( citation )
+			? innerBlocks
+			: [
 					...innerBlocks,
 					createBlock( 'core/paragraph', {
 						content: citation,
 					} ),
-			  ]
-			: innerBlocks,
+			  ],
 };
 
 export default transforms;

package/src/site-title/block.json

@@ -56,11 +56,7 @@
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
-				"fontSize": true,
-				"lineHeight": true,
-				"fontAppearance": true,
-				"letterSpacing": true,
-				"textTransform": true
+				"fontSize": true
 			}
 		}
 	},

package/src/social-link/icons/gravatar.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export const GravatarIcon = () => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M10.8001 4.69937V10.6494C10.8001 11.1001 10.9791 11.5323 11.2978 11.851C11.6165 12.1697 12.0487 12.3487 12.4994 12.3487C12.9501 12.3487 13.3824 12.1697 13.7011 11.851C14.0198 11.5323 14.1988 11.1001 14.1988 10.6494V6.69089C15.2418 7.05861 16.1371 7.75537 16.7496 8.67617C17.3622 9.59698 17.6589 10.6919 17.595 11.796C17.5311 12.9001 17.1101 13.9535 16.3954 14.7975C15.6807 15.6415 14.711 16.2303 13.6325 16.4753C12.5541 16.7202 11.4252 16.608 10.4161 16.1555C9.40691 15.703 8.57217 14.9348 8.03763 13.9667C7.50308 12.9985 7.29769 11.8828 7.45242 10.7877C7.60714 9.69266 8.11359 8.67755 8.89545 7.89537C9.20904 7.57521 9.38364 7.14426 9.38132 6.69611C9.37899 6.24797 9.19994 5.81884 8.88305 5.50195C8.56616 5.18506 8.13704 5.00601 7.68889 5.00369C7.24075 5.00137 6.80979 5.17597 6.48964 5.48956C5.09907 6.8801 4.23369 8.7098 4.04094 10.6669C3.84819 12.624 4.34 14.5873 5.43257 16.2224C6.52515 17.8575 8.15088 19.0632 10.0328 19.634C11.9146 20.2049 13.9362 20.1055 15.753 19.3529C17.5699 18.6003 19.0695 17.241 19.9965 15.5066C20.9234 13.7722 21.2203 11.7701 20.8366 9.84133C20.4528 7.91259 19.4122 6.17658 17.892 4.92911C16.3717 3.68163 14.466 2.99987 12.4994 3C12.0487 3 11.6165 3.17904 11.2978 3.49773C10.9791 3.81643 10.8001 4.24867 10.8001 4.69937Z" />
+	</SVG>
+);

package/src/social-link/icons/index.js

@@ -15,6 +15,7 @@ export * from './foursquare';
 export * from './goodreads';
 export * from './google';
 export * from './github';
+export * from './gravatar';
 export * from './instagram';
 export * from './lastfm';
 export * from './linkedin';

package/src/social-link/index.php

@@ -194,6 +194,10 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 			'name' => 'GitHub',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,2C6.477,2,2,6.477,2,12c0,4.419,2.865,8.166,6.839,9.489c0.5,0.09,0.682-0.218,0.682-0.484 c0-0.236-0.009-0.866-0.014-1.699c-2.782,0.602-3.369-1.34-3.369-1.34c-0.455-1.157-1.11-1.465-1.11-1.465 c-0.909-0.62,0.069-0.608,0.069-0.608c1.004,0.071,1.532,1.03,1.532,1.03c0.891,1.529,2.341,1.089,2.91,0.833 c0.091-0.647,0.349-1.086,0.635-1.337c-2.22-0.251-4.555-1.111-4.555-4.943c0-1.091,0.39-1.984,1.03-2.682 C6.546,8.54,6.202,7.524,6.746,6.148c0,0,0.84-0.269,2.75,1.025C10.295,6.95,11.15,6.84,12,6.836 c0.85,0.004,1.705,0.114,2.504,0.336c1.909-1.294,2.748-1.025,2.748-1.025c0.546,1.376,0.202,2.394,0.1,2.646 c0.64,0.699,1.026,1.591,1.026,2.682c0,3.841-2.337,4.687-4.565,4.935c0.359,0.307,0.679,0.917,0.679,1.852 c0,1.335-0.012,2.415-0.012,2.741c0,0.269,0.18,0.579,0.688,0.481C19.138,20.161,22,16.416,22,12C22,6.477,17.523,2,12,2z"></path></svg>',
 		),
+		'gravatar'      => array(
+			'name' => 'Gravatar',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M10.8001 4.69937V10.6494C10.8001 11.1001 10.9791 11.5323 11.2978 11.851C11.6165 12.1697 12.0487 12.3487 12.4994 12.3487C12.9501 12.3487 13.3824 12.1697 13.7011 11.851C14.0198 11.5323 14.1988 11.1001 14.1988 10.6494V6.69089C15.2418 7.05861 16.1371 7.75537 16.7496 8.67617C17.3622 9.59698 17.6589 10.6919 17.595 11.796C17.5311 12.9001 17.1101 13.9535 16.3954 14.7975C15.6807 15.6415 14.711 16.2303 13.6325 16.4753C12.5541 16.7202 11.4252 16.608 10.4161 16.1555C9.40691 15.703 8.57217 14.9348 8.03763 13.9667C7.50308 12.9985 7.29769 11.8828 7.45242 10.7877C7.60714 9.69266 8.11359 8.67755 8.89545 7.89537C9.20904 7.57521 9.38364 7.14426 9.38132 6.69611C9.37899 6.24797 9.19994 5.81884 8.88305 5.50195C8.56616 5.18506 8.13704 5.00601 7.68889 5.00369C7.24075 5.00137 6.80979 5.17597 6.48964 5.48956C5.09907 6.8801 4.23369 8.7098 4.04094 10.6669C3.84819 12.624 4.34 14.5873 5.43257 16.2224C6.52515 17.8575 8.15088 19.0632 10.0328 19.634C11.9146 20.2049 13.9362 20.1055 15.753 19.3529C17.5699 18.6003 19.0695 17.241 19.9965 15.5066C20.9234 13.7722 21.2203 11.7701 20.8366 9.84133C20.4528 7.91259 19.4122 6.17658 17.892 4.92911C16.3717 3.68163 14.466 2.99987 12.4994 3C12.0487 3 11.6165 3.17904 11.2978 3.49773C10.9791 3.81643 10.8001 4.24867 10.8001 4.69937Z" /></svg>',
+		),
 		'instagram'     => array(
 			'name' => 'Instagram',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673 c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637 s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035 c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052 s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673 c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12 s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035 c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622 M12,3 C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511 c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711 c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038 c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418 c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185 C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594 c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z M12,7.378 c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z M12,15 c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08 s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z"></path></svg>',

package/src/social-link/socials-with-bg.scss

@@ -78,6 +78,11 @@
 	color: #fff;
 }
 
+.wp-social-link-gravatar {
+	background-color: #1d4fc4;
+	color: #fff;
+}
+
 .wp-social-link-instagram {
 	background-color: #f00075;
 	color: #fff;

package/src/social-link/socials-without-bg.scss

@@ -58,6 +58,10 @@
 	color: #ea4434;
 }
 
+.wp-social-link-gravatar {
+	color: #1d4fc4;
+}
+
 .wp-social-link-instagram {
 	color: #f00075;
 }

package/src/social-link/variations.js

@@ -19,6 +19,7 @@ import {
 	GoodreadsIcon,
 	GoogleIcon,
 	GitHubIcon,
+	GravatarIcon,
 	InstagramIcon,
 	LastfmIcon,
 	LinkedInIcon,
@@ -160,6 +161,12 @@ const variations = [
 		title: 'GitHub',
 		icon: GitHubIcon,
 	},
+	{
+		name: 'gravatar',
+		attributes: { service: 'gravatar' },
+		title: 'Gravatar',
+		icon: GravatarIcon,
+	},
 	{
 		name: 'instagram',
 		attributes: { service: 'instagram' },

package/src/social-links/style.scss

@@ -95,14 +95,20 @@
 }
 
 // This needs specificity because themes usually override it with things like .widget-area a.
-.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor {
-	&,
-	&:hover,
-	&:active,
-	&:visited,
-	svg {
-		color: currentColor;
-		fill: currentColor;
+.wp-block-social-links .wp-block-social-link.wp-social-link {
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+
+	.wp-block-social-link-anchor {
+		&,
+		&:hover,
+		&:active,
+		&:visited,
+		svg {
+			color: currentColor;
+			fill: currentColor;
+		}
 	}
 }
 

package/src/table/block.json

@@ -12,10 +12,9 @@
 			"default": false
 		},
 		"caption": {
-			"type": "string",
-			"source": "html",
-			"selector": "figcaption",
-			"default": ""
+			"type": "rich-text",
+			"source": "rich-text",
+			"selector": "figcaption"
 		},
 		"head": {
 			"type": "array",
@@ -30,8 +29,8 @@
 					"selector": "td,th",
 					"query": {
 						"content": {
-							"type": "string",
-							"source": "html"
+							"type": "rich-text",
+							"source": "rich-text"
 						},
 						"tag": {
 							"type": "string",
@@ -75,8 +74,8 @@
 					"selector": "td,th",
 					"query": {
 						"content": {
-							"type": "string",
-							"source": "html"
+							"type": "rich-text",
+							"source": "rich-text"
 						},
 						"tag": {
 							"type": "string",
@@ -120,8 +119,8 @@
 					"selector": "td,th",
 					"query": {
 						"content": {
-							"type": "string",
-							"source": "html"
+							"type": "rich-text",
+							"source": "rich-text"
 						},
 						"tag": {
 							"type": "string",

package/src/table/edit.js

@@ -555,6 +555,7 @@ function TableEdit( {
 					>
 						<TextControl
 							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							type="number"
 							label={ __( 'Column count' ) }
 							value={ initialColumnCount }
@@ -564,6 +565,7 @@ function TableEdit( {
 						/>
 						<TextControl
 							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							type="number"
 							label={ __( 'Row count' ) }
 							value={ initialRowCount }
@@ -572,7 +574,7 @@ function TableEdit( {
 							className="blocks-table__placeholder-input"
 						/>
 						<Button
-							className="blocks-table__placeholder-button"
+							__next40pxDefaultSize
 							variant="primary"
 							type="submit"
 						>

package/src/table/editor.scss

@@ -58,27 +58,14 @@
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-
-	> * {
-		margin-bottom: $grid-unit-10;
-	}
+	gap: $grid-unit-10;
 
 	@include break-medium() {
 		flex-direction: row;
 		align-items: flex-end;
-
-		> * {
-			margin-bottom: 0;
-		}
 	}
 }
 
 .blocks-table__placeholder-input {
 	width: $grid-unit-10 * 14;
-	margin-right: $grid-unit-10;
-	margin-bottom: 0;
-
-	input {
-		height: $button-size;
-	}
 }

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

@@ -21,11 +21,11 @@ import { renderToString } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 import { store as noticeStore } from '@wordpress/notices';
+import { tableOfContents as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import icon from './icon';
 import TableOfContentsList from './list';
 import { linearToNestedHeadingList } from './utils';
 import { useObserveHeadings } from './hooks';

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

@@ -1,10 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { tableOfContents as icon } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
-import icon from './icon';
 import save from './save';
 
 const { name } = metadata;

package/src/utils/caption.js

@@ -0,0 +1,108 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, useCallback } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import {
+	RichText,
+	BlockControls,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
+import { ToolbarButton } from '@wordpress/components';
+import { caption as captionIcon } from '@wordpress/icons';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+
+export function Caption( {
+	key = 'caption',
+	attributes,
+	setAttributes,
+	isSelected,
+	insertBlocksAfter,
+	placeholder = __( 'Add caption' ),
+	label = __( 'Caption text' ),
+	showToolbarButton = true,
+	className,
+} ) {
+	const caption = attributes[ key ];
+	const prevCaption = usePrevious( caption );
+	const isCaptionEmpty = RichText.isEmpty( caption );
+	const isPrevCaptionEmpty = RichText.isEmpty( prevCaption );
+	const [ showCaption, setShowCaption ] = useState( ! isCaptionEmpty );
+
+	// We need to show the caption when changes come from
+	// history navigation(undo/redo).
+	useEffect( () => {
+		if ( ! isCaptionEmpty && isPrevCaptionEmpty ) {
+			setShowCaption( true );
+		}
+	}, [ isCaptionEmpty, isPrevCaptionEmpty ] );
+
+	useEffect( () => {
+		if ( ! isSelected && isCaptionEmpty ) {
+			setShowCaption( false );
+		}
+	}, [ isSelected, isCaptionEmpty ] );
+
+	// Focus the caption when we click to add one.
+	const ref = useCallback(
+		( node ) => {
+			if ( node && isCaptionEmpty ) {
+				node.focus();
+			}
+		},
+		[ isCaptionEmpty ]
+	);
+	return (
+		<>
+			{ showToolbarButton && (
+				<BlockControls group="block">
+					<ToolbarButton
+						onClick={ () => {
+							setShowCaption( ! showCaption );
+							if ( showCaption && caption ) {
+								setAttributes( { caption: undefined } );
+							}
+						} }
+						icon={ captionIcon }
+						isPressed={ showCaption }
+						label={
+							showCaption
+								? __( 'Remove caption' )
+								: __( 'Add caption' )
+						}
+					/>
+				</BlockControls>
+			) }
+			{ showCaption &&
+				( ! RichText.isEmpty( caption ) || isSelected ) && (
+					<RichText
+						identifier={ key }
+						tagName="figcaption"
+						className={ classnames(
+							className,
+							__experimentalGetElementClassName( 'caption' )
+						) }
+						ref={ ref }
+						aria-label={ label }
+						placeholder={ placeholder }
+						value={ caption }
+						onChange={ ( value ) =>
+							setAttributes( { caption: value } )
+						}
+						inlineToolbar
+						__unstableOnSplitAtEnd={ () =>
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
+						}
+					/>
+				) }
+		</>
+	);
+}