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

package/src/site-logo/editor.scss

@@ -31,13 +31,8 @@
 }
 
 // Provide special styling for the placeholder.
+// @todo: this particular minimal style of placeholder could be componentized further.
 .wp-block-site-logo.wp-block-site-logo {
-	// Inherit border radius from style variations.
-	.components-placeholder,
-	.components-resizable-box__container {
-		border-radius: inherit;
-	}
-
 	// Match the default logo size.
 	&.is-default-size .components-placeholder {
 		height: 120px;
@@ -46,10 +41,8 @@
 
 	// Style the placeholder.
 	.components-placeholder {
-		display: flex;
 		justify-content: center;
 		align-items: center;
-		box-shadow: none;
 		padding: 0;
 
 		// Provide a minimum size for the placeholder, for when the logo is resized.
@@ -66,52 +59,13 @@
 			display: none;
 		}
 
-		// Position the spinner.
-		.components-placeholder__preview {
-			position: absolute;
-			top: $grid-unit-05;
-			right: $grid-unit-05;
-			bottom: $grid-unit-05;
-			left: $grid-unit-05;
-			background: rgba($white, 0.8);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-
 		// Hide items.
 		.components-drop-zone__content-text {
 			display: none;
 		}
 
-		// Draw the dashed outline.
-		// By setting the dashed border to currentColor, we ensure it's visible
-		// against any background color.
-		color: currentColor;
-		background: transparent;
-		&::before {
-			content: "";
-			display: block;
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			border: $border-width dashed currentColor;
-			opacity: 0.4;
-			pointer-events: none;
-
-			// Inherit border radius from style variations.
-			border-radius: inherit;
-		}
-
 		// Style the upload button.
-		.components-placeholder__fieldset {
-			width: auto;
-		}
-
 		.components-button.components-button {
-			color: inherit;
 			padding: 0;
 			display: flex;
 			justify-content: center;
@@ -120,26 +74,14 @@
 			height: $grid-unit-60;
 			border-radius: 50%;
 			position: relative;
-			visibility: hidden;
-
-			// Animation.
-			background: transparent;
-			transition: all 0.1s linear;
-			@include reduce-motion("transition");
-		}
-
-		.components-button.components-button > svg {
+			background: var(--wp-admin-theme-color);
+			border-color: var(--wp-admin-theme-color);
+			border-style: solid;
 			color: $white;
-		}
-	}
 
-	// Show upload button on block selection.
-	&.is-selected .components-button.components-button {
-		background: var(--wp-admin-theme-color);
-		border-color: var(--wp-admin-theme-color);
-		border-style: solid;
-		color: $white;
-		opacity: 1;
-		visibility: visible;
+			> svg {
+				color: inherit;
+			}
+		}
 	}
 }

package/src/social-link/icons/reddit.js

