@wordpress/block-library 7.12.0 → 7.13.1-next.957ca95e4c.0

package/src/separator/deprecated.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -42,9 +41,9 @@ const v1 = {
 		return <hr { ...useBlockProps.save( { className, style } ) } />;
 	},
 	migrate( attributes ) {
-		const { color, customColor } = attributes;
+		const { color, customColor, ...restAttributes } = attributes;
 		return {
-			...omit( attributes, [ 'color', 'customColor' ] ),
+			...restAttributes,
 			backgroundColor: color ? color : undefined,
 			opacity: 'css',
 			style: customColor

package/src/site-logo/editor.scss

@@ -31,13 +31,8 @@
 }
 
 // Provide special styling for the placeholder.
+// @todo: this particular minimal style of placeholder could be componentized further.
 .wp-block-site-logo.wp-block-site-logo {
-	// Inherit border radius from style variations.
-	.components-placeholder,
-	.components-resizable-box__container {
-		border-radius: inherit;
-	}
-
 	// Match the default logo size.
 	&.is-default-size .components-placeholder {
 		height: 120px;
@@ -46,10 +41,8 @@
 
 	// Style the placeholder.
 	.components-placeholder {
-		display: flex;
 		justify-content: center;
 		align-items: center;
-		box-shadow: none;
 		padding: 0;
 
 		// Provide a minimum size for the placeholder, for when the logo is resized.
@@ -66,52 +59,13 @@
 			display: none;
 		}
 
-		// Position the spinner.
-		.components-placeholder__preview {
-			position: absolute;
-			top: $grid-unit-05;
-			right: $grid-unit-05;
-			bottom: $grid-unit-05;
-			left: $grid-unit-05;
-			background: rgba($white, 0.8);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-
 		// Hide items.
 		.components-drop-zone__content-text {
 			display: none;
 		}
 
-		// Draw the dashed outline.
-		// By setting the dashed border to currentColor, we ensure it's visible
-		// against any background color.
-		color: currentColor;
-		background: transparent;
-		&::before {
-			content: "";
-			display: block;
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			border: $border-width dashed currentColor;
-			opacity: 0.4;
-			pointer-events: none;
-
-			// Inherit border radius from style variations.
-			border-radius: inherit;
-		}
-
 		// Style the upload button.
-		.components-placeholder__fieldset {
-			width: auto;
-		}
-
 		.components-button.components-button {
-			color: inherit;
 			padding: 0;
 			display: flex;
 			justify-content: center;
@@ -120,26 +74,14 @@
 			height: $grid-unit-60;
 			border-radius: 50%;
 			position: relative;
-			visibility: hidden;
-
-			// Animation.
-			background: transparent;
-			transition: all 0.1s linear;
-			@include reduce-motion("transition");
-		}
-
-		.components-button.components-button > svg {
+			background: var(--wp-admin-theme-color);
+			border-color: var(--wp-admin-theme-color);
+			border-style: solid;
 			color: $white;
-		}
-	}
 
-	// Show upload button on block selection.
-	&.is-selected .components-button.components-button {
-		background: var(--wp-admin-theme-color);
-		border-color: var(--wp-admin-theme-color);
-		border-style: solid;
-		color: $white;
-		opacity: 1;
-		visibility: visible;
+			> svg {
+				color: inherit;
+			}
+		}
 	}
 }

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

@@ -5,6 +5,6 @@ import { Path, SVG } from '@wordpress/primitives';
 
 export const RedditIcon = () => (
 	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
-		<Path d="M22,11.816c0-1.256-1.021-2.277-2.277-2.277c-0.593,0-1.122,0.24-1.526,0.614c-1.481-0.965-3.455-1.594-5.647-1.69 l1.171-3.702l3.18,0.748c0.008,1.028,0.846,1.862,1.876,1.862c1.035,0,1.877-0.842,1.877-1.878c0-1.035-0.842-1.877-1.877-1.877 c-0.769,0-1.431,0.466-1.72,1.13l-3.508-0.826c-0.203-0.047-0.399,0.067-0.46,0.261l-1.35,4.268 c-2.316,0.038-4.411,0.67-5.97,1.671C5.368,9.765,4.853,9.539,4.277,9.539C3.021,9.539,2,10.56,2,11.816 c0,0.814,0.433,1.523,1.078,1.925c-0.037,0.221-0.061,0.444-0.061,0.672c0,3.292,4.011,5.97,8.941,5.97s8.941-2.678,8.941-5.97 c0-0.214-0.02-0.424-0.053-0.632C21.533,13.39,22,12.661,22,11.816z M18.776,4.394c0.606,0,1.1,0.493,1.1,1.1s-0.493,1.1-1.1,1.1 s-1.1-0.494-1.1-1.1S18.169,4.394,18.776,4.394z M2.777,11.816c0-0.827,0.672-1.5,1.499-1.5c0.313,0,0.598,0.103,0.838,0.269 c-0.851,0.676-1.477,1.479-1.812,2.36C2.983,12.672,2.777,12.27,2.777,11.816z M11.959,19.606c-4.501,0-8.164-2.329-8.164-5.193 S7.457,9.22,11.959,9.22s8.164,2.329,8.164,5.193S16.46,19.606,11.959,19.606z M20.636,13.001c-0.326-0.89-0.948-1.701-1.797-2.384 c0.248-0.186,0.55-0.301,0.883-0.301c0.827,0,1.5,0.673,1.5,1.5C21.223,12.299,20.992,12.727,20.636,13.001z M8.996,14.704 c-0.76,0-1.397-0.616-1.397-1.376c0-0.76,0.637-1.397,1.397-1.397c0.76,0,1.376,0.637,1.376,1.397 C10.372,14.088,9.756,14.704,8.996,14.704z M16.401,13.328c0,0.76-0.616,1.376-1.376,1.376c-0.76,0-1.399-0.616-1.399-1.376 c0-0.76,0.639-1.397,1.399-1.397C15.785,11.931,16.401,12.568,16.401,13.328z M15.229,16.708c0.152,0.152,0.152,0.398,0,0.55 c-0.674,0.674-1.727,1.002-3.219,1.002c-0.004,0-0.007-0.002-0.011-0.002c-0.004,0-0.007,0.002-0.011,0.002 c-1.492,0-2.544-0.328-3.218-1.002c-0.152-0.152-0.152-0.398,0-0.55c0.152-0.152,0.399-0.151,0.55,0 c0.521,0.521,1.394,0.775,2.669,0.775c0.004,0,0.007,0.002,0.011,0.002c0.004,0,0.007-0.002,0.011-0.002 c1.275,0,2.148-0.253,2.669-0.775C14.831,16.556,15.078,16.556,15.229,16.708z" />
+		<Path d="M22 12.068a2.184 2.184 0 0 0-2.186-2.186c-.592 0-1.13.233-1.524.609-1.505-1.075-3.566-1.774-5.86-1.864l1.004-4.695 3.261.699A1.56 1.56 0 1 0 18.255 3c-.61-.001-1.147.357-1.398.877l-3.638-.77a.382.382 0 0 0-.287.053.348.348 0 0 0-.161.251l-1.112 5.233c-2.33.072-4.426.77-5.95 1.864a2.201 2.201 0 0 0-1.523-.61 2.184 2.184 0 0 0-.896 4.176c-.036.215-.053.43-.053.663 0 3.37 3.924 6.111 8.763 6.111s8.763-2.724 8.763-6.11c0-.216-.017-.449-.053-.664A2.207 2.207 0 0 0 22 12.068Zm-15.018 1.56a1.56 1.56 0 0 1 3.118 0c0 .86-.699 1.558-1.559 1.558-.86.018-1.559-.699-1.559-1.559Zm8.728 4.139c-1.076 1.075-3.119 1.147-3.71 1.147-.61 0-2.652-.09-3.71-1.147a.4.4 0 0 1 0-.573.4.4 0 0 1 .574 0c.68.68 2.114.914 3.136.914 1.022 0 2.473-.233 3.136-.914a.4.4 0 0 1 .574 0 .436.436 0 0 1 0 .573Zm-.287-2.563a1.56 1.56 0 0 1 0-3.118c.86 0 1.56.699 1.56 1.56 0 .841-.7 1.558-1.56 1.558Z" />
 	</SVG>
 );

package/src/social-link/index.php

@@ -232,7 +232,7 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 		),
 		'reddit'        => array(
 			'name' => 'Reddit',
-			'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="M22,11.816c0-1.256-1.021-2.277-2.277-2.277c-0.593,0-1.122,0.24-1.526,0.614c-1.481-0.965-3.455-1.594-5.647-1.69 l1.171-3.702l3.18,0.748c0.008,1.028,0.846,1.862,1.876,1.862c1.035,0,1.877-0.842,1.877-1.878c0-1.035-0.842-1.877-1.877-1.877 c-0.769,0-1.431,0.466-1.72,1.13l-3.508-0.826c-0.203-0.047-0.399,0.067-0.46,0.261l-1.35,4.268 c-2.316,0.038-4.411,0.67-5.97,1.671C5.368,9.765,4.853,9.539,4.277,9.539C3.021,9.539,2,10.56,2,11.816 c0,0.814,0.433,1.523,1.078,1.925c-0.037,0.221-0.061,0.444-0.061,0.672c0,3.292,4.011,5.97,8.941,5.97s8.941-2.678,8.941-5.97 c0-0.214-0.02-0.424-0.053-0.632C21.533,13.39,22,12.661,22,11.816z M18.776,4.394c0.606,0,1.1,0.493,1.1,1.1s-0.493,1.1-1.1,1.1 s-1.1-0.494-1.1-1.1S18.169,4.394,18.776,4.394z M2.777,11.816c0-0.827,0.672-1.5,1.499-1.5c0.313,0,0.598,0.103,0.838,0.269 c-0.851,0.676-1.477,1.479-1.812,2.36C2.983,12.672,2.777,12.27,2.777,11.816z M11.959,19.606c-4.501,0-8.164-2.329-8.164-5.193 S7.457,9.22,11.959,9.22s8.164,2.329,8.164,5.193S16.46,19.606,11.959,19.606z M20.636,13.001c-0.326-0.89-0.948-1.701-1.797-2.384 c0.248-0.186,0.55-0.301,0.883-0.301c0.827,0,1.5,0.673,1.5,1.5C21.223,12.299,20.992,12.727,20.636,13.001z M8.996,14.704 c-0.76,0-1.397-0.616-1.397-1.376c0-0.76,0.637-1.397,1.397-1.397c0.76,0,1.376,0.637,1.376,1.397 C10.372,14.088,9.756,14.704,8.996,14.704z M16.401,13.328c0,0.76-0.616,1.376-1.376,1.376c-0.76,0-1.399-0.616-1.399-1.376 c0-0.76,0.639-1.397,1.399-1.397C15.785,11.931,16.401,12.568,16.401,13.328z M15.229,16.708c0.152,0.152,0.152,0.398,0,0.55 c-0.674,0.674-1.727,1.002-3.219,1.002c-0.004,0-0.007-0.002-0.011-0.002c-0.004,0-0.007,0.002-0.011,0.002 c-1.492,0-2.544-0.328-3.218-1.002c-0.152-0.152-0.152-0.398,0-0.55c0.152-0.152,0.399-0.151,0.55,0 c0.521,0.521,1.394,0.775,2.669,0.775c0.004,0,0.007,0.002,0.011,0.002c0.004,0,0.007-0.002,0.011-0.002 c1.275,0,2.148-0.253,2.669-0.775C14.831,16.556,15.078,16.556,15.229,16.708z"></path></svg>',
+			'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="M22 12.068a2.184 2.184 0 0 0-2.186-2.186c-.592 0-1.13.233-1.524.609-1.505-1.075-3.566-1.774-5.86-1.864l1.004-4.695 3.261.699A1.56 1.56 0 1 0 18.255 3c-.61-.001-1.147.357-1.398.877l-3.638-.77a.382.382 0 0 0-.287.053.348.348 0 0 0-.161.251l-1.112 5.233c-2.33.072-4.426.77-5.95 1.864a2.201 2.201 0 0 0-1.523-.61 2.184 2.184 0 0 0-.896 4.176c-.036.215-.053.43-.053.663 0 3.37 3.924 6.111 8.763 6.111s8.763-2.724 8.763-6.11c0-.216-.017-.449-.053-.664A2.207 2.207 0 0 0 22 12.068Zm-15.018 1.56a1.56 1.56 0 0 1 3.118 0c0 .86-.699 1.558-1.559 1.558-.86.018-1.559-.699-1.559-1.559Zm8.728 4.139c-1.076 1.075-3.119 1.147-3.71 1.147-.61 0-2.652-.09-3.71-1.147a.4.4 0 0 1 0-.573.4.4 0 0 1 .574 0c.68.68 2.114.914 3.136.914 1.022 0 2.473-.233 3.136-.914a.4.4 0 0 1 .574 0 .436.436 0 0 1 0 .573Zm-.287-2.563a1.56 1.56 0 0 1 0-3.118c.86 0 1.56.699 1.56 1.56 0 .841-.7 1.558-1.56 1.558Z"></path></svg>',
 		),
 		'skype'         => array(
 			'name' => 'Skype',

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

@@ -124,7 +124,7 @@
 }
 
 .wp-social-link-reddit {
-	background-color: #fe4500;
+	background-color: #ff4500;
 	color: #fff;
 }
 

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

