@wordpress/block-library 7.12.2-next.d6164808d3.0 → 7.14.0

package/src/social-link/index.js

@@ -6,6 +6,7 @@ import { share as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import edit from './edit';
 import metadata from './block.json';
 import variations from './variations';
@@ -19,3 +20,5 @@ export const settings = {
 	edit,
 	variations,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/social-link/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

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

@@ -144,8 +144,7 @@
 }
 
 .wp-social-link-whatsapp {
-	background-color: #25d366;
-	color: #fff;
+	color: #25d366;
 }
 
 .wp-social-link-wordpress {

package/src/social-links/block.json

@@ -56,9 +56,19 @@
 				"type": "flex"
 			}
 		},
+		"color": {
+			"enableContrastChecker": false,
+			"background": true,
+			"gradients": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": false
+			}
+		},
 		"spacing": {
 			"blockGap": [ "horizontal", "vertical" ],
-			"margin": [ "top", "bottom" ],
+			"margin": true,
+			"padding": true,
 			"units": [ "px", "em", "rem", "vh", "vw" ],
 			"__experimentalDefaultControls": {
 				"blockGap": true

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,26 +223,41 @@ export function SocialLinksEdit( props ) {
 						}
 					/>
 				</PanelBody>
-				<PanelColorSettings
-					__experimentalHasMultipleOrigins
-					__experimentalIsRenderedInSidebar
-					title={ __( 'Color' ) }
-					colorSettings={ colorSettings }
-					enableAlpha
-				>
-					{ ! 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/social-links/index.js

@@ -6,6 +6,7 @@ import { share as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
@@ -46,3 +47,5 @@ export const settings = {
 	save,
 	deprecated,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/social-links/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/social-links/style.scss

@@ -1,4 +1,7 @@
 .wp-block-social-links {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	padding-left: 0;
 	padding-right: 0;
 	// Some themes set text-indent on all <ul>

package/src/spacer/index.js

@@ -6,6 +6,7 @@ import { resizeCornerNE as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
@@ -21,3 +22,5 @@ export const settings = {
 	save,
 	deprecated,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/spacer/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/table/block.json

@@ -141,10 +141,12 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"__experimentalFontFamily": true,
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
@@ -160,12 +162,7 @@
 				"width": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-table > table",
-		"__experimentalStyle": {
-			"spacing": {
-				"margin": "0 0 1em 0"
-			}
-		}
+		"__experimentalSelector": ".wp-block-table > table"
 	},
 	"styles": [
 		{

package/src/table/index.js

@@ -7,6 +7,7 @@ import { blockTable as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
@@ -96,3 +97,5 @@ export const settings = {
 	save,
 	deprecated,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/table/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/table/theme.scss

@@ -1,4 +1,6 @@
 .wp-block-table {
+	margin: "0 0 1em 0";
+
 	thead {
 		border-bottom: 3px solid;
 	}

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

@@ -31,6 +31,19 @@
 		"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/table-of-contents/index.js

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import icon from './icon';
@@ -15,3 +16,5 @@ export const settings = {
 	edit,
 	save,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

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

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/tag-cloud/index.js

@@ -6,6 +6,7 @@ import { tag as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import transforms from './transforms';
 import metadata from './block.json';
 import edit from './edit';
@@ -20,3 +21,5 @@ export const settings = {
 	edit,
 	transforms,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/tag-cloud/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/template-part/edit/index.js

@@ -15,7 +15,6 @@ import {
 	store as blockEditorStore,
 	__experimentalRecursionProvider as RecursionProvider,
 	__experimentalUseHasRecursion as useHasRecursion,
-	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 } from '@wordpress/block-editor';
 import { Spinner, Modal, MenuItem } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -89,15 +88,7 @@ export default function TemplatePartEdit( {
 	const blockPatterns = useAlternativeBlockPatterns( area, clientId );
 	const hasReplacements = !! templateParts.length || !! blockPatterns.length;
 	const areaObject = useTemplatePartArea( area );
-	const hasBlockOverlay = useBlockOverlayActive( clientId );
-	const blockProps = useBlockProps(
-		{
-			className: hasBlockOverlay
-				? 'block-editor-block-content-overlay'
-				: undefined,
-		},
-		{ __unstableIsDisabled: hasBlockOverlay }
-	);
+	const blockProps = useBlockProps();
 	const isPlaceholder = ! slug;
 	const isEntityAvailable = ! isPlaceholder && ! isMissing && isResolved;
 	const TagName = tagName || areaObject.tagName;

package/src/template-part/index.js

@@ -15,6 +15,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import { enhanceTemplatePartVariations } from './variations';
@@ -48,37 +49,42 @@ export const settings = {
 	edit,
 };
 
-// Importing this file includes side effects. This is added in block-library/package.json under sideEffects
-addFilter(
-	'blocks.registerBlockType',
-	'core/template-part',
-	enhanceTemplatePartVariations
-);
+export const init = () => {
+	addFilter(
+		'blocks.registerBlockType',
+		'core/template-part',
+		enhanceTemplatePartVariations
+	);
 
-// Prevent adding template parts inside post templates.
-const DISALLOWED_PARENTS = [ 'core/post-template', 'core/post-content' ];
-addFilter(
-	'blockEditor.__unstableCanInsertBlockType',
-	'removeTemplatePartsFromPostTemplates',
-	(
-		can,
-		blockType,
-		rootClientId,
-		{ getBlock, getBlockParentsByBlockName }
-	) => {
-		if ( blockType.name !== 'core/template-part' ) {
-			return can;
-		}
+	// Prevent adding template parts inside post templates.
+	const DISALLOWED_PARENTS = [ 'core/post-template', 'core/post-content' ];
+	addFilter(
+		'blockEditor.__unstableCanInsertBlockType',
+		'removeTemplatePartsFromPostTemplates',
+		(
+			can,
+			blockType,
+			rootClientId,
+			{ getBlock, getBlockParentsByBlockName }
+		) => {
+			if ( blockType.name !== 'core/template-part' ) {
+				return can;
+			}
 
-		for ( const disallowedParentType of DISALLOWED_PARENTS ) {
-			const hasDisallowedParent =
-				getBlock( rootClientId )?.name === disallowedParentType ||
-				getBlockParentsByBlockName( rootClientId, disallowedParentType )
-					.length;
-			if ( hasDisallowedParent ) {
-				return false;
+			for ( const disallowedParentType of DISALLOWED_PARENTS ) {
+				const hasDisallowedParent =
+					getBlock( rootClientId )?.name === disallowedParentType ||
+					getBlockParentsByBlockName(
+						rootClientId,
+						disallowedParentType
+					).length;
+				if ( hasDisallowedParent ) {
+					return false;
+				}
 			}
+			return true;
 		}
-		return true;
-	}
-);
+	);
+
+	return initBlock( { name, metadata, settings } );
+};

package/src/template-part/index.php

@@ -33,7 +33,7 @@ function render_block_core_template_part( $attributes ) {
 				'tax_query'      => array(
 					array(
 						'taxonomy' => 'wp_theme',
-						'field'    => 'slug',
+						'field'    => 'name',
 						'terms'    => $attributes['theme'],
 					),
 				),

package/src/template-part/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/term-description/block.json

@@ -28,6 +28,12 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

package/src/term-description/index.js

@@ -6,6 +6,7 @@ import { termDescription as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 
@@ -16,3 +17,5 @@ export const settings = {
 	icon,
 	edit,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/term-description/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/text-columns/index.js

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
@@ -21,3 +22,5 @@ export const settings = {
 	edit,
 	save,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/text-columns/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/text-columns/transforms.native.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import webTransforms from './transforms.js';
-import transformationCategories from '../transformationCategories';
+import transformationCategories from '../utils/transformation-categories';
 
 const transforms = {
 	...webTransforms,

package/src/utils/init-block.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Function to register an individual block.
+ *
+ * @param {Object} block The block to be registered.
+ *
+ * @return {?WPBlockType} The block, if it has been successfully registered;
+ *                        otherwise `undefined`.
+ */
+export default function initBlock( block ) {
+	if ( ! block ) {
+		return;
+	}
+	const { metadata, settings, name } = block;
+	return registerBlockType( { name, ...metadata }, settings );
+}

package/src/utils/init-block.native.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+const ALLOWED_BLOCKS_GRADIENT_SUPPORT = [ 'core/button' ];
+
+/**
+ * Function to register an individual block.
+ *
+ * @param {Object} block The block to be registered.
+ *
+ * @return {?WPBlockType} The block, if it has been successfully registered;
+ *                        otherwise `undefined`.
+ */
+export default function initBlock( block ) {
+	if ( ! block ) {
+		return;
+	}
+	const { metadata, settings, name } = block;
+	const { supports } = metadata;
+
+	return registerBlockType(
+		{
+			name,
+			...metadata,
+			// Gradients support only available for blocks listed in ALLOWED_BLOCKS_GRADIENT_SUPPORT.
+			...( ! ALLOWED_BLOCKS_GRADIENT_SUPPORT.includes( name ) &&
+			supports?.color?.gradients
+				? {
+						supports: {
+							...supports,
+							color: { ...supports.color, gradients: false },
+						},
+				  }
+				: {} ),
+		},
+		settings
+	);
+}

package/src/utils/migrate-font-family.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { cloneDeep } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -21,17 +16,14 @@ export default function ( attributes ) {
 		return attributes;
 	}
 
-	// Clone first so when we delete the fontFamily
-	// below we're not modifying the original
-	// attributes. Because the deprecation may be discarded
-	// we don't want to alter the original attributes.
-	const atts = cloneDeep( attributes );
-	const fontFamily = atts.style.typography.fontFamily.split( '|' ).pop();
-	delete atts.style.typography.fontFamily;
-	atts.style = cleanEmptyObject( atts.style );
+	const { fontFamily, ...typography } = attributes.style.typography;
 
 	return {
-		...atts,
-		fontFamily,
+		...attributes,
+		style: cleanEmptyObject( {
+			...attributes.style,
+			typography,
+		} ),
+		fontFamily: fontFamily.split( '|' ).pop(),
 	};
 }

package/src/verse/block.json

@@ -38,6 +38,7 @@
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true,
 				"fontAppearance": true

package/src/verse/index.js

@@ -7,6 +7,7 @@ import { verse as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
@@ -39,3 +40,5 @@ export const settings = {
 	edit,
 	save,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );