.block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
+ height: $block-toolbar-height * 0.5 - $grid-unit-05;
+ width: 100%;
+ min-width: 0 !important; // overrides default button width.
+
+ // Focus style.
+ &::before {
+ height: calc(100% - 4px);
+ }
+ }
+
+ .block-editor-grid-item-mover-button.is-up-button svg,
+ .block-editor-grid-item-mover-button.is-down-button svg {
+ flex-shrink: 0;
+ height: $block-toolbar-height * 0.5 - $grid-unit-05;
+ }
+ }
+}
+
+.show-icon-labels {
+
+ .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-left-button {
+ border-right: 1px solid $gray-700;
+ padding-right: 12px;
+ }
+
+ .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-right-button {
+ border-left: 1px solid $gray-700;
+ padding-left: 12px;
+ }
+
+
+ .block-editor-grid-item-mover__move-vertical-button-container {
+ &::before {
+ @include break-small() {
+ content: "";
+ height: $border-width;
+ width: 100%;
+ background: $gray-200;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ // With Top toolbar enabled, this separator has a smaller width. Translating the
+ // X axis allows to make the separator always centered regardless of its width.
+ transform: translate(-50%, 0);
+ margin-top: -$border-width * 0.5;
+ }
+
+ @include break-medium {
+ background: $gray-900;
+ }
+ }
+ }
+
+}
+
diff --git a/packages/block-editor/src/components/grid/use-grid-layout-sync.js b/packages/block-editor/src/components/grid/use-grid-layout-sync.js
index a5d6aa4d3fbdd7..ed368714d63d34 100644
--- a/packages/block-editor/src/components/grid/use-grid-layout-sync.js
+++ b/packages/block-editor/src/components/grid/use-grid-layout-sync.js
@@ -2,7 +2,8 @@
* WordPress dependencies
*/
import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
/**
* Internal dependencies
@@ -11,13 +12,15 @@ import { store as blockEditorStore } from '../../store';
import { GridRect } from './utils';
export function useGridLayoutSync( { clientId: gridClientId } ) {
- const { gridLayout, blockOrder } = useSelect(
+ const { gridLayout, blockOrder, selectedBlockLayout } = useSelect(
( select ) => {
const { getBlockAttributes, getBlockOrder } =
select( blockEditorStore );
+ const selectedBlock = select( blockEditorStore ).getSelectedBlock();
return {
gridLayout: getBlockAttributes( gridClientId ).layout ?? {},
blockOrder: getBlockOrder( gridClientId ),
+ selectedBlockLayout: selectedBlock?.attributes.style?.layout,
};
},
[ gridClientId ]
@@ -27,27 +30,32 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
useDispatch( blockEditorStore );
+ const selectedBlockRect = useMemo(
+ () =>
+ selectedBlockLayout ? new GridRect( selectedBlockLayout ) : null,
+ [ selectedBlockLayout ]
+ );
+
+ const previouslySelectedBlockRect = usePrevious( selectedBlockRect );
+
useEffect( () => {
const updates = {};
- const { columnCount, rowCount, isManualPlacement } = gridLayout;
-
- if ( isManualPlacement ) {
- const rects = [];
+ if ( gridLayout.isManualPlacement ) {
+ const occupiedRects = [];
// Respect the position of blocks that already have a columnStart and rowStart value.
for ( const clientId of blockOrder ) {
- const attributes = getBlockAttributes( clientId );
const {
columnStart,
rowStart,
columnSpan = 1,
rowSpan = 1,
- } = attributes.style?.layout || {};
+ } = getBlockAttributes( clientId ).style?.layout ?? {};
if ( ! columnStart || ! rowStart ) {
continue;
}
- rects.push(
+ occupiedRects.push(
new GridRect( {
columnStart,
rowStart,
@@ -65,17 +73,19 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
rowStart,
columnSpan = 1,
rowSpan = 1,
- } = attributes.style?.layout || {};
+ } = attributes.style?.layout ?? {};
if ( columnStart && rowStart ) {
continue;
}
- const [ newColumnStart, newRowStart ] = getFirstEmptyCell(
- rects,
- columnCount,
+ const [ newColumnStart, newRowStart ] = placeBlock(
+ occupiedRects,
+ gridLayout.columnCount,
columnSpan,
- rowSpan
+ rowSpan,
+ previouslySelectedBlockRect?.columnEnd,
+ previouslySelectedBlockRect?.rowEnd
);
- rects.push(
+ occupiedRects.push(
new GridRect( {
columnStart: newColumnStart,
rowStart: newRowStart,
@@ -96,8 +106,13 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
}
// Ensure there's enough rows to fit all blocks.
- const bottomMostRow = Math.max( ...rects.map( ( r ) => r.rowEnd ) );
- if ( ! rowCount || rowCount < bottomMostRow ) {
+ const bottomMostRow = Math.max(
+ ...occupiedRects.map( ( r ) => r.rowEnd )
+ );
+ if (
+ ! gridLayout.rowCount ||
+ gridLayout.rowCount < bottomMostRow
+ ) {
updates[ gridClientId ] = {
layout: {
...gridLayout,
@@ -110,7 +125,7 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
for ( const clientId of blockOrder ) {
const attributes = getBlockAttributes( clientId );
const { columnStart, rowStart, ...layout } =
- attributes.style?.layout || {};
+ attributes.style?.layout ?? {};
// Only update attributes if columnStart or rowStart are set.
if ( columnStart || rowStart ) {
updates[ clientId ] = {
@@ -123,7 +138,7 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
}
// Remove row styles in auto mode
- if ( rowCount ) {
+ if ( gridLayout.rowCount ) {
updates[ gridClientId ] = {
layout: {
...gridLayout,
@@ -146,23 +161,47 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
gridClientId,
gridLayout,
blockOrder,
- // Needed for linter:
+ previouslySelectedBlockRect,
+ // These won't change, but the linter thinks they might:
__unstableMarkNextChangeAsNotPersistent,
getBlockAttributes,
updateBlockAttributes,
] );
}
-function getFirstEmptyCell( rects, columnCount, columnSpan = 1, rowSpan = 1 ) {
- for ( let row = 1; ; row++ ) {
- for ( let column = 1; column <= columnCount; column++ ) {
- const rect = new GridRect( {
+/**
+ * @param {GridRect[]} occupiedRects
+ * @param {number} gridColumnCount
+ * @param {number} blockColumnSpan
+ * @param {number} blockRowSpan
+ * @param {number?} startColumn
+ * @param {number?} startRow
+ */
+function placeBlock(
+ occupiedRects,
+ gridColumnCount,
+ blockColumnSpan,
+ blockRowSpan,
+ startColumn = 1,
+ startRow = 1
+) {
+ for ( let row = startRow; ; row++ ) {
+ for (
+ let column = row === startRow ? startColumn : 1;
+ column <= gridColumnCount;
+ column++
+ ) {
+ const candidateRect = new GridRect( {
columnStart: column,
rowStart: row,
- columnSpan,
- rowSpan,
+ columnSpan: blockColumnSpan,
+ rowSpan: blockRowSpan,
} );
- if ( ! rects.some( ( r ) => r.intersectsRect( rect ) ) ) {
+ if (
+ ! occupiedRects.some( ( r ) =>
+ r.intersectsRect( candidateRect )
+ )
+ ) {
return [ column, row ];
}
}
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index db947a01a91dc4..27e5064eeb6328 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -132,7 +132,10 @@ function UncontrolledInnerBlocks( props ) {
/>
);
- if ( Object.keys( blockType.providesContext ).length === 0 ) {
+ if (
+ ! blockType?.providesContext ||
+ Object.keys( blockType.providesContext ).length === 0
+ ) {
return items;
}
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 631c7f727ddc41..f6b5d9fe84c1d1 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -228,6 +228,13 @@ $block-inserter-tabs-height: 44px;
margin-top: auto;
}
+ // Temporarily disable the component's indicator animation.
+ // TODO: remove in favor of using the native component's styles and behavior,
+ // see https://github.com/WordPress/gutenberg/pull/62879#issuecomment-2219720582
+ &[aria-orientation="vertical"]::after {
+ content: none;
+ }
+
.block-editor-inserter__category-tab {
// Account for the icon on the right so that it's visually balanced.
padding: $grid-unit-10 $grid-unit-05 $grid-unit-10 $grid-unit-15;
diff --git a/packages/block-editor/src/components/url-popover/style.scss b/packages/block-editor/src/components/url-popover/style.scss
index 324d82d4183aab..8c9d867071017d 100644
--- a/packages/block-editor/src/components/url-popover/style.scss
+++ b/packages/block-editor/src/components/url-popover/style.scss
@@ -10,6 +10,7 @@
.block-editor-url-popover__row {
display: flex;
gap: $grid-unit-05;
+ align-items: center;
}
// Any children of the popover-row that are not the settings-toggle
diff --git a/packages/block-editor/src/hooks/grid-visualizer.js b/packages/block-editor/src/hooks/grid-visualizer.js
index 42b45952d45d15..ffad5edd9842c4 100644
--- a/packages/block-editor/src/hooks/grid-visualizer.js
+++ b/packages/block-editor/src/hooks/grid-visualizer.js
@@ -26,14 +26,12 @@ function GridTools( { clientId, layout } ) {
};
} );
- if ( ! isSelected && ! isDragging ) {
- return null;
- }
-
return (
<>
-
{ name }
@@ -69,7 +93,7 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
// TODO: Legacy classname. Add V1 styles are removed from the codebase
// className="components-custom-select-control__item-hint"
>
- { __experimentalHint }
+ { hint }
);
@@ -78,7 +102,7 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
{ currentValue }
-
- { currentHint?.__experimentalHint }
-
+ { selectedOptionHint && (
+
+ { selectedOptionHint }
+
+ ) }
);
};
@@ -131,9 +156,7 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
<_CustomSelect
aria-describedby={ describedBy }
renderSelectedValue={
- __experimentalShowSelectedHint
- ? renderSelectedValueHint
- : undefined
+ showSelectedHint ? renderSelectedValueHint : undefined
}
size={ translatedSize }
store={ store }
diff --git a/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx
index 1e361236aafd9a..496b42572d82f6 100644
--- a/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx
+++ b/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx
@@ -297,7 +297,7 @@ describe.each( [
{
key: 'one',
name: 'One',
- __experimentalHint: 'Hint',
+ hint: 'Hint',
},
] }
/>
@@ -309,7 +309,7 @@ describe.each( [
);
} );
- it( 'shows selected hint when __experimentalShowSelectedHint is set', async () => {
+ it( 'shows selected hint when showSelectedHint is set', async () => {
render(
);
},
- width: 50,
enableSorting: false,
},
{
header: 'Title',
id: 'title',
- maxWidth: 400,
enableHiding: false,
enableGlobalSearch: true,
},
{
header: 'Type',
id: 'type',
- maxWidth: 400,
enableHiding: false,
elements: [
{ value: 'Not a planet', label: 'Not a planet' },
@@ -197,7 +194,6 @@ export const fields = [
{
header: 'Description',
id: 'description',
- maxWidth: 200,
enableSorting: false,
enableGlobalSearch: true,
},
diff --git a/packages/dataviews/src/stories/index.story.js b/packages/dataviews/src/stories/index.story.js
index c04e89a92baa85..8a5ccd83450237 100644
--- a/packages/dataviews/src/stories/index.story.js
+++ b/packages/dataviews/src/stories/index.story.js
@@ -39,6 +39,20 @@ Default.args = {
[ LAYOUT_TABLE ]: {
layout: {
primaryField: 'title',
+ styles: {
+ image: {
+ width: 50,
+ },
+ title: {
+ maxWidth: 400,
+ },
+ type: {
+ maxWidth: 400,
+ },
+ description: {
+ maxWidth: 200,
+ },
+ },
},
},
[ LAYOUT_GRID ]: {
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 35e7baa92d378e..de2dcf027c2060 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -91,7 +91,7 @@
padding: $grid-unit-15;
white-space: nowrap;
- &[data-field-id="actions"] {
+ &.dataviews-view-table__actions-column {
text-align: right;
}
@@ -100,7 +100,7 @@
}
}
tr {
- border-bottom: 1px solid $gray-100;
+ border-top: 1px solid $gray-100;
.dataviews-view-table-header-button {
gap: $grid-unit-05;
@@ -164,6 +164,11 @@
background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
color: $gray-700;
+ &,
+ & + tr {
+ border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+ }
+
&:hover {
background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
}
@@ -179,7 +184,6 @@
}
th {
background-color: $white;
- box-shadow: inset 0 -#{$border-width} 0 $gray-100;
padding-top: $grid-unit-10;
padding-bottom: $grid-unit-10;
padding-left: $grid-unit-15;
@@ -211,6 +215,10 @@
}
}
}
+
+ .components-v-stack > .dataviews-view-table__cell-content-wrapper:not(:first-child) {
+ min-height: 0;
+ }
}
.dataviews-view-table-header-button {
padding: $grid-unit-05 $grid-unit-10;
@@ -421,10 +429,24 @@
}
.dataviews-view-list__item-actions {
+ position: absolute;
+ top: $grid-unit-20;
+ right: 0;
+
+
+ > div {
+ height: $button-size-small;
+ }
+
.components-button {
opacity: 0;
- position: fixed;
- right: 0;
+ }
+ }
+
+ &:has(.dataviews-view-list__fields:empty) {
+ .dataviews-view-list__item-actions {
+ top: 50%;
+ transform: translateY(-50%);
}
}
@@ -432,16 +454,30 @@
&.is-hovered,
&:focus-within {
.dataviews-view-list__item-actions {
- padding-right: $grid-unit-30;
+ background: #f8f8f8;
+ padding-left: $grid-unit-10;
+ margin-right: $grid-unit-30;
+ box-shadow: -12px 0 8px 0 #f8f8f8;
.components-button {
opacity: 1;
position: static;
}
}
+ }
+
+ &.is-selected {
+ .dataviews-view-list__item-actions {
+ background-color: rgb(247 248 255);
+ box-shadow: -12px 0 8px 0 rgb(247 248 255);
+ }
+ }
+
+ &.is-selected.is-selected {
+ border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
- .dataviews-view-list__item {
- padding-right: 0;
+ & + li {
+ border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
}
}
@@ -477,7 +513,7 @@
}
.dataviews-view-list__item {
- padding: $grid-unit-20 0 $grid-unit-20 $grid-unit-30;
+ padding: $grid-unit-20 $grid-unit-30;
width: 100%;
scroll-margin: $grid-unit-10 0;
@@ -494,15 +530,15 @@
}
}
.dataviews-view-list__primary-field {
- min-height: $grid-unit-05 * 5;
- line-height: $grid-unit-05 * 5;
+ min-height: $grid-unit-30;
+ line-height: $grid-unit-30;
overflow: hidden;
}
}
.dataviews-view-list__media-wrapper {
- width: $grid-unit-50;
- height: $grid-unit-50;
+ width: $grid-unit-05 * 13;
+ height: $grid-unit-05 * 13;
overflow: hidden;
position: relative;
flex-shrink: 0;
@@ -533,13 +569,22 @@
background-color: $gray-200;
}
+ .dataviews-view-list__field-wrapper {
+ min-height: $grid-unit-05 * 13; // Ensures title is centrally aligned when all fields are hidden
+ }
+
.dataviews-view-list__fields {
color: $gray-700;
display: flex;
gap: $grid-unit-10;
+ row-gap: $grid-unit-05;
flex-wrap: wrap;
font-size: 12px;
+ &:empty {
+ display: none;
+ }
+
.dataviews-view-list__field {
&:has(.dataviews-view-list__field-value:empty) {
display: none;
@@ -548,12 +593,8 @@
.dataviews-view-list__field-value {
line-height: $grid-unit-05 * 6;
- display: inline-flex;
}
}
- .dataviews-view-list__item-actions {
- padding-right: $grid-unit-30;
- }
& + .dataviews-pagination {
justify-content: space-between;
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index 9cc9ffb0f76c0c..8e2626245682e6 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -75,21 +75,6 @@ export type Field< Item > = {
*/
render?: ( args: { item: Item } ) => ReactNode;
- /**
- * The width of the field column.
- */
- width?: string | number;
-
- /**
- * The minimum width of the field column.
- */
- maxWidth?: string | number;
-
- /**
- * The maximum width of the field column.
- */
- minWidth?: string | number;
-
/**
* Whether the field is sortable.
*/
@@ -249,11 +234,44 @@ interface ViewBase {
perPage?: number;
/**
- * The hidden fields.
+ * The fields to render
*/
fields?: string[];
}
+export interface CombinedField {
+ id: string;
+
+ header: string;
+
+ /**
+ * The fields to use as columns.
+ */
+ children: string[];
+
+ /**
+ * The direction of the stack.
+ */
+ direction: 'horizontal' | 'vertical';
+}
+
+export interface ColumnStyle {
+ /**
+ * The width of the field column.
+ */
+ width?: string | number;
+
+ /**
+ * The minimum width of the field column.
+ */
+ maxWidth?: string | number;
+
+ /**
+ * The maximum width of the field column.
+ */
+ minWidth?: string | number;
+}
+
export interface ViewTable extends ViewBase {
type: 'table';
@@ -264,9 +282,14 @@ export interface ViewTable extends ViewBase {
primaryField?: string;
/**
- * The field to use as the media field.
+ * The fields to use as columns.
*/
- mediaField?: string;
+ combinedFields?: CombinedField[];
+
+ /**
+ * The styles for the columns.
+ */
+ styles?: Record< string, ColumnStyle >;
};
}
diff --git a/packages/dataviews/src/view-actions.tsx b/packages/dataviews/src/view-actions.tsx
index fd9aff28b6479b..0493cfb5efea1f 100644
--- a/packages/dataviews/src/view-actions.tsx
+++ b/packages/dataviews/src/view-actions.tsx
@@ -20,7 +20,7 @@ import { cog } from '@wordpress/icons';
*/
import { unlock } from './lock-unlock';
import { SORTING_DIRECTIONS, sortLabels } from './constants';
-import { VIEW_LAYOUTS } from './layouts';
+import { VIEW_LAYOUTS, getMandatoryFields } from './layouts';
import type { NormalizedField, View, SupportedLayouts } from './types';
const {
@@ -147,10 +147,11 @@ function FieldsVisibilityMenu< Item >( {
onChangeView,
fields,
}: FieldsVisibilityMenuProps< Item > ) {
+ const mandatoryFields = getMandatoryFields( view );
const hidableFields = fields.filter(
( field ) =>
field.enableHiding !== false &&
- field.id !== view?.layout?.mediaField
+ ! mandatoryFields.includes( field.id )
);
const viewFields = view.fields || fields.map( ( field ) => field.id );
if ( ! hidableFields?.length ) {
diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx
index 7e8491f5c7780f..b094e9a74c0834 100644
--- a/packages/dataviews/src/view-list.tsx
+++ b/packages/dataviews/src/view-list.tsx
@@ -152,7 +152,10 @@ function ListItem< Item >( {
) }
-