@wordpress/block-editor 12.18.1 → 12.19.0

package/build-style/style.css

@@ -128,12 +128,12 @@ iframe[name=editor-canvas] {
   display: block;
 }
 
-iframe[name=editor-canvas]:not(.has-history) {
+iframe[name=editor-canvas]:not(.has-editor-padding) {
   background-color: #fff;
 }
 
-iframe[name=editor-canvas].has-history {
-  padding: 48px 48px 0;
+iframe[name=editor-canvas].has-editor-padding {
+  padding: 24px 24px 0;
 }
 
 .block-editor-block-icon {
@@ -539,13 +539,15 @@ iframe[name=editor-canvas].has-history {
 }
 .block-editor-block-card__title.block-editor-block-card__title {
   font-size: 13px;
-  line-height: 24px;
+  line-height: 1.4;
   margin: 0;
+  padding: 3px 0;
 }
 
 .block-editor-block-card__description {
   display: block;
   font-size: 13px;
+  line-height: 1.4;
   margin-top: 4px;
 }
 
@@ -700,13 +702,14 @@ iframe[name=editor-canvas].has-history {
   display: flex;
   padding: 0;
   border: none;
+  justify-content: center;
 }
 @media (min-width: 600px) {
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
     flex-direction: column;
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > * {
-    height: 24px;
+    height: 20px;
     width: 100%;
     min-width: 0 !important;
   }
@@ -714,11 +717,11 @@ iframe[name=editor-canvas].has-history {
     height: calc(100% - 4px);
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
-    top: 5px;
+    top: 3px;
     flex-shrink: 0;
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-down-button svg {
-    bottom: 5px;
+    bottom: 3px;
     flex-shrink: 0;
   }
   .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container {
@@ -1539,38 +1542,37 @@ iframe[name=editor-canvas].has-history {
   text-transform: capitalize;
 }
 
-.block-editor-global-styles-effects-panel__toggle-icon {
+.block-editor-global-styles__toggle-icon {
   fill: currentColor;
 }
 
-.block-editor-global-styles-effects-panel__shadow-popover-container {
+.block-editor-global-styles__shadow-popover-container {
   width: 230px;
 }
 
 .block-editor-global-styles-filters-panel__dropdown,
-.block-editor-global-styles-effects-panel__shadow-dropdown {
+.block-editor-global-styles__shadow-dropdown {
   display: block;
   padding: 0;
 }
 .block-editor-global-styles-filters-panel__dropdown button,
-.block-editor-global-styles-effects-panel__shadow-dropdown button {
+.block-editor-global-styles__shadow-dropdown button {
   width: 100%;
   padding: 8px;
 }
 .block-editor-global-styles-filters-panel__dropdown button.is-open,
-.block-editor-global-styles-effects-panel__shadow-dropdown button.is-open {
+.block-editor-global-styles__shadow-dropdown button.is-open {
   background-color: #f0f0f0;
 }
 
-.block-editor-global-styles-effects-panel__shadow-indicator-wrapper {
+.block-editor-global-styles__shadow-indicator-wrapper {
   padding: 6px;
-  overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.block-editor-global-styles-effects-panel__shadow-indicator {
+.block-editor-global-styles__shadow-indicator {
   color: #2f2f2f;
   border: #e0e0e0 1px solid;
   border-radius: 2px;
@@ -1957,7 +1959,7 @@ iframe[name=editor-canvas].has-history {
 .block-editor-link-control__search-item .block-editor-link-control__search-item-header {
   display: block;
   flex-direction: row;
-  align-items: flex-start;
+  align-items: center;
   margin-right: 8px;
   gap: 8px;
   white-space: pre-wrap;
@@ -2010,6 +2012,9 @@ iframe[name=editor-canvas].has-history {
   border-radius: 2px;
   line-height: 1.1;
 }
+.block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus {
+  box-shadow: none;
+}
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus-visible {
   box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
@@ -2098,11 +2103,6 @@ iframe[name=editor-canvas].has-history {
   position: relative;
 }
 
-.block-editor-link-control__unlink {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
 .block-editor-link-control__setting {
   margin-bottom: 0;
   flex: 1;
@@ -2171,11 +2171,6 @@ iframe[name=editor-canvas].has-history {
   right: 12px;
 }
 
-.block-editor-link-control__search-item-action {
-  margin-left: auto;
-  flex-shrink: 0;
-}
-
 .block-editor-list-view-tree {
   width: 100%;
   border-collapse: collapse;
@@ -2917,8 +2912,6 @@ iframe[name=editor-canvas].has-history {
 .block-editor-url-input input[type=text] {
   width: 100%;
   padding: 8px 8px 8px 12px;
-  border: none;
-  border-radius: 0;
   margin-left: 0;
   margin-right: 0;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
@@ -2931,6 +2924,11 @@ iframe[name=editor-canvas].has-history {
     width: 300px;
   }
 }
+.block-editor-block-list__block .block-editor-url-input input[type=text]:not(:focus),
+.components-popover .block-editor-url-input input[type=text]:not(:focus),
+.block-editor-url-input input[type=text]:not(:focus) {
+  border-color: transparent;
+}
 @media (min-width: 600px) {
   .block-editor-block-list__block .block-editor-url-input input[type=text],
 .components-popover .block-editor-url-input input[type=text],
@@ -3095,47 +3093,36 @@ iframe[name=editor-canvas].has-history {
 }
 
 .block-editor-url-popover__additional-controls {
-  border-top: 1px solid #ddd;
-}
-
-.block-editor-url-popover__additional-controls > div[role=menu] .components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary) > svg {
-  box-shadow: none;
+  border-top: 1px solid #1e1e1e;
+  padding: 8px 8px;
 }
 
-.block-editor-url-popover__additional-controls div[role=menu] > .components-button {
-  padding-left: 12px;
+.block-editor-url-popover__input-container {
+  padding: 8px;
 }
 
 .block-editor-url-popover__row {
   display: flex;
+  gap: 4px;
 }
 
 .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
   flex-grow: 1;
+  gap: 8px;
 }
 
-.block-editor-url-popover .components-button.has-icon {
-  padding: 3px;
-}
-.block-editor-url-popover .components-button.has-icon > svg {
-  padding: 5px;
-  border-radius: 2px;
-  height: 30px;
-  width: 30px;
-}
-.block-editor-url-popover .components-button.has-icon:not(:disabled):focus {
-  box-shadow: none;
+.block-editor-url-popover__additional-controls .components-button.has-icon {
+  padding-left: 8px;
+  padding-right: 8px;
+  height: auto;
+  text-align: left;
 }
-.block-editor-url-popover .components-button.has-icon:not(:disabled):focus > svg {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline: 2px solid transparent;
+.block-editor-url-popover__additional-controls .components-button.has-icon > svg {
+  margin-right: 8px;
 }
 
 .block-editor-url-popover__settings-toggle {
   flex-shrink: 0;
-  border-radius: 0;
-  border-left: 1px solid #ddd;
-  margin-left: 1px;
 }
 .block-editor-url-popover__settings-toggle[aria-expanded=true] .dashicon {
   transform: rotate(180deg);
@@ -3144,7 +3131,7 @@ iframe[name=editor-canvas].has-history {
 .block-editor-url-popover__settings {
   display: block;
   padding: 16px;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #1e1e1e;
 }
 
 .block-editor-url-popover__link-editor,
@@ -3153,19 +3140,38 @@ iframe[name=editor-canvas].has-history {
 }
 
 .block-editor-url-popover__link-viewer-url {
-  margin: 7px;
+  display: flex;
+  align-items: center;
   flex-grow: 1;
   flex-shrink: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  min-width: 150px;
-  max-width: 500px;
+  margin-right: 8px;
+  max-width: 350px;
 }
 .block-editor-url-popover__link-viewer-url.has-invalid-link {
   color: #cc1818;
 }
 
+.block-editor-url-popover__expand-on-click {
+  display: flex;
+  align-items: center;
+  min-width: 350px;
+  white-space: nowrap;
+}
+.block-editor-url-popover__expand-on-click .text {
+  flex-grow: 1;
+}
+.block-editor-url-popover__expand-on-click .text p {
+  margin: 0;
+  line-height: 16px;
+}
+.block-editor-url-popover__expand-on-click .text p.description {
+  color: #757575;
+  font-size: 12px;
+}
+
 .html-anchor-control .components-external-link {
   display: block;
   margin-top: 8px;
@@ -3420,6 +3426,35 @@ iframe[name=editor-canvas].has-history {
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
   overflow: auto;
   overflow-y: hidden;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable both-edges;
+  scrollbar-color: #e0e0e0 transparent;
+  will-change: transform;
+  scrollbar-gutter: auto;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar-thumb {
+  background-color: #e0e0e0;
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar:hover::-webkit-scrollbar-thumb, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus::-webkit-scrollbar-thumb, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus-within::-webkit-scrollbar-thumb {
+  background-color: #949494;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar:hover, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus-within {
+  scrollbar-color: #949494 transparent;
+}
+@media (hover: none) {
+  .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
+    scrollbar-color: #949494 transparent;
+  }
 }
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child::after,
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child .components-toolbar-group::after,
@@ -3444,7 +3479,10 @@ iframe[name=editor-canvas].has-history {
   position: absolute;
   font-size: 16px;
   right: 0;
-  bottom: 16px;
+  height: 32px;
+  top: 0;
+  display: inline-flex;
+  align-items: center;
 }
 
 .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
@@ -3657,9 +3695,6 @@ iframe[name=editor-canvas].has-history {
 .block-editor-inserter__search {
   padding: 16px 16px 0 16px;
 }
-.block-editor-inserter__search .components-search-control__icon {
-  right: 20px;
-}
 
 .block-editor-inserter__tabs {
   flex-grow: 1;
@@ -4119,13 +4154,8 @@ iframe[name=editor-canvas].has-history {
   justify-content: center;
   flex: 1;
 }
-.block-editor-inserter__media-panel .block-editor-inserter__media-panel-search.components-search-control input[type=search].components-search-control__input {
-  background: #fff;
-}
-.block-editor-inserter__media-panel .block-editor-inserter__media-panel-search.components-search-control button.components-button {
-  min-width: auto;
-  padding-left: 2px;
-  padding-right: 2px;
+.block-editor-inserter__media-panel .block-editor-inserter__media-panel-search:not(:focus-within) {
+  --wp-components-color-background: #fff;
 }
 
 .block-editor-inserter__media-list {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.18.1",
+	"version": "12.19.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,35 +35,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.50.0",
-		"@wordpress/api-fetch": "^6.47.0",
-		"@wordpress/blob": "^3.50.0",
-		"@wordpress/blocks": "^12.27.1",
-		"@wordpress/commands": "^0.21.0",
-		"@wordpress/components": "^25.16.0",
-		"@wordpress/compose": "^6.27.0",
-		"@wordpress/data": "^9.20.0",
-		"@wordpress/date": "^4.50.0",
-		"@wordpress/deprecated": "^3.50.0",
-		"@wordpress/dom": "^3.50.0",
-		"@wordpress/element": "^5.27.0",
-		"@wordpress/escape-html": "^2.50.0",
-		"@wordpress/hooks": "^3.50.0",
-		"@wordpress/html-entities": "^3.50.0",
-		"@wordpress/i18n": "^4.50.0",
-		"@wordpress/icons": "^9.41.0",
-		"@wordpress/is-shallow-equal": "^4.50.0",
-		"@wordpress/keyboard-shortcuts": "^4.27.0",
-		"@wordpress/keycodes": "^3.50.0",
-		"@wordpress/notices": "^4.18.0",
-		"@wordpress/preferences": "^3.27.0",
-		"@wordpress/private-apis": "^0.32.0",
-		"@wordpress/rich-text": "^6.27.0",
-		"@wordpress/style-engine": "^1.33.1",
-		"@wordpress/token-list": "^2.50.0",
-		"@wordpress/url": "^3.51.0",
-		"@wordpress/warning": "^2.50.0",
-		"@wordpress/wordcount": "^3.50.0",
+		"@wordpress/a11y": "^3.51.0",
+		"@wordpress/api-fetch": "^6.48.0",
+		"@wordpress/blob": "^3.51.0",
+		"@wordpress/blocks": "^12.28.0",
+		"@wordpress/commands": "^0.22.0",
+		"@wordpress/components": "^26.0.0",
+		"@wordpress/compose": "^6.28.0",
+		"@wordpress/data": "^9.21.0",
+		"@wordpress/date": "^4.51.0",
+		"@wordpress/deprecated": "^3.51.0",
+		"@wordpress/dom": "^3.51.0",
+		"@wordpress/element": "^5.28.0",
+		"@wordpress/escape-html": "^2.51.0",
+		"@wordpress/hooks": "^3.51.0",
+		"@wordpress/html-entities": "^3.51.0",
+		"@wordpress/i18n": "^4.51.0",
+		"@wordpress/icons": "^9.42.0",
+		"@wordpress/is-shallow-equal": "^4.51.0",
+		"@wordpress/keyboard-shortcuts": "^4.28.0",
+		"@wordpress/keycodes": "^3.51.0",
+		"@wordpress/notices": "^4.19.0",
+		"@wordpress/preferences": "^3.28.0",
+		"@wordpress/private-apis": "^0.33.0",
+		"@wordpress/rich-text": "^6.28.0",
+		"@wordpress/style-engine": "^1.34.0",
+		"@wordpress/token-list": "^2.51.0",
+		"@wordpress/url": "^3.52.0",
+		"@wordpress/warning": "^2.51.0",
+		"@wordpress/wordcount": "^3.51.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -87,5 +87,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c2f6d07ffab7d68b9ac3c423ce7e11af91f6e45e"
+	"gitHead": "eb796371e9630636a4a8837033807b0c4a06ed67"
 }

package/src/components/block-canvas/style.scss

@@ -4,10 +4,10 @@ iframe[name="editor-canvas"] {
 	display: block;
 }
 
-iframe[name="editor-canvas"]:not(.has-history) {
+iframe[name="editor-canvas"]:not(.has-editor-padding) {
 	background-color: $white;
 }
 
-iframe[name="editor-canvas"].has-history {
-	padding: $grid-unit-60 $grid-unit-60 0;
+iframe[name="editor-canvas"].has-editor-padding {
+	padding: $grid-unit-30 $grid-unit-30 0;
 }

package/src/components/block-card/style.scss

@@ -14,14 +14,16 @@
 
 	&.block-editor-block-card__title {
 		font-size: $default-font-size;
-		line-height: $button-size-small;
+		line-height: $default-line-height;
 		margin: 0;
+		padding: 3px 0; // This makes the title as high as the icon.
 	}
 }
 
 .block-editor-block-card__description {
 	display: block;
 	font-size: $default-font-size;
+	line-height: $default-line-height;
 	margin-top: $grid-unit-05;
 }
 

package/src/components/block-controls/README.md

@@ -49,7 +49,7 @@ export default function MyBlockEdit( { attributes, setAttributes } ) {
 <MyBlockEdit />;
 ```
 
-See [this custom block tutorial page](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md) for more information and block controls examples.
+See [this custom block tutorial page](/docs/getting-started/fundamentals/block-in-the-editor.md) for more information and block controls examples.
 
 Furthermore, the READMEs of various components inside the block editor package and the components package include examples that also utilize `BlockControls` and can be a good reference.
 
@@ -69,7 +69,7 @@ Group of the block controls. Allows you to create and render multiple groups of
 
 Allows overriding the default `controls` if the `default` group is used. 
 
-See [this custom block tutorial page](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md) for more details and examples with block controls.
+See [this custom block tutorial page](/docs/getting-started/fundamentals/block-in-the-editor.md) for more details and examples with block controls.
 
 - Type: `array`
 

package/src/components/block-inspector/index.js

@@ -30,6 +30,7 @@ import PositionControls from '../inspector-controls-tabs/position-controls-panel
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
 import BlockInfo from '../block-info-slot-fill';
 import BlockQuickNavigation from '../block-quick-navigation';
+import { getBorderPanelLabel } from '../../hooks/border';
 
 function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 	const contentClientIds = useSelect(
@@ -56,9 +57,11 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 			/>
 			<BlockVariationTransforms blockClientId={ topLevelLockedBlock } />
 			<BlockInfo.Slot />
-			<PanelBody title={ __( 'Content' ) }>
-				<BlockQuickNavigation clientIds={ contentClientIds } />
-			</PanelBody>
+			{ contentClientIds.length > 0 && (
+				<PanelBody title={ __( 'Content' ) }>
+					<BlockQuickNavigation clientIds={ contentClientIds } />
+				</PanelBody>
+			) }
 		</div>
 	);
 }
@@ -137,7 +140,9 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 						/>
 						<InspectorControls.Slot
 							group="border"
-							label={ __( 'Border' ) }
+							label={ getBorderPanelLabel( {
+								blockName: selectedBlockName,
+							} ) }
 						/>
 						<InspectorControls.Slot group="styles" />
 					</>
@@ -246,6 +251,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 		[ blockName ]
 	);
 	const blockInformation = useBlockDisplayInformation( clientId );
+	const borderPanelLabel = getBorderPanelLabel( { blockName } );
 
 	return (
 		<div className="block-editor-block-inspector">
@@ -298,7 +304,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 					/>
 					<InspectorControls.Slot
 						group="border"
-						label={ __( 'Border' ) }
+						label={ borderPanelLabel }
 					/>
 					<InspectorControls.Slot group="styles" />
 					<InspectorControls.Slot
@@ -306,10 +312,6 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						label={ __( 'Background' ) }
 					/>
 					<PositionControls />
-					<InspectorControls.Slot
-						group="effects"
-						label={ __( 'Effects' ) }
-					/>
 					<div>
 						<AdvancedControls />
 					</div>