@wordpress/block-library 8.29.0 → 8.31.0

package/src/table/deprecated.js

@@ -12,6 +12,7 @@ import {
 	useBlockProps,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
 // As the previous arbitrary colors won't match theme color palettes, the hex
@@ -24,8 +25,266 @@ const oldColors = {
 	'subtle-pale-pink': '#fcf0ef',
 };
 
+// Fixed width table cells on by default.
+const v4Query = {
+	content: {
+		type: 'rich-text',
+		source: 'rich-text',
+	},
+	tag: {
+		type: 'string',
+		default: 'td',
+		source: 'tag',
+	},
+	scope: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'scope',
+	},
+	align: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'data-align',
+	},
+	colspan: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'colspan',
+	},
+	rowspan: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'rowspan',
+	},
+};
+
+const v4 = {
+	attributes: {
+		hasFixedLayout: {
+			type: 'boolean',
+			default: false,
+		},
+		caption: {
+			type: 'rich-text',
+			source: 'rich-text',
+			selector: 'figcaption',
+		},
+		head: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'thead tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: v4Query,
+				},
+			},
+		},
+		body: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'tbody tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: v4Query,
+				},
+			},
+		},
+		foot: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'tfoot tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: v4Query,
+				},
+			},
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		color: {
+			__experimentalSkipSerialization: true,
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+			__experimentalDefaultControls: {
+				margin: false,
+				padding: false,
+			},
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		__experimentalBorder: {
+			__experimentalSkipSerialization: true,
+			color: true,
+			style: true,
+			width: true,
+			__experimentalDefaultControls: {
+				color: true,
+				style: true,
+				width: true,
+			},
+		},
+		__experimentalSelector: '.wp-block-table > table',
+		interactivity: {
+			clientNavigation: true,
+		},
+	},
+	save( { attributes } ) {
+		const { hasFixedLayout, head, body, foot, caption } = attributes;
+		const isEmpty = ! head.length && ! body.length && ! foot.length;
+
+		if ( isEmpty ) {
+			return null;
+		}
+
+		const colorProps = getColorClassesAndStyles( attributes );
+		const borderProps = getBorderClassesAndStyles( attributes );
+
+		const classes = classnames(
+			colorProps.className,
+			borderProps.className,
+			{
+				'has-fixed-layout': hasFixedLayout,
+			}
+		);
+
+		const hasCaption = ! RichText.isEmpty( caption );
+
+		const Section = ( { type, rows } ) => {
+			if ( ! rows.length ) {
+				return null;
+			}
+
+			const Tag = `t${ type }`;
+
+			return (
+				<Tag>
+					{ rows.map( ( { cells }, rowIndex ) => (
+						<tr key={ rowIndex }>
+							{ cells.map(
+								(
+									{
+										content,
+										tag,
+										scope,
+										align,
+										colspan,
+										rowspan,
+									},
+									cellIndex
+								) => {
+									const cellClasses = classnames( {
+										[ `has-text-align-${ align }` ]: align,
+									} );
+
+									return (
+										<RichText.Content
+											className={
+												cellClasses
+													? cellClasses
+													: undefined
+											}
+											data-align={ align }
+											tagName={ tag }
+											value={ content }
+											key={ cellIndex }
+											scope={
+												tag === 'th' ? scope : undefined
+											}
+											colSpan={ colspan }
+											rowSpan={ rowspan }
+										/>
+									);
+								}
+							) }
+						</tr>
+					) ) }
+				</Tag>
+			);
+		};
+
+		return (
+			<figure { ...useBlockProps.save() }>
+				<table
+					className={ classes === '' ? undefined : classes }
+					style={ { ...colorProps.style, ...borderProps.style } }
+				>
+					<Section type="head" rows={ head } />
+					<Section type="body" rows={ body } />
+					<Section type="foot" rows={ foot } />
+				</table>
+				{ hasCaption && (
+					<RichText.Content
+						tagName="figcaption"
+						value={ caption }
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
+					/>
+				) }
+			</figure>
+		);
+	},
+};
+
 // In #41140 support was added to global styles for caption elements which
 // added a `wp-element-caption` classname to the embed figcaption element.
+const v3Query = {
+	content: {
+		type: 'string',
+		source: 'html',
+	},
+	tag: {
+		type: 'string',
+		default: 'td',
+		source: 'tag',
+	},
+	scope: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'scope',
+	},
+	align: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'data-align',
+	},
+};
+
 const v3 = {
 	attributes: {
 		hasFixedLayout: {
@@ -49,27 +308,7 @@ const v3 = {
 					default: [],
 					source: 'query',
 					selector: 'td,th',
-					query: {
-						content: {
-							type: 'string',
-							source: 'html',
-						},
-						tag: {
-							type: 'string',
-							default: 'td',
-							source: 'tag',
-						},
-						scope: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'scope',
-						},
-						align: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'data-align',
-						},
-					},
+					query: v3Query,
 				},
 			},
 		},
@@ -84,27 +323,7 @@ const v3 = {
 					default: [],
 					source: 'query',
 					selector: 'td,th',
-					query: {
-						content: {
-							type: 'string',
-							source: 'html',
-						},
-						tag: {
-							type: 'string',
-							default: 'td',
-							source: 'tag',
-						},
-						scope: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'scope',
-						},
-						align: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'data-align',
-						},
-					},
+					query: v3Query,
 				},
 			},
 		},
@@ -119,27 +338,7 @@ const v3 = {
 					default: [],
 					source: 'query',
 					selector: 'td,th',
-					query: {
-						content: {
-							type: 'string',
-							source: 'html',
-						},
-						tag: {
-							type: 'string',
-							default: 'td',
-							source: 'tag',
-						},
-						scope: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'scope',
-						},
-						align: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'data-align',
-						},
-					},
+					query: v3Query,
 				},
 			},
 		},
@@ -269,6 +468,28 @@ const v3 = {
 };
 
 // Deprecation migrating table block to use colors block support feature.
+const v2Query = {
+	content: {
+		type: 'string',
+		source: 'html',
+	},
+	tag: {
+		type: 'string',
+		default: 'td',
+		source: 'tag',
+	},
+	scope: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'scope',
+	},
+	align: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'data-align',
+	},
+};
+
 const v2 = {
 	attributes: {
 		hasFixedLayout: {
@@ -295,27 +516,7 @@ const v2 = {
 					default: [],
 					source: 'query',
 					selector: 'td,th',
-					query: {
-						content: {
-							type: 'string',
-							source: 'html',
-						},
-						tag: {
-							type: 'string',
-							default: 'td',
-							source: 'tag',
-						},
-						scope: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'scope',
-						},
-						align: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'data-align',
-						},
-					},
+					query: v2Query,
 				},
 			},
 		},
@@ -330,27 +531,7 @@ const v2 = {
 					default: [],
 					source: 'query',
 					selector: 'td,th',
-					query: {
-						content: {
-							type: 'string',
-							source: 'html',
-						},
-						tag: {
-							type: 'string',
-							default: 'td',
-							source: 'tag',
-						},
-						scope: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'scope',
-						},
-						align: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'data-align',
-						},
-					},
+					query: v2Query,
 				},
 			},
 		},
@@ -365,27 +546,7 @@ const v2 = {
 					default: [],
 					source: 'query',
 					selector: 'td,th',
-					query: {
-						content: {
-							type: 'string',
-							source: 'html',
-						},
-						tag: {
-							type: 'string',
-							default: 'td',
-							source: 'tag',
-						},
-						scope: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'scope',
-						},
-						align: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'data-align',
-						},
-					},
+					query: v2Query,
 				},
 			},
 		},
@@ -496,6 +657,23 @@ const v2 = {
 	},
 };
 
+const v1Query = {
+	content: {
+		type: 'string',
+		source: 'html',
+	},
+	tag: {
+		type: 'string',
+		default: 'td',
+		source: 'tag',
+	},
+	scope: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'scope',
+	},
+};
+
 const v1 = {
 	attributes: {
 		hasFixedLayout: {
@@ -516,22 +694,7 @@ const v1 = {
 					default: [],
 					source: 'query',
 					selector: 'td,th',
-					query: {
-						content: {
-							type: 'string',
-							source: 'html',
-						},
-						tag: {
-							type: 'string',
-							default: 'td',
-							source: 'tag',
-						},
-						scope: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'scope',
-						},
-					},
+					query: v1Query,
 				},
 			},
 		},
@@ -546,22 +709,7 @@ const v1 = {
 					default: [],
 					source: 'query',
 					selector: 'td,th',
-					query: {
-						content: {
-							type: 'string',
-							source: 'html',
-						},
-						tag: {
-							type: 'string',
-							default: 'td',
-							source: 'tag',
-						},
-						scope: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'scope',
-						},
-					},
+					query: v1Query,
 				},
 			},
 		},
@@ -576,22 +724,7 @@ const v1 = {
 					default: [],
 					source: 'query',
 					selector: 'td,th',
-					query: {
-						content: {
-							type: 'string',
-							source: 'html',
-						},
-						tag: {
-							type: 'string',
-							default: 'td',
-							source: 'tag',
-						},
-						scope: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'scope',
-						},
-					},
+					query: v1Query,
 				},
 			},
 		},
@@ -665,4 +798,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v3, v2, v1 ];
+export default [ v4, v3, v2, v1 ];

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

@@ -160,7 +160,7 @@ export default function TableOfContentsEdit( {
 				<ol>
 					<TableOfContentsList
 						nestedHeadingList={ headingTree }
-						disableLinkActivation={ true }
+						disableLinkActivation
 						onClick={ showRedirectionPreventedNotice }
 					/>
 				</ol>

package/src/tag-cloud/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/tag-cloud` block on server.
  *
+ * @since 5.2.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the tag cloud for selected taxonomy.
@@ -42,6 +44,8 @@ function render_block_core_tag_cloud( $attributes ) {
 
 /**
  * Registers the `core/tag-cloud` block on server.
+ *
+ * @since 5.2.0
  */
 function register_block_core_tag_cloud() {
 	register_block_type_from_metadata(