@wordpress/block-library 6.0.1 → 6.0.5

package/src/button/editor.scss

@@ -63,7 +63,6 @@
 	.is-selected & {
 		height: auto;
 		overflow: visible;
-		margin-top: $grid-unit-20;
 	}
 }
 

package/src/button/style.scss

@@ -34,7 +34,7 @@ $blocks-block__margin: 0.5em;
 	}
 }
 
-// Increased specificity needed to override margins
+// Increased specificity needed to override margins.
 .wp-block-buttons > .wp-block-button {
 	&.has-custom-width {
 		max-width: none;
@@ -50,58 +50,35 @@ $blocks-block__margin: 0.5em;
 	}
 
 	&.wp-block-button__width-25 {
-		width: calc(25% - #{ $blocks-block__margin });
+		width: calc(25% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.75));
 	}
 
 	&.wp-block-button__width-50 {
-		width: calc(50% - #{ $blocks-block__margin });
+		width: calc(50% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.5));
 	}
 
 	&.wp-block-button__width-75 {
-		width: calc(75% - #{ $blocks-block__margin });
+		width: calc(75% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.25));
 	}
 
 	&.wp-block-button__width-100 {
-		width: calc(100% - #{ $blocks-block__margin });
-
-		&:only-child {
-			margin-right: 0;
-			width: 100%;
-		}
+		width: 100%;
+		flex-basis: 100%;
 	}
 }
 
-// If the browser supports column-gap, use that instead of the margins above.
-@supports ( column-gap: #{ $blocks-block__margin } ) {
-	.wp-block-buttons {
-
-		> .wp-block-button,
-		&.is-content-justification-right > .wp-block-button, {
-			// Added (duplicate) specificity needed to override the default button margin.
-			&.wp-block-button {
-				margin-right: 0;
-				margin-left: 0;
-			}
-		}
-
-		> .wp-block-button {
-			&.wp-block-button__width-25 {
-				width: calc(25% - #{ $blocks-block__margin * 0.75 });
-			}
-
-			&.wp-block-button__width-50 {
-				width: calc(50% - #{ $blocks-block__margin * 0.5 });
-			}
+// For vertical buttons, gap is not factored into width calculations.
+.wp-block-buttons.is-vertical > .wp-block-button {
+	&.wp-block-button__width-25 {
+		width: 25%;
+	}
 
-			&.wp-block-button__width-75 {
-				width: calc(75% - #{ $blocks-block__margin * 0.25 });
-			}
+	&.wp-block-button__width-50 {
+		width: 50%;
+	}
 
-			&.wp-block-button__width-100 {
-				width: auto;
-				flex-basis: 100%;
-			}
-		}
+	&.wp-block-button__width-75 {
+		width: 75%;
 	}
 }
 
@@ -118,8 +95,8 @@ $blocks-block__margin: 0.5em;
 	border-radius: 0 !important;
 }
 
-.is-style-outline > .wp-block-button__link,
-.wp-block-button__link.is-style-outline {
+.is-style-outline > :where(.wp-block-button__link),
+:where(.wp-block-button__link).is-style-outline {
 	border: 2px solid currentColor;
 	padding: 0.667em 1.333em;
 }

package/src/buttons/block.json

@@ -6,19 +6,24 @@
 	"description": "Prompt visitors to take action with a group of button-style links.",
 	"keywords": [ "link" ],
 	"textdomain": "default",
-	"attributes": {
-		"contentJustification": {
-			"type": "string"
-		},
-		"orientation": {
-			"type": "string",
-			"default": "horizontal"
-		}
-	},
 	"supports": {
 		"anchor": true,
 		"align": [ "wide", "full" ],
-		"__experimentalExposeControlsToChildren": true
+		"__experimentalExposeControlsToChildren": true,
+		"spacing": {
+			"blockGap": true,
+			"margin": ["top", "bottom" ],
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
+		},
+		"__experimentalLayout": {
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"default": {
+				"type": "flex"
+			}
+		}
 	},
 	"editorStyle": "wp-block-buttons-editor",
 	"style": "wp-block-buttons"

package/src/buttons/deprecated.js

@@ -1,9 +1,82 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * @param {Object} attributes Block's attributes.
+ */
+const migrateWithLayout = ( attributes ) => {
+	if ( !! attributes.layout ) {
+		return attributes;
+	}
+
+	const {
+		contentJustification,
+		orientation,
+		...updatedAttributes
+	} = attributes;
+
+	if ( contentJustification || orientation ) {
+		Object.assign( updatedAttributes, {
+			layout: {
+				type: 'flex',
+				...( contentJustification && {
+					justifyContent: contentJustification,
+				} ),
+				...( orientation && { orientation } ),
+			},
+		} );
+	}
+
+	return updatedAttributes;
+};
 
 const deprecated = [
+	{
+		attributes: {
+			contentJustification: {
+				type: 'string',
+			},
+			orientation: {
+				type: 'string',
+				default: 'horizontal',
+			},
+		},
+		supports: {
+			anchor: true,
+			align: [ 'wide', 'full' ],
+			__experimentalExposeControlsToChildren: true,
+			spacing: {
+				blockGap: true,
+				margin: [ 'top', 'bottom' ],
+				__experimentalDefaultControls: {
+					blockGap: true,
+				},
+			},
+		},
+		isEligible: ( { contentJustification, orientation } ) =>
+			!! contentJustification || !! orientation,
+		migrate: migrateWithLayout,
+		save( { attributes: { contentJustification, orientation } } ) {
+			return (
+				<div
+					{ ...useBlockProps.save( {
+						className: classnames( {
+							[ `is-content-justification-${ contentJustification }` ]: contentJustification,
+							'is-vertical': orientation === 'vertical',
+						} ),
+					} ) }
+				>
+					<InnerBlocks.Content />
+				</div>
+			);
+		},
+	},
 	{
 		supports: {
 			align: [ 'center', 'left', 'right' ],
@@ -20,7 +93,7 @@ const deprecated = [
 			return align && [ 'center', 'left', 'right' ].includes( align );
 		},
 		migrate( attributes ) {
-			return {
+			return migrateWithLayout( {
 				...attributes,
 				align: undefined,
 				// Floating Buttons blocks shouldn't have been supported in the
@@ -30,7 +103,7 @@ const deprecated = [
 				// As for center-aligned Buttons blocks, the content justification
 				// equivalent will create an identical end result in most cases.
 				contentJustification: attributes.align,
-			};
+			} );
 		},
 	},
 ];

package/src/buttons/edit.js

@@ -1,16 +1,9 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import {
-	BlockControls,
 	useBlockProps,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
-	JustifyContentControl,
+	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
@@ -21,28 +14,9 @@ import { useSelect } from '@wordpress/data';
 import { name as buttonBlockName } from '../button';
 
 const ALLOWED_BLOCKS = [ buttonBlockName ];
-const LAYOUT = {
-	type: 'default',
-	alignments: [],
-};
-const VERTICAL_JUSTIFY_CONTROLS = [ 'left', 'center', 'right' ];
-const HORIZONTAL_JUSTIFY_CONTROLS = [
-	'left',
-	'center',
-	'right',
-	'space-between',
-];
 
-function ButtonsEdit( {
-	attributes: { contentJustification, orientation },
-	setAttributes,
-} ) {
-	const blockProps = useBlockProps( {
-		className: classnames( {
-			[ `is-content-justification-${ contentJustification }` ]: contentJustification,
-			'is-vertical': orientation === 'vertical',
-		} ),
-	} );
+function ButtonsEdit( { attributes: { layout = {} } } ) {
+	const blockProps = useBlockProps();
 	const preferredStyle = useSelect( ( select ) => {
 		const preferredStyleVariations = select(
 			blockEditorStore
@@ -58,31 +32,12 @@ function ButtonsEdit( {
 				{ className: preferredStyle && `is-style-${ preferredStyle }` },
 			],
 		],
-		orientation,
-		__experimentalLayout: LAYOUT,
+		__experimentalLayout: layout,
 		templateInsertUpdatesSelection: true,
 	} );
 
-	const justifyControls =
-		orientation === 'vertical'
-			? VERTICAL_JUSTIFY_CONTROLS
-			: HORIZONTAL_JUSTIFY_CONTROLS;
-
 	return (
 		<>
-			<BlockControls group="block" __experimentalShareWithChildBlocks>
-				<JustifyContentControl
-					allowedControls={ justifyControls }
-					value={ contentJustification }
-					onChange={ ( value ) =>
-						setAttributes( { contentJustification: value } )
-					}
-					popoverProps={ {
-						position: 'bottom right',
-						isAlternate: true,
-					} }
-				/>
-			</BlockControls>
 			<div { ...innerBlocksProps } />
 		</>
 	);

package/src/buttons/editor.scss

@@ -1,18 +1,17 @@
 // This variable is repeated across Button, Buttons, and Buttons editor styles.
 $blocks-block__margin: 0.5em;
 
-.wp-block > .wp-block-buttons {
-	display: flex;
-	flex-wrap: wrap;
-}
-
 .wp-block-buttons {
+	// Override editor auto block margins for button as well as the block appender.
 	> .wp-block {
-		// Override editor auto block margins.
-		margin-left: 0;
-		margin-top: $blocks-block__margin;
-		margin-right: $blocks-block__margin;
+		margin: 0;
 	}
+
+	// Specificity needed in some themes to override editor auto block margins for the button.
+	> .wp-block-button.wp-block-button.wp-block-button.wp-block-button.wp-block-button {
+		margin: 0;
+	}
+
 	> .block-list-appender {
 		display: inline-flex;
 		align-items: center;

package/src/buttons/index.js

@@ -12,7 +12,6 @@ import transforms from './transforms';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
-import variations from './variations';
 
 const { name } = metadata;
 
@@ -36,5 +35,4 @@ export const settings = {
 	transforms,
 	edit,
 	save,
-	variations,
 };

package/src/buttons/save.js

@@ -1,26 +1,9 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-export default function save( {
-	attributes: { contentJustification, orientation },
-} ) {
-	return (
-		<div
-			{ ...useBlockProps.save( {
-				className: classnames( {
-					[ `is-content-justification-${ contentJustification }` ]: contentJustification,
-					'is-vertical': orientation === 'vertical',
-				} ),
-			} ) }
-		>
-			<InnerBlocks.Content />
-		</div>
-	);
+export default function save() {
+	const innerBlocksProps = useInnerBlocksProps.save( useBlockProps.save() );
+	return <div { ...innerBlocksProps } />;
 }

package/src/buttons/style.scss

@@ -2,16 +2,10 @@
 $blocks-block__margin: 0.5em;
 
 .wp-block-buttons {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	column-gap: $blocks-block__margin;
 
 	&.is-vertical {
 		flex-direction: column;
 		> .wp-block-button {
-			/*rtl:ignore*/
-			margin-right: 0;
 			&:last-child {
 				margin-bottom: 0;
 			}
@@ -21,16 +15,7 @@ $blocks-block__margin: 0.5em;
 	// Increased specificity to override blocks default margin.
 	> .wp-block-button {
 		display: inline-block;
-		/*rtl:ignore*/
-		margin-left: 0;
-		/*rtl:ignore*/
-		margin-right: $blocks-block__margin;
-		margin-bottom: $blocks-block__margin;
-
-		&:last-child {
-			/*rtl:ignore*/
-			margin-right: 0;
-		}
+		margin: 0;
 	}
 
 	&.is-content-justification-left {
@@ -50,18 +35,6 @@ $blocks-block__margin: 0.5em;
 	&.is-content-justification-right {
 		justify-content: flex-end;
 
-		> .wp-block-button {
-			/*rtl:ignore*/
-			margin-left: $blocks-block__margin;
-			/*rtl:ignore*/
-			margin-right: 0;
-
-			&:first-child {
-				/*rtl:ignore*/
-				margin-left: 0;
-			}
-		}
-
 		&.is-vertical {
 			align-items: flex-end;
 		}
@@ -75,28 +48,6 @@ $blocks-block__margin: 0.5em;
 	&.aligncenter {
 		text-align: center;
 	}
-	&.alignleft .wp-block-button {
-		/*rtl:ignore*/
-		margin-left: 0;
-		/*rtl:ignore*/
-		margin-right: $blocks-block__margin;
-
-		&:last-child {
-			/*rtl:ignore*/
-			margin-right: 0;
-		}
-	}
-	&.alignright .wp-block-button {
-		/*rtl:ignore*/
-		margin-right: 0;
-		/*rtl:ignore*/
-		margin-left: $blocks-block__margin;
-
-		&:first-child {
-			/*rtl:ignore*/
-			margin-left: 0;
-		}
-	}
 
 	// Back compat: Inner button blocks previously had their own alignment
 	// options. Forcing them to 100% width in the flex container replicates
@@ -116,7 +67,6 @@ $blocks-block__margin: 0.5em;
 	/* stylelint-enable indentation */
 		margin-left: auto;
 		margin-right: auto;
-		margin-bottom: $blocks-block__margin;
 		width: 100%;
 	}
 }

package/src/categories/block.json

@@ -17,6 +17,10 @@
 		"showPostCounts": {
 			"type": "boolean",
 			"default": false
+		},
+		"showOnlyTopLevel": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"supports": {

package/src/categories/edit.js

@@ -21,22 +21,33 @@ import { pin } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 
 export default function CategoriesEdit( {
-	attributes: { displayAsDropdown, showHierarchy, showPostCounts },
+	attributes: {
+		displayAsDropdown,
+		showHierarchy,
+		showPostCounts,
+		showOnlyTopLevel,
+	},
 	setAttributes,
 } ) {
 	const selectId = useInstanceId( CategoriesEdit, 'blocks-category-select' );
-	const { categories, isRequesting } = useSelect( ( select ) => {
-		const { getEntityRecords, isResolving } = select( coreStore );
-		const query = { per_page: -1, hide_empty: true, context: 'view' };
-		return {
-			categories: getEntityRecords( 'taxonomy', 'category', query ),
-			isRequesting: isResolving( 'getEntityRecords', [
-				'taxonomy',
-				'category',
-				query,
-			] ),
-		};
-	}, [] );
+	const { categories, isRequesting } = useSelect(
+		( select ) => {
+			const { getEntityRecords, isResolving } = select( coreStore );
+			const query = { per_page: -1, hide_empty: true, context: 'view' };
+			if ( showOnlyTopLevel ) {
+				query.parent = 0;
+			}
+			return {
+				categories: getEntityRecords( 'taxonomy', 'category', query ),
+				isRequesting: isResolving( 'getEntityRecords', [
+					'taxonomy',
+					'category',
+					query,
+				] ),
+			};
+		},
+		[ showOnlyTopLevel ]
+	);
 	const getCategoriesList = ( parentId ) => {
 		if ( ! categories?.length ) {
 			return [];
@@ -133,16 +144,23 @@ export default function CategoriesEdit( {
 						checked={ displayAsDropdown }
 						onChange={ toggleAttribute( 'displayAsDropdown' ) }
 					/>
-					<ToggleControl
-						label={ __( 'Show hierarchy' ) }
-						checked={ showHierarchy }
-						onChange={ toggleAttribute( 'showHierarchy' ) }
-					/>
 					<ToggleControl
 						label={ __( 'Show post counts' ) }
 						checked={ showPostCounts }
 						onChange={ toggleAttribute( 'showPostCounts' ) }
 					/>
+					<ToggleControl
+						label={ __( 'Show only top level categories' ) }
+						checked={ showOnlyTopLevel }
+						onChange={ toggleAttribute( 'showOnlyTopLevel' ) }
+					/>
+					{ ! showOnlyTopLevel && (
+						<ToggleControl
+							label={ __( 'Show hierarchy' ) }
+							checked={ showHierarchy }
+							onChange={ toggleAttribute( 'showHierarchy' ) }
+						/>
+					) }
 				</PanelBody>
 			</InspectorControls>
 			{ isRequesting && (

package/src/categories/index.php

@@ -23,6 +23,9 @@ function render_block_core_categories( $attributes ) {
 		'show_count'   => ! empty( $attributes['showPostCounts'] ),
 		'title_li'     => '',
 	);
+	if ( ! empty( $attributes['showOnlyTopLevel'] ) && $attributes['showOnlyTopLevel'] ) {
+		$args['parent'] = 0;
+	}
 
 	if ( ! empty( $attributes['displayAsDropdown'] ) ) {
 		$id                       = 'wp-block-categories-' . $block_id;

package/src/code/block.json

@@ -16,7 +16,30 @@
 		"anchor": true,
 		"__experimentalSelector": ".wp-block-code > code",
 		"typography": {
-			"fontSize": true
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"spacing": {
+			"margin": [ "top", "bottom" ],
+			"padding": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"color": {
+			"text": true,
+			"background": true,
+			"gradients": true
 		}
 	},
 	"style": "wp-block-code"

package/src/code/edit.native.js

@@ -8,7 +8,7 @@ import { View } from 'react-native';
  */
 import { PlainText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -22,18 +22,16 @@ import styles from './theme.scss';
 // Note: styling is applied directly to the (nested) PlainText component. Web-side components
 // apply it to the container 'div' but we don't have a proper proposal for cascading styling yet.
 export function CodeEdit( props ) {
-	const {
-		attributes,
-		setAttributes,
-		onFocus,
-		onBlur,
-		getStylesFromColorScheme,
-	} = props;
-	const codeStyle = getStylesFromColorScheme(
-		styles.blockCode,
-		styles.blockCodeDark
-	);
-	const placeholderStyle = getStylesFromColorScheme(
+	const { attributes, setAttributes, onFocus, onBlur, style } = props;
+	const codeStyle = {
+		...usePreferredColorSchemeStyle(
+			styles.blockCode,
+			styles.blockCodeDark
+		),
+		...( style?.fontSize && { fontSize: style.fontSize } ),
+	};
+
+	const placeholderStyle = usePreferredColorSchemeStyle(
 		styles.placeholder,
 		styles.placeholderDark
 	);
@@ -57,4 +55,4 @@ export function CodeEdit( props ) {
 	);
 }
 
-export default withPreferredColorScheme( CodeEdit );
+export default CodeEdit;

package/src/column/block.json

@@ -13,7 +13,11 @@
 		"width": {
 			"type": "string"
 		},
+		"allowedBlocks": {
+			"type": "array"
+		},
 		"templateLock": {
+			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", false ]
 		}
 	},