@@ -95,7 +95,7 @@
 }
 
 .wp-social-link-reddit {
-	color: #fe4500;
+	color: #ff4500;
 }
 
 .wp-social-link-skype {

package/src/social-links/block.json

@@ -56,6 +56,15 @@
 				"type": "flex"
 			}
 		},
+		"color": {
+			"enableContrastChecker": false,
+			"background": true,
+			"gradients": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": false
+			}
+		},
 		"spacing": {
 			"blockGap": [ "horizontal", "vertical" ],
 			"margin": [ "top", "bottom" ],

package/src/social-links/edit.js

@@ -7,15 +7,16 @@ import classNames from 'classnames';
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { Fragment, useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import {
 	BlockControls,
 	useInnerBlocksProps,
 	useBlockProps,
 	InspectorControls,
 	ContrastChecker,
-	PanelColorSettings,
 	withColors,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 import {
 	MenuGroup,
@@ -46,6 +47,7 @@ const getDefaultBlockLayout = ( blockTypeOrName ) => {
 
 export function SocialLinksEdit( props ) {
 	const {
+		clientId,
 		name,
 		attributes,
 		iconBackgroundColor,
@@ -137,6 +139,10 @@ export function SocialLinksEdit( props ) {
 				setAttributes( { iconColorValue: colorValue } );
 			},
 			label: __( 'Icon color' ),
+			resetAllFilter: () => {
+				setIconColor( undefined );
+				setAttributes( { iconColorValue: undefined } );
+			},
 		},
 	];
 
@@ -152,11 +158,17 @@ export function SocialLinksEdit( props ) {
 				} );
 			},
 			label: __( 'Icon background' ),
+			resetAllFilter: () => {
+				setIconBackgroundColor( undefined );
+				setAttributes( { iconBackgroundColorValue: undefined } );
+			},
 		} );
 	}
 
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
 	return (
-		<Fragment>
+		<>
 			<BlockControls group="other">
 				<ToolbarDropdownMenu
 					label={ __( 'Size' ) }
@@ -211,25 +223,41 @@ export function SocialLinksEdit( props ) {
 						}
 					/>
 				</PanelBody>
-				<PanelColorSettings
-					__experimentalHasMultipleOrigins
-					__experimentalIsRenderedInSidebar
-					title={ __( 'Color' ) }
-					colorSettings={ colorSettings }
-				>
-					{ ! logosOnly && (
-						<ContrastChecker
-							{ ...{
-								textColor: iconColorValue,
-								backgroundColor: iconBackgroundColorValue,
-							} }
-							isLargeText={ false }
+			</InspectorControls>
+			<InspectorControls __experimentalGroup="color">
+				{ colorSettings.map(
+					( { onChange, label, value, resetAllFilter } ) => (
+						<ColorGradientSettingsDropdown
+							key={ `social-links-color-${ label }` }
+							__experimentalHasMultipleOrigins
+							__experimentalIsRenderedInSidebar
+							settings={ [
+								{
+									colorValue: value,
+									label,
+									onColorChange: onChange,
+									isShownByDefault: true,
+									resetAllFilter,
+									enableAlpha: true,
+								},
+							] }
+							panelId={ clientId }
+							{ ...colorGradientSettings }
 						/>
-					) }
-				</PanelColorSettings>
+					)
+				) }
+				{ ! logosOnly && (
+					<ContrastChecker
+						{ ...{
+							textColor: iconColorValue,
+							backgroundColor: iconBackgroundColorValue,
+						} }
+						isLargeText={ false }
+					/>
+				) }
 			</InspectorControls>
 			<ul { ...innerBlocksProps } />
-		</Fragment>
+		</>
 	);
 }
 

