prep build 12/04

docs/getting-started/fundamentals/registration-of-a-block.md

@@ -65,10 +65,10 @@ The function takes two params:
 -   `$settings` (`Object`) – client-side block settings.
 
 <div class="callout callout-tip">
-The content of <code>block.json</code> (or any other <code>.json</code> file) can be imported directly in Javascript files when using <a href="/docs/getting-started/devenv/get-started-with-wp-scripts/#the-build-process-with-wp-scripts">a build process like the one available with <code>wp-scripts</code></a>
+The content of <code>block.json</code> (or any other <code>.json</code> file) can be imported directly into Javascript files when using <a href="https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/#the-build-process-with-wp-scripts">a build process like the one available with <code>wp-scripts</code></a>
 </div>
 
-The client-side block settings object passed as a second parameter include two properties that are especially relevant:
+The client-side block settings object passed as a second parameter includes two especially relevant properties:
 - `edit`: The React component that gets used in the editor for our block.
 - `save`: The function that returns the static HTML markup that gets saved to the Database. 
 
@@ -95,4 +95,4 @@ _See the [code above](https://github.com/WordPress/block-development-examples/bl
 
 - [`register_block_type` PHP function](https://developer.wordpress.org/reference/functions/register_block_type/)
 - [`registerBlockType` JS function](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-blocks/#registerblocktype)
-- [Why a block needs to be registered in both the server and the client?](https://github.com/WordPress/gutenberg/discussions/55884) | GitHub Discussion
+- [Why a block needs to be registered in both the server and the client?](https://github.com/WordPress/gutenberg/discussions/55884) | GitHub Discussion

docs/how-to-guides/themes/theme-json.md

@@ -103,10 +103,10 @@ body {
 }
 ```
 
--   **Custom properties**: there's also a mechanism to create your own CSS Custom Properties.
-
 {% end %}
 
+-   **Custom properties**: there's also a mechanism to create your own CSS Custom Properties.
+
 {% codetabs %}
 {% Input %}
 

docs/manifest.json

@@ -1619,6 +1619,12 @@
 		"markdown_source": "../packages/data/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/dataviews",
+		"slug": "packages-dataviews",
+		"markdown_source": "../packages/dataviews/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/date",
 		"slug": "packages-date",

package.json

@@ -41,6 +41,7 @@
 		"@wordpress/customize-widgets": "file:packages/customize-widgets",
 		"@wordpress/data": "file:packages/data",
 		"@wordpress/data-controls": "file:packages/data-controls",
+		"@wordpress/dataviews": "file:packages/dataviews",
 		"@wordpress/date": "file:packages/date",
 		"@wordpress/deprecated": "file:packages/deprecated",
 		"@wordpress/dom": "file:packages/dom",

packages/block-library/src/form-input/save.js

@@ -12,6 +12,7 @@ import {
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 /**
  * Get the name attribute from a content string.
@@ -21,11 +22,8 @@ import {
  * @return {string} Returns the slug.
  */
 const getNameFromLabel = ( content ) => {
-	const dummyElement = document.createElement( 'div' );
-	dummyElement.innerHTML = content;
-	// Get the slug.
 	return (
-		removeAccents( dummyElement.innerText )
+		removeAccents( stripHTML( content ) )
 			// Convert anything that's not a letter or number to a hyphen.
 			.replace( /[^\p{L}\p{N}]+/gu, '-' )
 			// Convert to lowercase

packages/dataviews/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/dataviews/CHANGELOG.md

@@ -0,0 +1,3 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased

packages/edit-site/src/components/dataviews/README.md → packages/dataviews/README.md

@@ -1,6 +1,16 @@
-# DataView
+# DataViews
 
-This file documents the DataViews UI component, which provides an API to render datasets using different view types (table, grid, etc.).
+DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/dataviews --save
+```
+
+## Usage
 
 ```js
 <DataViews
@@ -175,6 +185,8 @@ Example:
 -   `type`: the type of the field. Used to generate the proper filters. Only `enumeration` available at the moment.
 -   `enableSorting`: whether the data can be sorted by the given field. True by default.
 -   `enableHiding`: whether the field can be hidden. True by default.
+-   `filterBy`: configuration for the filters.
+    - `operators`: the list of operators supported by the field.
 
 ## Actions
 
@@ -189,3 +201,11 @@ Array of operations that can be performed upon each record. Each action is an ob
 -   `callback`: function, required unless `RenderModal` is provided. Callback function that takes the record as input and performs the required action.
 -   `RenderModal`: ReactElement, optional. If an action requires that some UI be rendered in a modal, it can provide a component which takes as props the record as `item` and a `closeModal` function. When this prop is provided, the `callback` property is ignored.
 -   `hideModalHeader`: boolean, optional. This property is used in combination with `RenderModal` and controls the visibility of the modal's header. If the action renders a modal and doesn't hide the header, the action's label is going to be used in the modal's header.
+
+## Contributing to this package
+
+This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.
+
+To find out more about contributing to this package or Gutenberg as a whole, please read the project's main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).
+
+<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/dataviews/package.json

@@ -0,0 +1,48 @@
+{
+	"name": "@wordpress/dataviews",
+	"version": "0.1.0",
+	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"dataviews"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/dataviews/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/dataviews"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=12"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"types": "build-types",
+	"sideEffects": false,
+	"dependencies": {
+		"@babel/runtime": "^7.16.0",
+		"@tanstack/react-table": "^8.10.3",
+		"@wordpress/a11y": "file:../a11y",
+		"@wordpress/components": "file:../components",
+		"@wordpress/compose": "file:../compose",
+		"@wordpress/element": "file:../element",
+		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/icons": "file:../icons",
+		"@wordpress/private-apis": "file:../private-apis",
+		"classnames": "^2.3.1",
+		"remove-accents": "^0.5.0"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/edit-site/src/components/dataviews/add-filter.js → packages/dataviews/src/add-filter.js

@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
+import { unlock } from './lock-unlock';
 import { ENUMERATION_TYPE, OPERATOR_IN } from './constants';
 
 const {
@@ -36,8 +36,7 @@ export default function AddFilter( { fields, view, onChangeView } ) {
 					name: field.header,
 					elements: field.elements || [],
 					isVisible: view.filters.some(
-						( f ) =>
-							f.field === field.id && f.operator === OPERATOR_IN
+						( f ) => f.field === field.id
 					),
 				} );
 		}

packages/edit-site/src/components/dataviews/constants.js → packages/dataviews/src/constants.js

@@ -16,6 +16,7 @@ export const ENUMERATION_TYPE = 'enumeration';
 
 // Filter operators.
 export const OPERATOR_IN = 'in';
+export const OPERATOR_NOT_IN = 'notIn';
 
 // View layouts.
 export const LAYOUT_TABLE = 'table';