@@ -5,6 +5,6 @@ import { Path, SVG } from '@wordpress/primitives';
 
 export const RedditIcon = () => (
 	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
-		<Path d="M22,11.816c0-1.256-1.021-2.277-2.277-2.277c-0.593,0-1.122,0.24-1.526,0.614c-1.481-0.965-3.455-1.594-5.647-1.69 l1.171-3.702l3.18,0.748c0.008,1.028,0.846,1.862,1.876,1.862c1.035,0,1.877-0.842,1.877-1.878c0-1.035-0.842-1.877-1.877-1.877 c-0.769,0-1.431,0.466-1.72,1.13l-3.508-0.826c-0.203-0.047-0.399,0.067-0.46,0.261l-1.35,4.268 c-2.316,0.038-4.411,0.67-5.97,1.671C5.368,9.765,4.853,9.539,4.277,9.539C3.021,9.539,2,10.56,2,11.816 c0,0.814,0.433,1.523,1.078,1.925c-0.037,0.221-0.061,0.444-0.061,0.672c0,3.292,4.011,5.97,8.941,5.97s8.941-2.678,8.941-5.97 c0-0.214-0.02-0.424-0.053-0.632C21.533,13.39,22,12.661,22,11.816z M18.776,4.394c0.606,0,1.1,0.493,1.1,1.1s-0.493,1.1-1.1,1.1 s-1.1-0.494-1.1-1.1S18.169,4.394,18.776,4.394z M2.777,11.816c0-0.827,0.672-1.5,1.499-1.5c0.313,0,0.598,0.103,0.838,0.269 c-0.851,0.676-1.477,1.479-1.812,2.36C2.983,12.672,2.777,12.27,2.777,11.816z M11.959,19.606c-4.501,0-8.164-2.329-8.164-5.193 S7.457,9.22,11.959,9.22s8.164,2.329,8.164,5.193S16.46,19.606,11.959,19.606z M20.636,13.001c-0.326-0.89-0.948-1.701-1.797-2.384 c0.248-0.186,0.55-0.301,0.883-0.301c0.827,0,1.5,0.673,1.5,1.5C21.223,12.299,20.992,12.727,20.636,13.001z M8.996,14.704 c-0.76,0-1.397-0.616-1.397-1.376c0-0.76,0.637-1.397,1.397-1.397c0.76,0,1.376,0.637,1.376,1.397 C10.372,14.088,9.756,14.704,8.996,14.704z M16.401,13.328c0,0.76-0.616,1.376-1.376,1.376c-0.76,0-1.399-0.616-1.399-1.376 c0-0.76,0.639-1.397,1.399-1.397C15.785,11.931,16.401,12.568,16.401,13.328z M15.229,16.708c0.152,0.152,0.152,0.398,0,0.55 c-0.674,0.674-1.727,1.002-3.219,1.002c-0.004,0-0.007-0.002-0.011-0.002c-0.004,0-0.007,0.002-0.011,0.002 c-1.492,0-2.544-0.328-3.218-1.002c-0.152-0.152-0.152-0.398,0-0.55c0.152-0.152,0.399-0.151,0.55,0 c0.521,0.521,1.394,0.775,2.669,0.775c0.004,0,0.007,0.002,0.011,0.002c0.004,0,0.007-0.002,0.011-0.002 c1.275,0,2.148-0.253,2.669-0.775C14.831,16.556,15.078,16.556,15.229,16.708z" />
+		<Path d="M22 12.068a2.184 2.184 0 0 0-2.186-2.186c-.592 0-1.13.233-1.524.609-1.505-1.075-3.566-1.774-5.86-1.864l1.004-4.695 3.261.699A1.56 1.56 0 1 0 18.255 3c-.61-.001-1.147.357-1.398.877l-3.638-.77a.382.382 0 0 0-.287.053.348.348 0 0 0-.161.251l-1.112 5.233c-2.33.072-4.426.77-5.95 1.864a2.201 2.201 0 0 0-1.523-.61 2.184 2.184 0 0 0-.896 4.176c-.036.215-.053.43-.053.663 0 3.37 3.924 6.111 8.763 6.111s8.763-2.724 8.763-6.11c0-.216-.017-.449-.053-.664A2.207 2.207 0 0 0 22 12.068Zm-15.018 1.56a1.56 1.56 0 0 1 3.118 0c0 .86-.699 1.558-1.559 1.558-.86.018-1.559-.699-1.559-1.559Zm8.728 4.139c-1.076 1.075-3.119 1.147-3.71 1.147-.61 0-2.652-.09-3.71-1.147a.4.4 0 0 1 0-.573.4.4 0 0 1 .574 0c.68.68 2.114.914 3.136.914 1.022 0 2.473-.233 3.136-.914a.4.4 0 0 1 .574 0 .436.436 0 0 1 0 .573Zm-.287-2.563a1.56 1.56 0 0 1 0-3.118c.86 0 1.56.699 1.56 1.56 0 .841-.7 1.558-1.56 1.558Z" />
 	</SVG>
 );

package/src/social-link/index.php

