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

package/src/avatar/block.json

@@ -29,7 +29,8 @@
 		"align": true,
 		"alignWide": false,
 		"spacing": {
-			"margin": true
+			"margin": true,
+			"padding": true
 		},
 		"__experimentalBorder": {
 			"__experimentalSkipSerialization": true,

package/src/avatar/index.js

@@ -6,6 +6,7 @@ import { commentAuthorAvatar 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/avatar/init.js

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

package/src/avatar/style.scss

@@ -1,4 +1,7 @@
 .wp-block-avatar {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	&.aligncenter {
 		text-align: center;
 	}

package/src/block/edit.js

@@ -20,7 +20,6 @@ import {
 	useInnerBlocksProps,
 	__experimentalRecursionProvider as RecursionProvider,
 	__experimentalUseHasRecursion as useHasRecursion,
-	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 	InnerBlocks,
 	BlockControls,
 	InspectorControls,
@@ -60,15 +59,9 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 		ref
 	);
 
-	const hasBlockOverlay = useBlockOverlayActive( clientId );
-	const blockProps = useBlockProps(
-		{
-			className: hasBlockOverlay
-				? 'block-library-block__reusable-block-container block-editor-block-content-overlay'
-				: 'block-library-block__reusable-block-container',
-		},
-		{ __unstableIsDisabled: hasBlockOverlay }
-	);
+	const blockProps = useBlockProps( {
+		className: 'block-library-block__reusable-block-container',
+	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		value: blocks,

package/src/block/index.js

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

package/src/block/init.js

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

package/src/block/test/edit.native.js

@@ -70,6 +70,10 @@ describe( 'Reusable block', () => {
 				response = [ reusableBlockMock1, reusableBlockMock2 ];
 			} else if ( path.startsWith( '/wp/v2/blocks/1' ) ) {
 				response = reusableBlockMock1;
+			} else if (
+				path.startsWith( '/wp/v2/block-patterns/categories' )
+			) {
+				response = [];
 			}
 			return Promise.resolve( response );
 		} );

package/src/button/block.json

@@ -68,8 +68,13 @@
 		},
 		"typography": {
 			"fontSize": true,
+			"lineHeight": true,
 			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

package/src/button/edit.js

@@ -221,7 +221,7 @@ function ButtonEdit( props ) {
 					anchorRef={ ref?.current }
 					focusOnMount={ isEditingURL ? 'firstElement' : false }
 					__unstableSlotName={ '__unstable-block-tools-after' }
-					__unstableShift
+					shift
 				>
 					<LinkControl
 						className="wp-block-navigation-link__inline-link-input"

package/src/button/editor.scss

@@ -75,3 +75,7 @@
 div[data-type="core/button"] {
 	display: table;
 }
+
+.editor-styles-wrapper .wp-block-button[style*="text-decoration"] .wp-block-button__link {
+	text-decoration: inherit;
+}

package/src/button/index.js

@@ -7,6 +7,7 @@ import { button 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';
@@ -32,3 +33,5 @@ export const settings = {
 		text: ( a.text || '' ) + text,
 	} ),
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/button/init.js

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

package/src/button/style.scss

@@ -4,20 +4,12 @@ $blocks-block__margin: 0.5em;
 // Prefer the link selector instead of the regular button classname
 // to support the previous markup in addition to the new one.
 .wp-block-button__link {
-	box-shadow: none;
 	cursor: pointer;
 	display: inline-block;
 	text-align: center;
 	word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here.
 	box-sizing: border-box;
 
-	&:hover,
-	&:focus,
-	&:active,
-	&:visited {
-		color: $white;
-	}
-
 	&.aligncenter {
 		text-align: center;
 	}
@@ -32,6 +24,7 @@ $blocks-block__margin: 0.5em;
 // They are needed for backwards compatibility.
 :where(.wp-block-button__link) {
 	// This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
+	box-shadow: none;
 	text-decoration: none;
 
 	// 100% causes an oval, but any explicit but really high value retains the pill shape.
@@ -41,6 +34,10 @@ $blocks-block__margin: 0.5em;
 	padding: calc(0.667em + 2px) calc(1.333em + 2px);
 }
 
+.wp-block-button[style*="text-decoration"] .wp-block-button__link {
+	text-decoration: inherit;
+}
+
 // Increased specificity needed to override margins.
 .wp-block-buttons > .wp-block-button {
 	&.has-custom-width {

package/src/buttons/block.json

@@ -18,6 +18,19 @@
 				"blockGap": true
 			}
 		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
 		"__experimentalLayout": {
 			"allowSwitching": false,
 			"allowInheriting": false,

package/src/buttons/edit.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -30,8 +35,13 @@ const DEFAULT_BLOCK = {
 	],
 };
 
-function ButtonsEdit( { attributes: { layout = {} } } ) {
-	const blockProps = useBlockProps();
+function ButtonsEdit( { attributes, className } ) {
+	const { fontSize, layout = {}, style } = attributes;
+	const blockProps = useBlockProps( {
+		className: classnames( className, {
+			'has-custom-font-size': fontSize || style?.typography?.fontSize,
+		} ),
+	} );
 	const preferredStyle = useSelect( ( select ) => {
 		const preferredStyleVariations =
 			select( blockEditorStore ).getSettings()

package/src/buttons/editor.scss

@@ -54,6 +54,12 @@ $blocks-block__margin: 0.5em;
 			margin-bottom: 0;
 		}
 	}
+
+	.editor-styles-wrapper &.has-custom-font-size {
+		.wp-block-button__link {
+			font-size: inherit;
+		}
+	}
 }
 
 .wp-block[data-align="center"] > .wp-block-buttons {

package/src/buttons/index.js

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

package/src/buttons/init.js

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

package/src/buttons/save.js

@@ -1,9 +1,20 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-export default function save() {
-	const innerBlocksProps = useInnerBlocksProps.save( useBlockProps.save() );
+export default function save( { attributes, className } ) {
+	const { fontSize, style } = attributes;
+	const blockProps = useBlockProps.save( {
+		className: classnames( className, {
+			'has-custom-font-size': fontSize || style?.typography?.fontSize,
+		} ),
+	} );
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 	return <div { ...innerBlocksProps } />;
 }

package/src/buttons/style.scss

@@ -69,6 +69,19 @@ $blocks-block__margin: 0.5em;
 		margin-right: auto;
 		width: 100%;
 	}
+
+	&[style*="text-decoration"] {
+		.wp-block-button,
+		.wp-block-button__link {
+			text-decoration: inherit;
+		}
+	}
+
+	&.has-custom-font-size {
+		.wp-block-button__link {
+			font-size: inherit;
+		}
+	}
 }
 
 // Legacy buttons that did not come in a wrapping container.

package/src/buttons/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/calendar/block.json

@@ -16,7 +16,19 @@
 		}
 	},
 	"supports": {
-		"align": true
+		"align": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"style": "wp-block-calendar"
 }

package/src/calendar/index.js

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

package/src/calendar/init.js

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

package/src/categories/block.json

@@ -31,6 +31,10 @@
 	"supports": {
 		"align": true,
 		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/categories/edit.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { unescape } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -28,17 +29,20 @@ export default function CategoriesEdit( {
 		showEmpty,
 	},
 	setAttributes,
+	className,
 } ) {
 	const selectId = useInstanceId( CategoriesEdit, 'blocks-category-select' );
 	const query = { per_page: -1, hide_empty: ! showEmpty, context: 'view' };
 	if ( showOnlyTopLevel ) {
 		query.parent = 0;
 	}
+
 	const { records: categories, isResolving } = useEntityRecords(
 		'taxonomy',
 		'category',
 		query
 	);
+
 	const getCategoriesList = ( parentId ) => {
 		if ( ! categories?.length ) {
 			return [];
@@ -48,48 +52,41 @@ export default function CategoriesEdit( {
 		}
 		return categories.filter( ( { parent } ) => parent === parentId );
 	};
-	const getCategoryListClassName = ( level ) => {
-		return `wp-block-categories__list wp-block-categories__list-level-${ level }`;
-	};
+
 	const toggleAttribute = ( attributeName ) => ( newValue ) =>
 		setAttributes( { [ attributeName ]: newValue } );
+
 	const renderCategoryName = ( name ) =>
 		! name ? __( '(Untitled)' ) : unescape( name ).trim();
 
 	const renderCategoryList = () => {
 		const parentId = showHierarchy ? 0 : null;
 		const categoriesList = getCategoriesList( parentId );
-		return (
-			<ul className={ getCategoryListClassName( 0 ) }>
-				{ categoriesList.map( ( category ) =>
-					renderCategoryListItem( category, 0 )
-				) }
-			</ul>
+		return categoriesList.map( ( category ) =>
+			renderCategoryListItem( category, 0 )
 		);
 	};
-	const renderCategoryListItem = ( category, level ) => {
+
+	const renderCategoryListItem = ( category ) => {
 		const childCategories = getCategoriesList( category.id );
 		const { id, link, count, name } = category;
 		return (
-			<li key={ id }>
+			<li key={ id } className={ `cat-item cat-item-${ id }` }>
 				<a href={ link } target="_blank" rel="noreferrer noopener">
 					{ renderCategoryName( name ) }
 				</a>
-				{ showPostCounts && (
-					<span className="wp-block-categories__post-count">
-						{ ` (${ count })` }
-					</span>
-				) }
+				{ showPostCounts && ` (${ count })` }
 				{ showHierarchy && !! childCategories.length && (
-					<ul className={ getCategoryListClassName( level + 1 ) }>
+					<ul className="children">
 						{ childCategories.map( ( childCategory ) =>
-							renderCategoryListItem( childCategory, level + 1 )
+							renderCategoryListItem( childCategory )
 						) }
 					</ul>
 				) }
 			</li>
 		);
 	};
+
 	const renderCategoryDropdown = () => {
 		const parentId = showHierarchy ? 0 : null;
 		const categoriesList = getCategoriesList( parentId );
@@ -98,10 +95,8 @@ export default function CategoriesEdit( {
 				<VisuallyHidden as="label" htmlFor={ selectId }>
 					{ __( 'Categories' ) }
 				</VisuallyHidden>
-				<select
-					id={ selectId }
-					className="wp-block-categories__dropdown"
-				>
+				<select id={ selectId }>
+					<option>{ __( 'Select Category' ) }</option>
 					{ categoriesList.map( ( category ) =>
 						renderCategoryDropdownItem( category, 0 )
 					) }
@@ -109,11 +104,12 @@ export default function CategoriesEdit( {
 			</>
 		);
 	};
+
 	const renderCategoryDropdownItem = ( category, level ) => {
 		const { id, count, name } = category;
 		const childCategories = getCategoriesList( id );
 		return [
-			<option key={ id }>
+			<option key={ id } className={ `level-${ level }` }>
 				{ Array.from( { length: level * 3 } ).map( () => '\xa0' ) }
 				{ renderCategoryName( name ) }
 				{ showPostCounts && ` (${ count })` }
@@ -126,8 +122,24 @@ export default function CategoriesEdit( {
 		];
 	};
 
+	const TagName =
+		!! categories?.length && ! displayAsDropdown && ! isResolving
+			? 'ul'
+			: 'div';
+
+	const classes = classnames( className, {
+		'wp-block-categories-list':
+			!! categories?.length && ! displayAsDropdown && ! isResolving,
+		'wp-block-categories-dropdown':
+			!! categories?.length && displayAsDropdown && ! isResolving,
+	} );
+
+	const blockProps = useBlockProps( {
+		className: classes,
+	} );
+
 	return (
-		<div { ...useBlockProps() }>
+		<TagName { ...blockProps }>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
@@ -176,6 +188,6 @@ export default function CategoriesEdit( {
 				( displayAsDropdown
 					? renderCategoryDropdown()
 					: renderCategoryList() ) }
-		</div>
+		</TagName>
 	);
 }

package/src/categories/index.js

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

package/src/categories/index.php

@@ -76,7 +76,7 @@ function build_dropdown_script_block_core_categories( $dropdown_id ) {
 		var dropdown = document.getElementById( '<?php echo esc_js( $dropdown_id ); ?>' );
 		function onCatChange() {
 			if ( dropdown.options[ dropdown.selectedIndex ].value > 0 ) {
-				location.href = "<?php echo home_url(); ?>/?cat=" + dropdown.options[ dropdown.selectedIndex ].value;
+				location.href = "<?php echo esc_url( home_url() ); ?>/?cat=" + dropdown.options[ dropdown.selectedIndex ].value;
 			}
 		}
 		dropdown.onchange = onCatChange;

package/src/categories/init.js

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

package/src/categories/style.scss

@@ -1,4 +1,7 @@
 .wp-block-categories {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	&.alignleft {
 		/*rtl:ignore*/
 		margin-right: 2em;

package/src/code/editor.scss

@@ -0,0 +1,3 @@
+.wp-block-code code {
+	background: none;
+}

package/src/code/index.js

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

package/src/code/init.js

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

package/src/code/transforms.js

@@ -38,6 +38,15 @@ const transforms = {
 			},
 		},
 	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/paragraph' ],
+			transform: ( { content } ) => {
+				return createBlock( 'core/paragraph', { content } );
+			},
+		},
+	],
 };
 
 export default transforms;

package/src/code/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/column/block.json

@@ -19,7 +19,7 @@
 		},
 		"templateLock": {
 			"type": [ "string", "boolean" ],
-			"enum": [ "all", "insert", false ]
+			"enum": [ "all", "insert", "noContent", false ]
 		}
 	},
 	"supports": {

package/src/column/edit.js

@@ -25,12 +25,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
 
 function ColumnEdit( {
-	attributes: {
-		verticalAlignment,
-		width,
-		templateLock = false,
-		allowedBlocks,
-	},
+	attributes: { verticalAlignment, width, templateLock, allowedBlocks },
 	setAttributes,
 	clientId,
 } ) {