package/src/spacer/block.json

@@ -17,7 +17,13 @@
 	},
 	"usesContext": [ "orientation" ],
 	"supports": {
-		"anchor": true
+		"anchor": true,
+		"spacing": {
+			"margin": [ "top", "bottom" ],
+			"__experimentalDefaultControls": {
+				"margin": true
+			}
+		}
 	},
 	"editorStyle": "wp-block-spacer-editor",
 	"style": "wp-block-spacer"

package/src/style.scss

@@ -27,6 +27,7 @@
 @import "./paragraph/style.scss";
 @import "./post-author/style.scss";
 @import "./post-comments-form/style.scss";
+@import "./post-date/style.scss";
 @import "./post-excerpt/style.scss";
 @import "./post-featured-image/style.scss";
 @import "./post-terms/style.scss";
@@ -35,6 +36,7 @@
 @import "./pullquote/style.scss";
 @import "./post-template/style.scss";
 @import "./query-pagination/style.scss";
+@import "./query-title/style.scss";
 @import "./quote/style.scss";
 @import "./read-more/style.scss";
 @import "./rss/style.scss";

package/src/table/block.json

@@ -134,6 +134,10 @@
 				"text": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/table/state.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { times, get, mapValues, every, pick } from 'lodash';
+import { get, mapValues, every, pick } from 'lodash';
 
 const INHERITED_COLUMN_ATTRIBUTES = [ 'align' ];
 
