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

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/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", "contentOnly", 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,
 } ) {

package/src/column/index.js

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

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

package/src/columns/block.json

@@ -29,7 +29,8 @@
 		},
 		"spacing": {
 			"blockGap": {
-				"__experimentalDefault": "2em"
+				"__experimentalDefault": "2em",
+				"sides": [ "horizontal", "vertical" ]
 			},
 			"margin": [ "top", "bottom" ],
 			"padding": true,

package/src/columns/index.js

@@ -7,6 +7,7 @@ import { columns 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';
@@ -83,3 +84,5 @@ export const settings = {
 	save,
 	transforms,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/columns/init.js

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

package/src/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/comment-author-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/comment-author-avatar/init.js

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

package/src/comment-author-name/index.js

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

package/src/comment-author-name/init.js

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

package/src/comment-content/index.js

@@ -6,6 +6,7 @@ import { commentContent 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/comment-content/init.js

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

package/src/comment-date/block.json

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

package/src/comment-date/edit.js

@@ -2,10 +2,7 @@
  * WordPress dependencies
  */
 import { useEntityProp } from '@wordpress/core-data';
-import {
-	dateI18n,
-	__experimentalGetSettings as getDateSettings,
-} from '@wordpress/date';
+import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
 import {
 	InspectorControls,
 	useBlockProps,

package/src/comment-date/index.js

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

package/src/comment-date/init.js

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

package/src/comment-edit-link/block.json

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

package/src/comment-edit-link/index.js

@@ -6,6 +6,7 @@ import { commentEditLink 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/comment-edit-link/init.js

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

package/src/comment-reply-link/block.json

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

package/src/comment-reply-link/index.js

@@ -6,6 +6,7 @@ import { commentReplyLink 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 = {
 	edit,
 	icon,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/comment-reply-link/init.js

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

package/src/comment-template/index.js

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

package/src/comment-template/init.js

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

package/src/comments/edit/comments-legacy.js

@@ -57,11 +57,10 @@ export default function CommentsLegacy( {
 			<div { ...blockProps }>
 				<Warning actions={ actions }>
 					{ __(
-						"Comments block: You're currently using this block in legacy mode. " +
-							'The following is just a placeholder, not a real comment. ' +
-							'The final styling may differ because it also depends on the current theme. ' +
-							'For better compatibility with the Block Editor, ' +
-							'please consider switching the block to its editable mode.'
+						"Comments block: You're currently using the legacy version of the block. " +
+							'The following is just a placeholder - the final styling will likely look different. ' +
+							'For a better representation and more customization options, ' +
+							'switch the block to its editable mode.'
 					) }
 				</Warning>
 				<Placeholder postId={ postId } postType={ postType } />

package/src/comments/index.js

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

package/src/comments/index.php

@@ -109,7 +109,7 @@ add_action( 'init', 'register_block_core_comments' );
  */
 function comments_block_form_defaults( $fields ) {
 	if ( wp_is_block_theme() ) {
-		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' ) . '" value="%4$s" />';
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . wp_theme_get_element_class_name( 'button' ) . '" value="%4$s" />';
 		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
 	}
 

package/src/comments/init.js

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

package/src/comments-pagination/edit.js

@@ -23,6 +23,11 @@ const TEMPLATE = [
 	[ 'core/comments-pagination-numbers' ],
 	[ 'core/comments-pagination-next' ],
 ];
+const ALLOWED_BLOCKS = [
+	'core/comments-pagination-previous',
+	'core/comments-pagination-numbers',
+	'core/comments-pagination-next',
+];
 
 const getDefaultBlockLayout = ( blockTypeOrName ) => {
 	const layoutBlockSupportConfig = getBlockSupport(
@@ -58,11 +63,7 @@ export default function QueryPaginationEdit( {
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
-		allowedBlocks: [
-			'core/comments-pagination-previous',
-			'core/comments-pagination-numbers',
-			'core/comments-pagination-next',
-		],
+		allowedBlocks: ALLOWED_BLOCKS,
 		__experimentalLayout: usedLayout,
 	} );
 

package/src/comments-pagination/index.js

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

package/src/comments-pagination/init.js

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

package/src/comments-pagination-next/index.js

@@ -6,6 +6,7 @@ import { queryPaginationNext 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/comments-pagination-next/init.js

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