@wordpress/block-library 6.0.5 → 6.0.9

package/src/post-featured-image/editor.scss

@@ -1,33 +1,137 @@
-div[data-type="core/post-featured-image"] {
-	img {
-		max-width: 100%;
-		height: auto;
-		display: block;
+// Give the featured image placeholder the appearance of a literal image placeholder.
+// @todo: this CSS is similar to that of the Site Logo. That makes it an opportunity
+// to create a new component for placeholders meant to inherit some theme styles.
+.wp-block-post-featured-image.wp-block-post-featured-image {
+	// Inherit border radius from style variations.
+	.components-placeholder,
+	.components-resizable-box__container {
+		border-radius: inherit;
 	}
-}
 
-.editor-styles-wrapper {
-	.post-featured-image_placeholder {
-		display: flex;
-		flex-direction: row;
+	// Style the placeholder.
+	.wp-block-post-featured-image__placeholder,
+	.components-placeholder {
+		justify-content: center;
 		align-items: center;
-		border-radius: $radius-block-ui;
-		background-color: $white;
-		box-shadow: inset 0 0 0 $border-width $gray-900;
-		padding: $grid-unit-15;
-		svg {
-			margin-right: $grid-unit-15;
+		box-shadow: none;
+		padding: 0;
+
+		// Hide the upload button, as it's also available in the media library.
+		.components-form-file-upload {
+			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;
+		}
+
+		// 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.3;
+			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;
+			align-items: center;
+			width: $grid-unit-60;
+			height: $grid-unit-60;
+			border-radius: 50%;
+			position: relative;
+			visibility: hidden;
+
+			// Animation.
+			background: transparent;
+			transition: all 0.1s linear;
+			@include reduce-motion("transition");
 		}
-		p {
-			font-family: $default-font;
-			font-size: $default-font-size;
-			margin: 0;
+
+		.components-button.components-button > svg {
+			color: $white;
+		}
+
+		// Style the placeholder illustration.
+		.components-placeholder__illustration {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			stroke: currentColor;
+			stroke-dasharray: 3;
+			opacity: 0.3;
 		}
+
+		// Show default placeholder height when not resized.
+		min-height: 200px;
+	}
+
+	// Provide a minimum size for the placeholder when resized.
+	// Note, this should be as small as we can afford it, and exists only
+	// to ensure there's room for the upload button.
+	&[style*="height"] .components-placeholder {
+		min-height: $grid-unit-60;
+		min-width: $grid-unit-60;
+		height: 100%;
+		width: 100%;
+	}
+
+	// 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;
+	}
+}
+
+div[data-type="core/post-featured-image"] {
+	img {
+		max-width: 100%;
+		height: auto;
+		display: block;
 	}
 }
 
 .block-library-post-featured-image-dimension-controls {
 	margin-bottom: $grid-unit-10;
+
 	&.scale-control-is-visible {
 		margin-bottom: $grid-unit-20;
 	}

package/src/site-logo/editor.scss

@@ -57,6 +57,7 @@
 		width: 120px;
 	}
 
+	// Style the placeholder.
 	.components-placeholder {
 		justify-content: center;
 		align-items: center;

package/src/social-links/editor.scss

@@ -37,7 +37,6 @@
 		display: flex;
 	}
 
-	& + .block-list-appender,
 	.wp-social-link {
 		padding: 0.25em;
 
@@ -66,6 +65,7 @@
 
 // Selected placeholder state.
 .wp-block-social-links .wp-block-social-links__social-prompt {
+	min-height: $button-size-small;
 	list-style: none;
 	order: 2; // Move after the appender button. Because this element is non-interactive, it does not affect tab order.
 
@@ -77,52 +77,6 @@
 	margin-bottom: auto;
 	cursor: default;
 	padding-right: $grid-unit-10;
-
-	& + .block-list-appender {
-		margin-right: $grid-unit-10;
-		padding: 0.25em;
-	}
-}
-
-// Polish the Appender.
-.wp-block-social-links .block-list-appender {
-	// Match the overall silhouette of social links.
-	margin: 4px auto 4px 0;
-	border-radius: 9999px; // This works as both circular and pill shapes.
-
-	// Treat just like a social icon.
-	.block-editor-inserter {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: inherit;
-		width: 1em;
-		height: 1em;
-	}
-
-	// Duplicate the font sizes from style.scss to size the appender.
-	.has-small-icon-size & {
-		font-size: 16px; // 16 makes for a quarter-padding that keeps the icon centered.
-	}
-
-	// Normal/default.
-	.has-normal-icon-size & {
-		font-size: 24px;
-	}
-
-	// Large.
-	.has-large-icon-size & {
-		font-size: 36px;
-	}
-
-	// Huge.
-	.has-huge-icon-size & {
-		font-size: 48px;
-	}
-
-	&::before {
-		content: none;
-	}
 }
 
 // Center flex items. This has an equivalent in style.scss.

package/src/style.scss

@@ -19,7 +19,6 @@
 @import "./media-text/style.scss";
 @import "./navigation/style.scss";
 @import "./navigation-link/style.scss";
-@import "./navigation-submenu/style.scss";
 @import "./home-link/style.scss";
 @import "./page-list/style.scss";
 @import "./paragraph/style.scss";

package/src/table-of-contents/index.php

@@ -2,7 +2,7 @@
 /**
  * Server-side rendering of the `core/table-of-contents` block.
  *
- * @package gutenberg
+ * @package WordPress
  */
 
 /**

package/build-style/navigation-submenu/style-rtl.css

@@ -1,97 +0,0 @@
-/**
- * Colors
- */
-/**
- * Breakpoints & Media Queries
- */
-/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
-/**
- * Colors
- */
-/**
- * Fonts & basic variables.
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Dimensions.
- */
-/**
- * Shadows.
- */
-/**
- * Editor widths.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
-/**
- * Breakpoint mixins
- */
-/**
- * Long content fade mixin
- *
- * Creates a fading overlay to signify that the content is longer
- * than the space allows.
- */
-/**
- * Focus styles.
- */
-/**
- * Applies editor left position to the selector passed as argument
- */
-/**
- * Styles that are reused verbatim in a few places
- */
-/**
- * Allows users to opt-out of animations via OS-level preferences.
- */
-/**
- * Reset default styles for JavaScript UI based pages.
- * This is a WP-admin agnostic reset
- */
-/**
- * Reset the WP Admin page styles for Gutenberg-like pages.
- */
-.wp-block-navigation-submenu {
-  position: relative;
-  display: flex;
-}
-.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {
-  stroke: currentColor;
-}
-
-button.wp-block-navigation-item__content {
-  background-color: transparent;
-  border: none;
-  color: currentColor;
-  font-size: inherit;
-  font-family: inherit;
-  line-height: inherit;
-  text-align: right;
-}
-
-.wp-block-navigation-submenu__toggle {
-  cursor: pointer;
-}

package/build-style/navigation-submenu/style.css

@@ -1,97 +0,0 @@
-/**
- * Colors
- */
-/**
- * Breakpoints & Media Queries
- */
-/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
-/**
- * Colors
- */
-/**
- * Fonts & basic variables.
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Dimensions.
- */
-/**
- * Shadows.
- */
-/**
- * Editor widths.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
-/**
- * Breakpoint mixins
- */
-/**
- * Long content fade mixin
- *
- * Creates a fading overlay to signify that the content is longer
- * than the space allows.
- */
-/**
- * Focus styles.
- */
-/**
- * Applies editor left position to the selector passed as argument
- */
-/**
- * Styles that are reused verbatim in a few places
- */
-/**
- * Allows users to opt-out of animations via OS-level preferences.
- */
-/**
- * Reset default styles for JavaScript UI based pages.
- * This is a WP-admin agnostic reset
- */
-/**
- * Reset the WP Admin page styles for Gutenberg-like pages.
- */
-.wp-block-navigation-submenu {
-  position: relative;
-  display: flex;
-}
-.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {
-  stroke: currentColor;
-}
-
-button.wp-block-navigation-item__content {
-  background-color: transparent;
-  border: none;
-  color: currentColor;
-  font-size: inherit;
-  font-family: inherit;
-  line-height: inherit;
-  text-align: left;
-}
-
-.wp-block-navigation-submenu__toggle {
-  cursor: pointer;
-}

package/src/navigation-submenu/style.scss

@@ -1,25 +0,0 @@
-.wp-block-navigation-submenu {
-	position: relative;
-	display: flex;
-
-	.wp-block-navigation__submenu-icon svg {
-		stroke: currentColor;
-	}
-}
-
-button.wp-block-navigation-item__content {
-	background-color: transparent;
-	border: none;
-	color: currentColor;
-	font-size: inherit;
-	font-family: inherit;
-	line-height: inherit;
-
-	// Buttons default to center alignment. This becomes visible
-	// when a menu item label is long enough to wrap.
-	text-align: left;
-}
-
-.wp-block-navigation-submenu__toggle {
-	cursor: pointer;
-}