@@ -16,8 +16,8 @@ const INHERITED_COLUMN_ATTRIBUTES = [ 'align' ];
  */
 export function createTable( { rowCount, columnCount } ) {
 	return {
-		body: times( rowCount, () => ( {
-			cells: times( columnCount, () => ( {
+		body: Array.from( { length: rowCount } ).map( () => ( {
+			cells: Array.from( { length: columnCount } ).map( () => ( {
 				content: '',
 				tag: 'td',
 			} ) ),
@@ -167,23 +167,25 @@ export function insertRow( state, { sectionName, rowIndex, columnCount } ) {
 		[ sectionName ]: [
 			...state[ sectionName ].slice( 0, rowIndex ),
 			{
-				cells: times( cellCount, ( index ) => {
-					const firstCellInColumn = get(
-						firstRow,
-						[ 'cells', index ],
-						{}
-					);
-					const inheritedAttributes = pick(
-						firstCellInColumn,
-						INHERITED_COLUMN_ATTRIBUTES
-					);
+				cells: Array.from( { length: cellCount } ).map(
+					( _, index ) => {
+						const firstCellInColumn = get(
+							firstRow,
+							[ 'cells', index ],
+							{}
+						);
+						const inheritedAttributes = pick(
+							firstCellInColumn,
+							INHERITED_COLUMN_ATTRIBUTES
+						);
 
-					return {
-						...inheritedAttributes,
-						content: '',
-						tag: sectionName === 'head' ? 'th' : 'td',
-					};
-				} ),
+						return {
+							...inheritedAttributes,
+							content: '',
+							tag: sectionName === 'head' ? 'th' : 'td',
+						};
+					}
+				),
 			},
 			...state[ sectionName ].slice( rowIndex ),
 		],

package/src/table-of-contents/block.json

@@ -21,7 +21,30 @@
 		}
 	},
 	"supports": {
-		"html": false
+		"html": false,
+		"color": {
+			"text": true,
+			"background": true,
+			"gradients": true,
+			"link": true
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"example": {}
 }

package/src/tag-cloud/block.json

@@ -36,7 +36,11 @@
 	],
 	"supports": {
 		"html": false,
-		"align": true
+		"align": true,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		}
 	},
 	"editorStyle": "wp-block-tag-cloud-editor"
 }

package/src/template-part/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { startCase } from 'lodash';
+import { capitalCase } from 'change-case';
 
 /**
  * WordPress dependencies
@@ -41,7 +41,8 @@ export const settings = {
 		}
 
 		return (
-			decodeEntities( entity.title?.rendered ) || startCase( entity.slug )
+			decodeEntities( entity.title?.rendered ) ||
+			capitalCase( entity.slug )
 		);
 	},
 	edit,

package/src/term-description/block.json

@@ -21,9 +21,19 @@
 				"text": true
 			}
 		},
+		"spacing": {
+			"padding": true,
+			"margin": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

package/src/text-columns/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, times } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -55,7 +55,7 @@ export default function TextColumnsEdit( { attributes, setAttributes } ) {
 					className: `align${ width } columns-${ columns }`,
 				} ) }
 			>
-				{ times( columns, ( index ) => {
+				{ Array.from( { length: columns } ).map( ( _, index ) => {
 					return (
 						<div
 							className="wp-block-column"

package/src/text-columns/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, times } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ export default function save( { attributes } ) {
 				className: `align${ width } columns-${ columns }`,
 			} ) }
 		>
-			{ times( columns, ( index ) => (
+			{ Array.from( { length: columns } ).map( ( _, index ) => (
 				<div className="wp-block-column" key={ `column-${ index }` }>
 					<RichText.Content
 						tagName="p"

package/src/verse/block.json

@@ -38,12 +38,14 @@
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true,
 				"fontAppearance": true
 			}
 		},
 		"spacing": {
+			"margin": true,
 			"padding": true
 		}
 	},

package/src/video/block.json

@@ -77,6 +77,10 @@
 	"supports": {
 		"anchor": true,
 		"align": true,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"__experimentalStyle": {
 			"spacing": {
 				"margin": "0 0 1em 0"

package/src/video/style.scss

@@ -1,4 +1,6 @@
 .wp-block-video {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 	video {
 		width: 100%;
 	}