DataViews Workshop

https://oandre.gal/talks/dataviews-core-days-roma/

WordPress Core Days, Roma 2024
By André Maneiro & Riad Benguella

DATAVIEWS IN USE

Pages (list layout)

Templates (table layout)

Patterns (grid layout)


return (
    <DataViews
        data={data}
        fields={fields}
        view={view}
        onChangeView={onChangeView}
    />
);
const data = [
 {
  id: 1,
  title: '',
  content: '',
  created: '',
  updated: '',
  status: 0,
  reviews: ''
  },
];
const fields = [
{
 id: 'status',
 type: 'text',
 label: 'Status',
 elements: [
  {
    value: 0,
    label: 'Draft'
  }
 ],
 getValue: ({item}) => {},
 render: ({item}) => {},
 sort: (a, b, dir) => {}
}
];
const view = {
  type: 'grid',
  search: 'review',
  page: 1,
  perPage: 10,
  sort: {
    field: 'title',
    direction: 'asc',
 },
 filters: [],
 layout: {
  mediaField: 'img'
 }
};
const onChangeView = (
  view
) => {
  /*
   * React to user:
   * 
   * - filter data
   * - query endpoint
   * - etc.
   */
};

Your turn: setup DataViews

git clone https://github.com/oandregal/dataviews-core-days-roma/
npm install && npm start
  • Clone the repo.
  • Implement the TODOs and make it work.
  • Compare your solution with “git switch 1-actions“.

ACTIONS IN USE

// Direct action
 
{
  id: 'open',
  label: 'Open',
  isPrimary: true,
  supportsBulk: true,
  isEligible: ( item ) => {},

  callback: ( items ) => {}
}
// Action that opens modal

{
  id: 'delete',
  label: 'Delete',
  isPrimary: true,
  supportsBulk: true,
  isEligible: ( item ) => {},

  RenderModal: ( { items, closeModal }) => {}
}

Your turn: create two actions

git switch 1-actions
npm install && npm start
  • Direct action: open a link.
  • Modal action: delete a record.
  • Compare your solution with “git switch 2-edit“.

DATAFORM IN USE

Pages (table layout + QuickEdit Gutenberg experiment)


return (
    <DataViews
        data={data}
        fields={fields}
        view={view}
        onChangeView={onChangeView}
    />
);

return (
    <DataForm
        data={data}
        fields={fields}
        form={form}
        onChange={onChange}
    />
);
const data = {
 id: 1,
 title: '',
 content: '',
 created: '',
 updated: '',
 status: 0,
 reviews: ''
};


const fields = [
{
 id: 'status',
 type: 'text',
 label: 'Status',
 elements: [
 {
  value: 0,
  label: 'Draft'
 }
 ],
 Edit: ({
   data,
   field,
   onChange
 }) => {},
 isVisible: (item) => {},
 isValid: (item, ctx) => {}
}
];
const form = {
 type: 'regular',
 fields: [ ]
};
const onChange = (  
  edits
) => {
  /*
   * React to user:
   *
   * - update data
   * - etc.
   */
}

Your turn: edit action

git switch 2-edit
npm install && npm start
  • Create a new action for editing the records.
  • Use the DataForm API.
  • Compare your solution with “git switch 3-full“.

Resources:

Grazie!