@@ -232,7 +232,7 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 		),
 		'reddit'        => array(
 			'name' => 'Reddit',
-			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M22,11.816c0-1.256-1.021-2.277-2.277-2.277c-0.593,0-1.122,0.24-1.526,0.614c-1.481-0.965-3.455-1.594-5.647-1.69 l1.171-3.702l3.18,0.748c0.008,1.028,0.846,1.862,1.876,1.862c1.035,0,1.877-0.842,1.877-1.878c0-1.035-0.842-1.877-1.877-1.877 c-0.769,0-1.431,0.466-1.72,1.13l-3.508-0.826c-0.203-0.047-0.399,0.067-0.46,0.261l-1.35,4.268 c-2.316,0.038-4.411,0.67-5.97,1.671C5.368,9.765,4.853,9.539,4.277,9.539C3.021,9.539,2,10.56,2,11.816 c0,0.814,0.433,1.523,1.078,1.925c-0.037,0.221-0.061,0.444-0.061,0.672c0,3.292,4.011,5.97,8.941,5.97s8.941-2.678,8.941-5.97 c0-0.214-0.02-0.424-0.053-0.632C21.533,13.39,22,12.661,22,11.816z M18.776,4.394c0.606,0,1.1,0.493,1.1,1.1s-0.493,1.1-1.1,1.1 s-1.1-0.494-1.1-1.1S18.169,4.394,18.776,4.394z M2.777,11.816c0-0.827,0.672-1.5,1.499-1.5c0.313,0,0.598,0.103,0.838,0.269 c-0.851,0.676-1.477,1.479-1.812,2.36C2.983,12.672,2.777,12.27,2.777,11.816z M11.959,19.606c-4.501,0-8.164-2.329-8.164-5.193 S7.457,9.22,11.959,9.22s8.164,2.329,8.164,5.193S16.46,19.606,11.959,19.606z M20.636,13.001c-0.326-0.89-0.948-1.701-1.797-2.384 c0.248-0.186,0.55-0.301,0.883-0.301c0.827,0,1.5,0.673,1.5,1.5C21.223,12.299,20.992,12.727,20.636,13.001z M8.996,14.704 c-0.76,0-1.397-0.616-1.397-1.376c0-0.76,0.637-1.397,1.397-1.397c0.76,0,1.376,0.637,1.376,1.397 C10.372,14.088,9.756,14.704,8.996,14.704z M16.401,13.328c0,0.76-0.616,1.376-1.376,1.376c-0.76,0-1.399-0.616-1.399-1.376 c0-0.76,0.639-1.397,1.399-1.397C15.785,11.931,16.401,12.568,16.401,13.328z M15.229,16.708c0.152,0.152,0.152,0.398,0,0.55 c-0.674,0.674-1.727,1.002-3.219,1.002c-0.004,0-0.007-0.002-0.011-0.002c-0.004,0-0.007,0.002-0.011,0.002 c-1.492,0-2.544-0.328-3.218-1.002c-0.152-0.152-0.152-0.398,0-0.55c0.152-0.152,0.399-0.151,0.55,0 c0.521,0.521,1.394,0.775,2.669,0.775c0.004,0,0.007,0.002,0.011,0.002c0.004,0,0.007-0.002,0.011-0.002 c1.275,0,2.148-0.253,2.669-0.775C14.831,16.556,15.078,16.556,15.229,16.708z"></path></svg>',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M22 12.068a2.184 2.184 0 0 0-2.186-2.186c-.592 0-1.13.233-1.524.609-1.505-1.075-3.566-1.774-5.86-1.864l1.004-4.695 3.261.699A1.56 1.56 0 1 0 18.255 3c-.61-.001-1.147.357-1.398.877l-3.638-.77a.382.382 0 0 0-.287.053.348.348 0 0 0-.161.251l-1.112 5.233c-2.33.072-4.426.77-5.95 1.864a2.201 2.201 0 0 0-1.523-.61 2.184 2.184 0 0 0-.896 4.176c-.036.215-.053.43-.053.663 0 3.37 3.924 6.111 8.763 6.111s8.763-2.724 8.763-6.11c0-.216-.017-.449-.053-.664A2.207 2.207 0 0 0 22 12.068Zm-15.018 1.56a1.56 1.56 0 0 1 3.118 0c0 .86-.699 1.558-1.559 1.558-.86.018-1.559-.699-1.559-1.559Zm8.728 4.139c-1.076 1.075-3.119 1.147-3.71 1.147-.61 0-2.652-.09-3.71-1.147a.4.4 0 0 1 0-.573.4.4 0 0 1 .574 0c.68.68 2.114.914 3.136.914 1.022 0 2.473-.233 3.136-.914a.4.4 0 0 1 .574 0 .436.436 0 0 1 0 .573Zm-.287-2.563a1.56 1.56 0 0 1 0-3.118c.86 0 1.56.699 1.56 1.56 0 .841-.7 1.558-1.56 1.558Z"></path></svg>',
 		),
 		'skype'         => array(
 			'name' => 'Skype',

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

@@ -124,7 +124,7 @@
 }
 
 .wp-social-link-reddit {
-	background-color: #fe4500;
+	background-color: #ff4500;
 	color: #fff;
 }
 

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

@@ -95,7 +95,7 @@
 }
 
 .wp-social-link-reddit {
-	color: #fe4500;
+	color: #ff4500;
 }
 
 .wp-social-link-skype {

package/src/social-links/edit.js

@@ -216,6 +216,7 @@ export function SocialLinksEdit( props ) {
 					__experimentalIsRenderedInSidebar
 					title={ __( 'Color' ) }
 					colorSettings={ colorSettings }
+					enableAlpha
 				>
 					{ ! logosOnly && (
 						<ContrastChecker

package/src/spacer/block.json

@@ -17,7 +17,13 @@
 	},
 	"usesContext": [ "orientation" ],
 	"supports": {
-		"anchor": true
+		"anchor": true,
+		"spacing": {
+			"margin": [ "top", "bottom" ],
+			"__experimentalDefaultControls": {
+				"margin": true
+			}
+		}
 	},
 	"editorStyle": "wp-block-spacer-editor",
 	"style": "wp-block-spacer"

package/src/style.scss

@@ -27,6 +27,7 @@
 @import "./paragraph/style.scss";
 @import "./post-author/style.scss";
 @import "./post-comments-form/style.scss";
+@import "./post-date/style.scss";
 @import "./post-excerpt/style.scss";
 @import "./post-featured-image/style.scss";
 @import "./post-terms/style.scss";
@@ -35,6 +36,7 @@
 @import "./pullquote/style.scss";
 @import "./post-template/style.scss";
 @import "./query-pagination/style.scss";
+@import "./query-title/style.scss";
 @import "./quote/style.scss";
 @import "./read-more/style.scss";
 @import "./rss/style.scss";

package/src/table/block.json

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

package/src/table/state.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { times, get, mapValues, every, pick } from 'lodash';
+import { get, mapValues, every, pick } from 'lodash';
 
 const INHERITED_COLUMN_ATTRIBUTES = [ 'align' ];
 
@@ -16,8 +16,8 @@ const INHERITED_COLUMN_ATTRIBUTES = [ 'align' ];
  */
 export function createTable( { rowCount, columnCount } ) {
 	return {
-		body: times( rowCount, () => ( {
-			cells: times( columnCount, () => ( {
+		body: Array.from( { length: rowCount } ).map( () => ( {
+			cells: Array.from( { length: columnCount } ).map( () => ( {
 				content: '',
 				tag: 'td',
 			} ) ),
@@ -167,23 +167,25 @@ export function insertRow( state, { sectionName, rowIndex, columnCount } ) {
 		[ sectionName ]: [
 			...state[ sectionName ].slice( 0, rowIndex ),
 			{
-				cells: times( cellCount, ( index ) => {
-					const firstCellInColumn = get(
-						firstRow,
-						[ 'cells', index ],
-						{}
-					);
-					const inheritedAttributes = pick(
-						firstCellInColumn,
-						INHERITED_COLUMN_ATTRIBUTES
-					);
+				cells: Array.from( { length: cellCount } ).map(
+					( _, index ) => {
+						const firstCellInColumn = get(
+							firstRow,
+							[ 'cells', index ],
+							{}
+						);
+						const inheritedAttributes = pick(
+							firstCellInColumn,
+							INHERITED_COLUMN_ATTRIBUTES
+						);
 
-					return {
-						...inheritedAttributes,
-						content: '',
-						tag: sectionName === 'head' ? 'th' : 'td',
-					};
-				} ),
+						return {
+							...inheritedAttributes,
+							content: '',
+							tag: sectionName === 'head' ? 'th' : 'td',
+						};
+					}
+				),
 			},
 			...state[ sectionName ].slice( rowIndex ),
 		],

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

@@ -21,7 +21,17 @@
 		}
 	},
 	"supports": {
-		"html": false
+		"html": false,
+		"color": {
+			"text": true,
+			"background": true,
+			"gradients": true,
+			"link": true
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		}
 	},
 	"example": {}
 }

package/src/tag-cloud/block.json

@@ -36,7 +36,11 @@
 	],
 	"supports": {
 		"html": false,
-		"align": true
+		"align": true,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		}
 	},
 	"editorStyle": "wp-block-tag-cloud-editor"
 }

package/src/template-part/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { startCase } from 'lodash';
+import { capitalCase } from 'change-case';
 
 /**
  * WordPress dependencies
@@ -41,7 +41,8 @@ export const settings = {
 		}
 
 		return (
-			decodeEntities( entity.title?.rendered ) || startCase( entity.slug )
+			decodeEntities( entity.title?.rendered ) ||
+			capitalCase( entity.slug )
 		);
 	},
 	edit,

package/src/term-description/block.json

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

package/src/text-columns/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, times } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -55,7 +55,7 @@ export default function TextColumnsEdit( { attributes, setAttributes } ) {
 					className: `align${ width } columns-${ columns }`,
 				} ) }
 			>
-				{ times( columns, ( index ) => {
+				{ Array.from( { length: columns } ).map( ( _, index ) => {
 					return (
 						<div
 							className="wp-block-column"

package/src/text-columns/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, times } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ export default function save( { attributes } ) {
 				className: `align${ width } columns-${ columns }`,
 			} ) }
 		>
-			{ times( columns, ( index ) => (
+			{ Array.from( { length: columns } ).map( ( _, index ) => (
 				<div className="wp-block-column" key={ `column-${ index }` }>
 					<RichText.Content
 						tagName="p"

package/src/verse/block.json

@@ -44,6 +44,7 @@
 			}
 		},
 		"spacing": {
+			"margin": true,
 			"padding": true
 		}
 	},

package/src/video/block.json

@@ -77,6 +77,10 @@
 	"supports": {
 		"anchor": true,
 		"align": true,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"__experimentalStyle": {
 			"spacing": {
 				"margin": "0 0 1em 0"

package/src/video/style.scss

@@ -1,4 +1,6 @@
 .wp-block-video {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 	video {
 		width: 100%;
 	}