diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md index 7ec1b24f8745c..6b6f8ef6b54e1 100644 --- a/packages/dataviews/CHANGELOG.md +++ b/packages/dataviews/CHANGELOG.md @@ -2,6 +2,21 @@ ## Unreleased +## Breaking Changes + +- Support showing or hiding title, media and description fields ([#67477](https://github.com/WordPress/gutenberg/pull/67477)). +- Unify the `title`, `media` and `description` fields for the different layouts. So instead of the previous `view.layout.mediaField`, `view.layout.primaryField` and `view.layout.columnFields`, all the layouts now support these three fields with the following config ([#67477](https://github.com/WordPress/gutenberg/pull/67477)): + +```js +const view = { + type: 'table', + titleField: 'title', + mediaField: 'media', + descriptionField: 'description', + fields: [ 'author', 'date' ], +} +``` + ## Internal - Upgraded `@ariakit/react` (v0.4.13) and `@ariakit/test` (v0.4.5) ([#65907](https://github.com/WordPress/gutenberg/pull/65907)). diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md index 04b8a40ff3fa7..651d87268c28e 100644 --- a/packages/dataviews/README.md +++ b/packages/dataviews/README.md @@ -165,6 +165,7 @@ const view = { field: 'date', direction: 'desc', }, + titleField: 'title', fields: [ 'author', 'status' ], layout: {}, }; @@ -184,50 +185,22 @@ Properties: - `field`: the field used for sorting the dataset. - `direction`: the direction to use for sorting, one of `asc` or `desc`. - -- `fields`: a list of field `id` that are visible in the UI and the specific order in which they are displayed. +- `titleField`: The id of the field reprensenting the title of the record. +- `mediaField`: The id of the field reprensenting the media of the record. +- `descriptionField`: The id of field the reprensenting the description of the record. +- `showTitle`: Whether the title should be shown in the UI. `true` by default. +- `showMedia`: Whether the media should be shown in the UI. `true` by default. +- `showDescription`: Whether the description should be shown in the UI. `true` by default. +- `fields`: a list of remaining field `id` that are visible in the UI and the specific order in which they are displayed. - `layout`: config that is specific to a particular layout type. ##### Properties of `layout` | Properties of `layout` | Table | Grid | List | | --------------------------------------------------------------------------------------------------------------- | ----- | ---- | ---- | -| `primaryField`: the field's `id` to be highlighted in each layout. It's not hidable. | ✓ | ✓ | ✓ | -| `mediaField`: the field's `id` to be used for rendering each card's media. It's not hiddable. | | ✓ | ✓ | -| `columnFields`: a list of field's `id` to render vertically stacked instead of horizontally (the default). | | ✓ | | | `badgeFields`: a list of field's `id` to render without label and styled as badges. | | ✓ | | -| `combinedFields`: a list of "virtual" fields that are made by combining others. See "Combining fields" section. | ✓ | | | | `styles`: additional `width`, `maxWidth`, `minWidth` styles for each field column. | ✓ | | | -##### Combining fields - -The `table` layout has the ability to create "virtual" fields that are made out by combining existing ones. - -Each "virtual field", has to provide an `id` and `label` (optionally a `header` instead), which have the same meaning as any other field. - -Additionally, they need to provide: - -- `children`: a list of field's `id` to combine -- `direction`: how should they be stacked, `vertical` or `horizontal` - -For example, this is how you'd define a `site` field which is a combination of a `title` and `description` fields, which are not displayed: - -```js -{ - fields: [ 'site', 'status' ], - layout: { - combinedFields: [ - { - id: 'site', - label: 'Site', - children: [ 'title', 'description' ], - direction: 'vertical', - } - ] - } -} -``` - #### `onChangeView`: `function` Callback executed when the view has changed. It receives the new view object as a parameter. @@ -255,6 +228,7 @@ function MyCustomPageTable() { value: [ 'publish', 'draft' ], }, ], + titleField: 'title', fields: [ 'author', 'status' ], layout: {}, } ); @@ -370,14 +344,15 @@ For example, this is how you'd enable only the table view type: ```js const defaultLayouts = { table: { - layout: { - primaryField: 'my-key', - }, + showMedia: false, }, + grid: { + showMedia: true, + } }; ``` -The `defaultLayouts` property should be an object that includes properties named `table`, `grid`, or `list`. Each of these properties should contain a `layout` property, which holds the configuration for each specific layout type. Check "Properties of layout" for the full list of properties available for each layout's configuration +The `defaultLayouts` property should be an object that includes properties named `table`, `grid`, or `list`. These properties are applied to the view object each time the user switches to the corresponding layout. #### `selection`: `string[]` diff --git a/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx b/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx index c71636618716b..827f061976443 100644 --- a/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx +++ b/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx @@ -15,7 +15,7 @@ interface DataViewsSelectionCheckboxProps< Item > { onChangeSelection: SetSelection; item: Item; getItemId: ( item: Item ) => string; - primaryField?: Field< Item >; + titleField?: Field< Item >; disabled: boolean; } @@ -24,19 +24,19 @@ export default function DataViewsSelectionCheckbox< Item >( { onChangeSelection, item, getItemId, - primaryField, + titleField, disabled, }: DataViewsSelectionCheckboxProps< Item > ) { const id = getItemId( item ); const checked = ! disabled && selection.includes( id ); let selectionLabel; - if ( primaryField?.getValue && item ) { + if ( titleField?.getValue && item ) { // eslint-disable-next-line @wordpress/valid-sprintf selectionLabel = sprintf( checked ? /* translators: %s: item title. */ __( 'Deselect item: %s' ) : /* translators: %s: item title. */ __( 'Select item: %s' ), - primaryField.getValue( { item } ) + titleField.getValue( { item } ) ); } else { selectionLabel = checked diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx index f13670f27cdab..28e48525ffa73 100644 --- a/packages/dataviews/src/components/dataviews-view-config/index.tsx +++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx @@ -23,29 +23,27 @@ import { __experimentalText as Text, privateApis as componentsPrivateApis, BaseControl, + Icon, } from '@wordpress/components'; import { __, _x, sprintf } from '@wordpress/i18n'; import { memo, useContext, useMemo } from '@wordpress/element'; -import { chevronDown, chevronUp, cog, seen, unseen } from '@wordpress/icons'; +import { + chevronDown, + chevronUp, + cog, + seen, + unseen, + lock, +} from '@wordpress/icons'; import warning from '@wordpress/warning'; import { useInstanceId } from '@wordpress/compose'; /** * Internal dependencies */ -import { - SORTING_DIRECTIONS, - LAYOUT_TABLE, - sortIcons, - sortLabels, -} from '../../constants'; -import { - VIEW_LAYOUTS, - getNotHidableFieldIds, - getVisibleFieldIds, - getHiddenFieldIds, -} from '../../dataviews-layouts'; -import type { SupportedLayouts, View, Field } from '../../types'; +import { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants'; +import { VIEW_LAYOUTS } from '../../dataviews-layouts'; +import type { NormalizedField, SupportedLayouts, View } from '../../types'; import DataViewsContext from '../dataviews-context'; import { unlock } from '../../lock-unlock'; @@ -93,8 +91,13 @@ function ViewTypeMenu( { case 'list': case 'grid': case 'table': + const viewWithoutLayout = { ...view }; + if ( 'layout' in viewWithoutLayout ) { + delete viewWithoutLayout.layout; + } + // @ts-expect-error return onChangeView( { - ...view, + ...viewWithoutLayout, type: e.target.value, ...defaultLayouts[ e.target.value ], } ); @@ -237,236 +240,331 @@ function ItemsPerPageControl() { ); } -interface FieldItemProps { - id: any; - label: string; - index: number; - isVisible: boolean; - isHidable: boolean; -} - function FieldItem( { - field: { id, label, index, isVisible, isHidable }, - fields, - view, - onChangeView, + field, + isVisible, + isFirst, + isLast, + canMove = true, + onToggleVisibility, + onMoveUp, + onMoveDown, }: { - field: FieldItemProps; - fields: Field< any >[]; - view: View; - onChangeView: ( view: View ) => void; + field: NormalizedField< any >; + isVisible: boolean; + isFirst?: boolean; + isLast?: boolean; + canMove?: boolean; + onToggleVisibility?: () => void; + onMoveUp?: () => void; + onMoveDown?: () => void; } ) { - const visibleFieldIds = getVisibleFieldIds( view, fields ); + const focusVisibilityField = () => { + // Focus the visibility button to avoid focus loss. + // Our code is safe against the component being unmounted, so we don't need to worry about cleaning the timeout. + // eslint-disable-next-line @wordpress/react-no-unsafe-timeout + setTimeout( () => { + const element = document.querySelector( + `.dataviews-field-control__field-${ field.id } .dataviews-field-control__field-visibility-button` + ); + if ( element instanceof HTMLElement ) { + element.focus(); + } + }, 50 ); + }; return ( - + - { label } + + { ! canMove && ! field.enableHiding && ( + + ) } + + + { field.label } + - { view.type === LAYOUT_TABLE && isVisible && ( + { isVisible && ( <>