Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Template API: Expose template block id and order to client (#40263) 

* Update unit tests to handle _templateBlockId and _templateBlockOrder

* Refactor get_formatted_template

* Initial @woocommerce/block-templates package

* Add block-templates to admin webpack

* Add block-templates to dependency-extraction-webpack-plugin

* Add block-templates to admin assets

* Add block-templates dependency

* Update name block

* Update syncpack

* Update regular price block

* Update tab block

* Update section block

* Add @wordpress/deprecated to package

* Deprecated initBlock

* Update attributes block

* Update catalog visibility block

* Update checkbox block

* Update conditional block

* Update collapsible block

* Allow additional props to be passed to useWooBlockProps

* Update inventory sku block

* Update inventory quantity block

* Update inventory email block

* Update images block

* Update description block

* Update radio block

* Update pricing block

* Update password block

* Update notice block

* Update shipping dimensions block

* Update shipping class block

* Update schedule sale block

* Update sale price block

* Update toggle block

* Update taxonomy block

* Update tag block

* Update summary block

* Update variations block

* Update variations options block

* Update variation items blocks

* Changelog

* Changelog

* Changelog

* Changelog

* Changelog

* Add test for registerWooBlockType

* Add @testing-library/react-hooks to devDependencies

* Add test for useWooBlockProps

* Document API

* Fix linting issues in README.md

* Fix tabs tests by mocking useWooBlockProps

* Allow header duplication under different nesting

* Remove unused import (fixes lint error)

* Update lock file
This commit is contained in:
Matt Sherman 2023-09-27 16:38:56 -04:00 committed by GitHub
parent 8edcb06348
commit 1e35d45c99
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
100 changed files with 2242 additions and 1013 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.markdownlint.json
View File

@ -3,6 +3,7 @@
"MD003": { "style": "atx" },
"MD007": { "indent": 4 },
"MD013": { "line_length": 9999 },
"MD024": { "allow_different_nesting": true },
"no-hard-tabs": false,
"whitespace": false
}

1
.syncpackrc
View File

@ -118,6 +118,7 @@
"@wordpress/edit-site"
],
"packages": [
"@woocommerce/block-templates",
"@woocommerce/product-editor",
"woocommerce/client/admin",
"@woocommerce/components"

12
packages/js/block-templates/.eslintrc.js Normal file
View File

@ -0,0 +1,12 @@
module.exports = {
extends: [ 'plugin:@woocommerce/eslint-plugin/recommended' ],
root: true,
overrides: [
{
files: [ '**/*.js', '**/*.jsx', '**/*.tsx' ],
rules: {
'react/react-in-jsx-scope': 'off',
},
},
],
};

1
packages/js/block-templates/.npmrc Normal file
View File

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

70
packages/js/block-templates/README.md Normal file
View File

@ -0,0 +1,70 @@
# @woocommerce/block-templates
A collection of utility functions for use with WooCommerce admin block templates.
## API
### registerWooBlockType
Registers a WooCommerce block type.
#### Usage
```js
import { registerWooBlockType } from '@woocommerce/block-templates';
import metadata from './block.json';
import { Edit } from './edit';
registerWooBlockType( {
name: metadata.name,
metadata: metadata,
settings: {
edit: Edit,
}
} );
```
#### Parameters
- _blockMetadata_ `Object`: Block metadata.
#### Returns
- `WPBlockType | undefined`: The block type if it was registered successfully, otherwise `undefined`.
### useWooBlockProps
This hook is used to lightly mark an element as a WooCommerce block template block. The block's attributes must be passed to this hook and the return result passed to the outermost element of the block in order for the block to properly function in WooCommerce block template contexts.
If you define a ref for the element, it is important to pass the ref to this hook, which the hook in turn will pass to the component through the props it returns. Optionally, you can also pass any other props through this hook, and they will be merged and returned.
#### Usage
```js
import { useWooBlockProps } from '@woocommerce/block-templates';
export function Edit( { attributes } ) {
const { blockProps } = useWooBlockProps(
attributes,
{
className: 'my-block',
}
);
return (
<div { ...blockProps }>
Block content
</div>
);
}
```
#### Parameters
- _attributes_: `Object`: Block attributes.
- _props_: `Object`: Optional. Props to pass to the element.
#### Returns
- `Object`: Props to pass to the element to mark as a WooCommerce block.

3
packages/js/block-templates/babel.config.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
extends: '../internal-js-tests/babel.config.js',
};

3
packages/js/block-templates/changelog.md Normal file
View File

@ -0,0 +1,3 @@
# Changelog
This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

4
packages/js/block-templates/changelog/add-expose-block-id-and-order Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Initial version of @woocommerce/block-templates package. Adds registerWooBlockType and useWooBlockProps.

32
packages/js/block-templates/composer.json Normal file
View File

@ -0,0 +1,32 @@
{
"name": "woocommerce/block-templates",
"description": "WooCommerce Admin block templates component library",
"type": "library",
"license": "GPL-3.0-or-later",
"minimum-stability": "dev",
"require-dev": {
"automattic/jetpack-changelogger": "3.3.0"
},
"config": {
"platform": {
"php": "7.2"
}
},
"extra": {
"changelogger": {
"formatter": {
"filename": "../../../tools/changelogger/class-package-formatter.php"
},
"types": {
"fix": "Fixes an existing bug",
"add": "Adds functionality",
"update": "Update existing functionality",
"dev": "Development related task",
"tweak": "A minor adjustment to the codebase",
"performance": "Address performance issues",
"enhancement": "Improve existing functionality"
},
"changelog": "CHANGELOG.md"
}
}
}

483
packages/js/block-templates/composer.lock generated Normal file
View File

@ -0,0 +1,483 @@
{
"_readme": [
"This file locks the dependencies of your project to a known state",
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "2d316cec186ab12385e8dda54f6df0f6",
"packages": [],
"packages-dev": [
{
"name": "automattic/jetpack-changelogger",
"version": "v3.3.0",
"source": {
"type": "git",
"url": "https://github.com/Automattic/jetpack-changelogger.git",
"reference": "8f63c829b8d1b0d7b1d5de93510d78523ed18959"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/Automattic/jetpack-changelogger/zipball/8f63c829b8d1b0d7b1d5de93510d78523ed18959",
"reference": "8f63c829b8d1b0d7b1d5de93510d78523ed18959",
"shasum": ""
},
"require": {
"php": ">=5.6",
"symfony/console": "^3.4 || ^5.2 || ^6.0",
"symfony/process": "^3.4 || ^5.2 || ^6.0",
"wikimedia/at-ease": "^1.2 || ^2.0"
},
"require-dev": {
"wikimedia/testing-access-wrapper": "^1.0 || ^2.0",
"yoast/phpunit-polyfills": "1.0.4"
},
"bin": [
"bin/changelogger"
],
"type": "project",
"extra": {
"autotagger": true,
"branch-alias": {
"dev-trunk": "3.3.x-dev"
},
"mirror-repo": "Automattic/jetpack-changelogger",
"version-constants": {
"::VERSION": "src/Application.php"
},
"changelogger": {
"link-template": "https://github.com/Automattic/jetpack-changelogger/compare/${old}...${new}"
}
},
"autoload": {
"psr-4": {
"Automattic\\Jetpack\\Changelog\\": "lib",
"Automattic\\Jetpack\\Changelogger\\": "src"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"GPL-2.0-or-later"
],
"description": "Jetpack Changelogger tool. Allows for managing changelogs by dropping change files into a changelog directory with each PR.",
"support": {
"source": "https://github.com/Automattic/jetpack-changelogger/tree/v3.3.0"
},
"time": "2022-12-26T13:49:01+00:00"
},
{
"name": "psr/log",
"version": "1.1.4",
"source": {
"type": "git",
"url": "https://github.com/php-fig/log.git",
"reference": "d49695b909c3b7628b6289db5479a1c204601f11"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/php-fig/log/zipball/d49695b909c3b7628b6289db5479a1c204601f11",
"reference": "d49695b909c3b7628b6289db5479a1c204601f11",
"shasum": ""
},
"require": {
"php": ">=5.3.0"
},
"type": "library",
"extra": {
"branch-alias": {
"dev-master": "1.1.x-dev"
}
},
"autoload": {
"psr-4": {
"Psr\\Log\\": "Psr/Log/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "PHP-FIG",
"homepage": "https://www.php-fig.org/"
}
],
"description": "Common interface for logging libraries",
"homepage": "https://github.com/php-fig/log",
"keywords": [
"log",
"psr",
"psr-3"
],
"support": {
"source": "https://github.com/php-fig/log/tree/1.1.4"
},
"time": "2021-05-03T11:20:27+00:00"
},
{
"name": "symfony/console",
"version": "3.4.x-dev",
"source": {
"type": "git",
"url": "https://github.com/symfony/console.git",
"reference": "a10b1da6fc93080c180bba7219b5ff5b7518fe81"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/console/zipball/a10b1da6fc93080c180bba7219b5ff5b7518fe81",
"reference": "a10b1da6fc93080c180bba7219b5ff5b7518fe81",
"shasum": ""
},
"require": {
"php": "^5.5.9|>=7.0.8",
"symfony/debug": "~2.8|~3.0|~4.0",
"symfony/polyfill-mbstring": "~1.0"
},
"conflict": {
"symfony/dependency-injection": "<3.4",
"symfony/process": "<3.3"
},
"provide": {
"psr/log-implementation": "1.0"
},
"require-dev": {
"psr/log": "~1.0",
"symfony/config": "~3.3|~4.0",
"symfony/dependency-injection": "~3.4|~4.0",
"symfony/event-dispatcher": "~2.8|~3.0|~4.0",
"symfony/lock": "~3.4|~4.0",
"symfony/process": "~3.3|~4.0"
},
"suggest": {
"psr/log": "For using the console logger",
"symfony/event-dispatcher": "",
"symfony/lock": "",
"symfony/process": ""
},
"type": "library",
"autoload": {
"psr-4": {
"Symfony\\Component\\Console\\": ""
},
"exclude-from-classmap": [
"/Tests/"
]
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Fabien Potencier",
"email": "fabien@symfony.com"
},
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
}
],
"description": "Symfony Console Component",
"homepage": "https://symfony.com",
"support": {
"source": "https://github.com/symfony/console/tree/3.4"
},
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-10-24T10:57:07+00:00"
},
{
"name": "symfony/debug",
"version": "4.4.x-dev",
"source": {
"type": "git",
"url": "https://github.com/symfony/debug.git",
"reference": "1a692492190773c5310bc7877cb590c04c2f05be"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/debug/zipball/1a692492190773c5310bc7877cb590c04c2f05be",
"reference": "1a692492190773c5310bc7877cb590c04c2f05be",
"shasum": ""
},
"require": {
"php": ">=7.1.3",
"psr/log": "^1|^2|^3"
},
"conflict": {
"symfony/http-kernel": "<3.4"
},
"require-dev": {
"symfony/http-kernel": "^3.4|^4.0|^5.0"
},
"default-branch": true,
"type": "library",
"autoload": {
"psr-4": {
"Symfony\\Component\\Debug\\": ""
},
"exclude-from-classmap": [
"/Tests/"
]
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Fabien Potencier",
"email": "fabien@symfony.com"
},
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
}
],
"description": "Provides tools to ease debugging PHP code",
"homepage": "https://symfony.com",
"support": {
"source": "https://github.com/symfony/debug/tree/v4.4.44"
},
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"abandoned": "symfony/error-handler",
"time": "2022-07-28T16:29:46+00:00"
},
{
"name": "symfony/polyfill-mbstring",
"version": "1.x-dev",
"source": {
"type": "git",
"url": "https://github.com/symfony/polyfill-mbstring.git",
"reference": "42292d99c55abe617799667f454222c54c60e229"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/42292d99c55abe617799667f454222c54c60e229",
"reference": "42292d99c55abe617799667f454222c54c60e229",
"shasum": ""
},
"require": {
"php": ">=7.1"
},
"provide": {
"ext-mbstring": "*"
},
"suggest": {
"ext-mbstring": "For best performance"
},
"default-branch": true,
"type": "library",
"extra": {
"branch-alias": {
"dev-main": "1.28-dev"
},
"thanks": {
"name": "symfony/polyfill",
"url": "https://github.com/symfony/polyfill"
}
},
"autoload": {
"files": [
"bootstrap.php"
],
"psr-4": {
"Symfony\\Polyfill\\Mbstring\\": ""
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Nicolas Grekas",
"email": "p@tchwork.com"
},
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
}
],
"description": "Symfony polyfill for the Mbstring extension",
"homepage": "https://symfony.com",
"keywords": [
"compatibility",
"mbstring",
"polyfill",
"portable",
"shim"
],
"support": {
"source": "https://github.com/symfony/polyfill-mbstring/tree/v1.28.0"
},
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2023-07-28T09:04:16+00:00"
},
{
"name": "symfony/process",
"version": "3.4.x-dev",
"source": {
"type": "git",
"url": "https://github.com/symfony/process.git",
"reference": "b8648cf1d5af12a44a51d07ef9bf980921f15fca"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/process/zipball/b8648cf1d5af12a44a51d07ef9bf980921f15fca",
"reference": "b8648cf1d5af12a44a51d07ef9bf980921f15fca",
"shasum": ""
},
"require": {
"php": "^5.5.9|>=7.0.8"
},
"type": "library",
"autoload": {
"psr-4": {
"Symfony\\Component\\Process\\": ""
},
"exclude-from-classmap": [
"/Tests/"
]
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Fabien Potencier",
"email": "fabien@symfony.com"
},
{
"name": "Symfony Community",
"homepage": "https://symfony.com/contributors"
}
],
"description": "Symfony Process Component",
"homepage": "https://symfony.com",
"support": {
"source": "https://github.com/symfony/process/tree/3.4"
},
"funding": [
{
"url": "https://symfony.com/sponsor",
"type": "custom"
},
{
"url": "https://github.com/fabpot",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
"type": "tidelift"
}
],
"time": "2020-10-24T10:57:07+00:00"
},
{
"name": "wikimedia/at-ease",
"version": "v2.0.0",
"source": {
"type": "git",
"url": "https://github.com/wikimedia/at-ease.git",
"reference": "013ac61929797839c80a111a3f1a4710d8248e7a"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/wikimedia/at-ease/zipball/013ac61929797839c80a111a3f1a4710d8248e7a",
"reference": "013ac61929797839c80a111a3f1a4710d8248e7a",
"shasum": ""
},
"require": {
"php": ">=5.6.99"
},
"require-dev": {
"jakub-onderka/php-console-highlighter": "0.3.2",
"jakub-onderka/php-parallel-lint": "1.0.0",
"mediawiki/mediawiki-codesniffer": "22.0.0",
"mediawiki/minus-x": "0.3.1",
"ockcyp/covers-validator": "0.5.1 || 0.6.1",
"phpunit/phpunit": "4.8.36 || ^6.5"
},
"type": "library",
"autoload": {
"files": [
"src/Wikimedia/Functions.php"
],
"psr-4": {
"Wikimedia\\AtEase\\": "src/Wikimedia/AtEase/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"GPL-2.0-or-later"
],
"authors": [
{
"name": "Tim Starling",
"email": "tstarling@wikimedia.org"
},
{
"name": "MediaWiki developers",
"email": "wikitech-l@lists.wikimedia.org"
}
],
"description": "Safe replacement to @ for suppressing warnings.",
"homepage": "https://www.mediawiki.org/wiki/at-ease",
"support": {
"source": "https://github.com/wikimedia/at-ease/tree/master"
},
"time": "2018-10-10T15:39:06+00:00"
}
],
"aliases": [],
"minimum-stability": "dev",
"stability-flags": [],
"prefer-stable": false,
"prefer-lowest": false,
"platform": [],
"platform-dev": [],
"platform-overrides": {
"php": "7.2"
},
"plugin-api-version": "2.6.0"
}

4
packages/js/block-templates/jest.config.json Normal file
View File

@ -0,0 +1,4 @@
{
"rootDir": "./src",
"preset": "../node_modules/@woocommerce/internal-js-tests/jest-preset.js"
}

76
packages/js/block-templates/package.json Normal file
View File

@ -0,0 +1,76 @@
{
"name": "@woocommerce/block-templates",
"version": "1.0.0-beta.0",
"description": "Utilities for working with block templates in WooCommerce admin.",
"author": "Automattic",
"license": "GPL-2.0-or-later",
"keywords": [
"wordpress",
"woocommerce"
],
"homepage": "https://github.com/woocommerce/woocommerce/tree/trunk/packages/js/block-templates/README.md",
"repository": {
"type": "git",
"url": "https://github.com/woocommerce/woocommerce.git"
},
"bugs": {
"url": "https://github.com/woocommerce/woocommerce/issues"
},
"main": "build/index.js",
"module": "build-module/index.js",
"types": "build-types",
"react-native": "src/index",
"sideEffects": [
"build-style/**",
"src/**/*.scss"
],
"publishConfig": {
"access": "public"
},
"dependencies": {
"@wordpress/block-editor": "^9.8.0",
"@wordpress/blocks": "^12.3.0"
},
"devDependencies": {
"@babel/core": "^7.21.3",
"@babel/runtime": "^7.17.2",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react-hooks": "^8.0.1",
"@types/jest": "^27.4.1",
"@types/testing-library__jest-dom": "^5.14.3",
"@types/wordpress__block-editor": "^7.0.0",
"@types/wordpress__blocks": "^11.0.7",
"@woocommerce/eslint-plugin": "workspace:*",
"@woocommerce/internal-js-tests": "workspace:*",
"@woocommerce/internal-style-build": "workspace:*",
"@wordpress/browserslist-config": "wp-6.0",
"copy-webpack-plugin": "^9.1.0",
"css-loader": "^3.6.0",
"eslint": "^8.32.0",
"jest": "^27.5.1",
"jest-cli": "^27.5.1",
"postcss": "^8.4.7",
"postcss-loader": "^4.3.0",
"rimraf": "^3.0.2",
"sass-loader": "^10.2.1",
"ts-jest": "^27.1.3",
"typescript": "^5.1.6",
"webpack": "^5.70.0",
"webpack-cli": "^3.3.12"
},
"scripts": {
"turbo:build": "pnpm run build:js && pnpm run build:css",
"turbo:test": "jest --config ./jest.config.json",
"prepare": "composer install",
"changelog": "composer exec -- changelogger",
"clean": "pnpm exec rimraf tsconfig.tsbuildinfo build build-*",
"build": "pnpm -w exec turbo run turbo:build --filter=$npm_package_name",
"test": "pnpm -w exec turbo run turbo:test --filter=$npm_package_name",
"lint": "eslint --output-file eslint_report.json --format json src",
"build:js": "tsc --project tsconfig.json && tsc --project tsconfig-cjs.json",
"build:css": "webpack",
"start": "concurrently \"tsc --project tsconfig.json --watch\" \"tsc --project tsconfig-cjs.json --watch\" \"webpack --watch\"",
"prepack": "pnpm run clean && pnpm run build",
"lint:fix": "eslint src --fix"
}
}

1
packages/js/block-templates/src/hooks/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './use-woo-block-props';

1
packages/js/block-templates/src/hooks/use-woo-block-props/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './use-woo-block-props';

37
packages/js/block-templates/src/hooks/use-woo-block-props/test/use-woo-block-props.test.ts Normal file
View File

@ -0,0 +1,37 @@
/**
* External dependencies
*/
import { renderHook } from '@testing-library/react-hooks';
import { useBlockProps } from '@wordpress/block-editor';
/**
* Internal dependencies
*/
import { useWooBlockProps } from '../use-woo-block-props';
jest.mock( '@wordpress/block-editor', () => ( {
useBlockProps: jest.fn(),
} ) );
describe( 'useWooBlockProps', () => {
it( 'should return the block props with the block id and block order attributes', () => {
renderHook( () =>
useWooBlockProps(
{
foo: 'bar',
_templateBlockId: 'test/block',
_templateBlockOrder: 30,
},
{
className: 'test',
}
)
);
expect( useBlockProps ).toHaveBeenCalledWith( {
'data-template-block-id': 'test/block',
'data-template-block-order': 30,
className: 'test',
} );
} );
} );

24
packages/js/block-templates/src/hooks/use-woo-block-props/use-woo-block-props.ts Normal file
View File

@ -0,0 +1,24 @@
/**
* External dependencies
*/
import { useBlockProps } from '@wordpress/block-editor';
interface TemplateBlockAttributes {
_templateBlockId?: string;
_templateBlockOrder?: number;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
[ key: string ]: any;
}
export const useWooBlockProps = (
attributes: TemplateBlockAttributes,
props: Record< string, unknown > = {}
) => {
const additionalProps = {
'data-template-block-id': attributes._templateBlockId,
'data-template-block-order': attributes._templateBlockOrder,
...props,
};
return useBlockProps( additionalProps );
};

2
packages/js/block-templates/src/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './hooks';
export * from './utils';

0
packages/js/block-templates/src/style.scss Normal file
View File

1
packages/js/block-templates/src/utils/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './register-woo-block-type';

51
packages/js/block-templates/src/utils/register-woo-block-type.ts Normal file
View File

@ -0,0 +1,51 @@
/**
* External dependencies
*/
import {
Block,
BlockConfiguration,
registerBlockType,
} from '@wordpress/blocks';
interface BlockRepresentation< T extends Record< string, object > > {
name?: string;
metadata: BlockConfiguration< T >;
settings: Partial< BlockConfiguration< T > >;
}
/**
* Function to register an individual block.
*
* @param block The block to be registered.
* @return The block, if it has been successfully registered; otherwise `undefined`.
*/
export function registerWooBlockType<
// eslint-disable-next-line @typescript-eslint/no-explicit-any
T extends Record< string, any > = Record< string, any >
>( block: BlockRepresentation< T > ): Block< T > | undefined {
if ( ! block ) {
return;
}
const { metadata, settings, name } = block;
const templateBlockAttributes = {
_templateBlockId: {
type: 'string',
__experimentalRole: 'content',
},
_templateBlockOrder: {
type: 'integer',
__experimentalRole: 'content',
},
};
const augmentedMetadata = {
...metadata,
attributes: {
...metadata.attributes,
...templateBlockAttributes,
},
};
return registerBlockType< T >( { name, ...augmentedMetadata }, settings );
}

59
packages/js/block-templates/src/utils/test/register-woo-block-type.test.ts Normal file
View File

@ -0,0 +1,59 @@
/**
* External dependencies
*/
import { registerBlockType } from '@wordpress/blocks';
/**
* Internal dependencies
*/
import { registerWooBlockType } from '../register-woo-block-type';
jest.mock( '@wordpress/blocks', () => ( {
registerBlockType: jest.fn(),
} ) );
describe( 'registerWooBlockType', () => {
it( 'should register a block type with the block id and block order attributes', () => {
const block = {
name: 'test/block',
metadata: {
attributes: {
foo: {
type: 'boolean',
default: false,
},
},
},
settings: {
foo: 'bar',
},
};
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore ts2345 Complaining about the type of the foo attribute; it's fine.
registerWooBlockType( block );
expect( registerBlockType ).toHaveBeenCalledWith(
{
name: 'test/block',
attributes: {
foo: {
type: 'boolean',
default: false,
},
_templateBlockId: {
type: 'string',
__experimentalRole: 'content',
},
_templateBlockOrder: {
type: 'integer',
__experimentalRole: 'content',
},
},
},
{
foo: 'bar',
}
);
} );
} );

16
packages/js/block-templates/tsconfig-cjs.json Normal file
View File

@ -0,0 +1,16 @@
{
"extends": "../tsconfig-cjs",
"include": [
"**/*.d.ts",
"src/**/*",
"src/**/*.json"
],
"compilerOptions": {
"outDir": "build",
"resolveJsonModule": true,
"typeRoots": [
"./typings",
"./node_modules/@types"
]
}
}

20
packages/js/block-templates/tsconfig.json Normal file
View File

@ -0,0 +1,20 @@
{
"extends": "../tsconfig",
"compilerOptions": {
"rootDir": "src",
"outDir": "build-module",
"declaration": true,
"declarationMap": true,
"declarationDir": "./build-types",
"resolveJsonModule": true,
"typeRoots": [
"./typings",
"./node_modules/@types"
]
},
"include": [
"**/*.d.ts",
"src/**/*",
"src/**/*.json"
]
}

19
packages/js/block-templates/webpack.config.js Normal file
View File

@ -0,0 +1,19 @@
/**
* Internal dependencies
*/
const { webpackConfig } = require( '@woocommerce/internal-style-build' );
module.exports = {
mode: process.env.NODE_ENV || 'development',
entry: {
'build-style': __dirname + '/src/style.scss',
},
output: {
path: __dirname,
},
module: {
parser: webpackConfig.parser,
rules: webpackConfig.rules,
},
plugins: webpackConfig.plugins,
};

1
packages/js/dependency-extraction-webpack-plugin/assets/packages.js
View File

@ -1,6 +1,7 @@
module.exports = [
// wc-admin packages
'@woocommerce/admin-layout',
'@woocommerce/block-templates',
'@woocommerce/components',
'@woocommerce/csv-export',
'@woocommerce/currency',

4
packages/js/dependency-extraction-webpack-plugin/changelog/add-expose-block-id-and-order Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Add @woocommerce/block-templates.

4
packages/js/product-editor/changelog/add-expose-block-id-and-order Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Update blocks to use registerWooBlockType and useWooBlockProps from @woocommerce/block-templates. Deprecates initBlock.

2
packages/js/product-editor/package.json
View File

@ -32,6 +32,7 @@
"@types/prop-types": "^15.7.4",
"@types/wordpress__blocks": "^11.0.7",
"@woocommerce/admin-layout": "workspace:*",
"@woocommerce/block-templates": "workspace:*",
"@woocommerce/components": "workspace:*",
"@woocommerce/currency": "workspace:*",
"@woocommerce/customer-effort-score": "workspace:*",
@ -49,6 +50,7 @@
"@wordpress/core-data": "wp-6.0",
"@wordpress/data": "wp-6.0",
"@wordpress/date": "wp-6.0",
"@wordpress/deprecated": "wp-6.0",
"@wordpress/editor": "wp-6.0",
"@wordpress/element": "wp-6.0",
"@wordpress/html-entities": "wp-6.0",

7
packages/js/product-editor/src/blocks/attributes/edit.tsx
View File

@ -1,9 +1,10 @@
/**
* External dependencies
*/
import { BlockEditProps, BlockAttributes } from '@wordpress/blocks';
import { createElement } from '@wordpress/element';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { ProductAttribute } from '@woocommerce/data';
import { useBlockProps } from '@wordpress/block-editor';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore No types for this exist yet.
// eslint-disable-next-line @woocommerce/dependency-group
@ -14,14 +15,14 @@ import { useEntityProp, useEntityId } from '@wordpress/core-data';
*/
import { Attributes as AttributesContainer } from '../../components/attributes/attributes';
export function Edit() {
export function Edit( { attributes }: BlockEditProps< BlockAttributes > ) {
const [ entityAttributes, setEntityAttributes ] = useEntityProp<
ProductAttribute[]
>( 'postType', 'product', 'attributes' );
const productId = useEntityId( 'postType', 'product' );
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
return (
<div { ...blockProps }>

8
packages/js/product-editor/src/blocks/attributes/index.ts
View File

@ -1,7 +1,11 @@
/**
* External dependencies
*/
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils';
import metadata from './block.json';
import { Edit } from './edit';
@ -15,7 +19,7 @@ export const settings = {
};
export const init = () =>
initBlock( {
registerWooBlockType( {
name,
metadata: metadata as never,
settings,

4
packages/js/product-editor/src/blocks/catalog-visibility/edit.tsx
View File

@ -1,10 +1,10 @@
/**
* External dependencies
*/
import { useBlockProps } from '@wordpress/block-editor';
import { CheckboxControl } from '@wordpress/components';
import { useEntityProp } from '@wordpress/core-data';
import { createElement } from '@wordpress/element';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { Product } from '@woocommerce/data';
/**
@ -19,7 +19,7 @@ export function Edit( {
} ) {
const { label, visibility } = attributes;
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const [ catalogVisibility, setCatalogVisibility ] = useEntityProp<
Product[ 'catalog_visibility' ]

4
packages/js/product-editor/src/blocks/catalog-visibility/index.ts
View File

@ -2,11 +2,11 @@
* External dependencies
*/
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
import { CatalogVisibilityBlockAttributes } from './types';
@ -24,5 +24,5 @@ export const settings: Partial<
};
export function init() {
return initBlock( { name, metadata, settings } );
return registerWooBlockType( { name, metadata, settings } );
}

5
packages/js/product-editor/src/blocks/checkbox/edit.tsx
View File

@ -4,17 +4,18 @@
import { createElement } from '@wordpress/element';
import type { BlockAttributes } from '@wordpress/blocks';
import { CheckboxControl, Tooltip } from '@wordpress/components';
import { useBlockProps } from '@wordpress/block-editor';
import { useEntityProp } from '@wordpress/core-data';
import { Icon, help } from '@wordpress/icons';
import { useWooBlockProps } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
export function Edit( { attributes }: { attributes: BlockAttributes } ) {
const blockProps = useBlockProps( {
const blockProps = useWooBlockProps( {
className: 'woocommerce-product-form__checkbox',
...attributes,
} );
const { property, title, label, tooltip } = attributes;
const [ value, setValue ] = useEntityProp< boolean >(

4
packages/js/product-editor/src/blocks/checkbox/index.ts
View File

@ -2,11 +2,11 @@
* External dependencies
*/
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
@ -19,4 +19,4 @@ export const settings = {
edit: Edit,
};
export const init = () => initBlock( { name, metadata, settings } );
export const init = () => registerWooBlockType( { name, metadata, settings } );

5
packages/js/product-editor/src/blocks/collapsible/edit.tsx
View File

@ -1,13 +1,14 @@
/**
* External dependencies
*/
import { useWooBlockProps } from '@woocommerce/block-templates';
import { CollapsibleContent } from '@woocommerce/components';
import type { BlockAttributes } from '@wordpress/blocks';
import { createElement } from '@wordpress/element';
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
import { InnerBlocks } from '@wordpress/block-editor';
export function Edit( { attributes }: { attributes: BlockAttributes } ) {
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const { toggleText, initialCollapsed, persistRender = true } = attributes;
return (

8
packages/js/product-editor/src/blocks/collapsible/index.ts
View File

@ -1,7 +1,11 @@
/**
* External dependencies
*/
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils';
import metadata from './block.json';
import { Edit } from './edit';
@ -15,4 +19,4 @@ export const settings = {
};
export const init = () =>
initBlock( { name, metadata: metadata as never, settings } );
registerWooBlockType( { name, metadata: metadata as never, settings } );

5
packages/js/product-editor/src/blocks/conditional/edit.tsx
View File

@ -3,8 +3,9 @@
*/
import type { BlockAttributes } from '@wordpress/blocks';
import { createElement, useMemo } from '@wordpress/element';
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
import { InnerBlocks } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { DisplayState } from '@woocommerce/components';
import { Product } from '@woocommerce/data';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
@ -19,7 +20,7 @@ export function Edit( {
mustMatch: Record< string, Array< string > >;
};
} ) {
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const { mustMatch } = attributes;
const productId = useEntityId( 'postType', 'product' );

8
packages/js/product-editor/src/blocks/conditional/index.ts
View File

@ -1,7 +1,11 @@
/**
* External dependencies
*/
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils';
import metadata from './block.json';
import { Edit } from './edit';
@ -15,4 +19,4 @@ export const settings = {
};
export const init = () =>
initBlock( { name, metadata: metadata as never, settings } );
registerWooBlockType( { name, metadata: metadata as never, settings } );

16
packages/js/product-editor/src/blocks/description/edit.tsx
View File

@ -3,10 +3,16 @@
*/
import { __ } from '@wordpress/i18n';
import { createElement, useState } from '@wordpress/element';
import { BlockInstance, parse, serialize } from '@wordpress/blocks';
import {
BlockEditProps,
BlockAttributes,
BlockInstance,
parse,
serialize,
} from '@wordpress/blocks';
import { Button } from '@wordpress/components';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { recordEvent } from '@woocommerce/tracks';
import { useBlockProps } from '@wordpress/block-editor';
import { useEntityProp } from '@wordpress/core-data';
/**
@ -21,7 +27,7 @@ import { ModalEditor } from '../../components/modal-editor';
/**
* By default the blocks variable always contains one paragraph
* block with empty content, that causes the desciption to never
* block with empty content, that causes the description to never
* be empty. This function removes the default block to keep
* the description empty.
*
@ -39,8 +45,8 @@ function clearDescriptionIfEmpty( blocks: BlockInstance[] ) {
return blocks;
}
export function Edit() {
const blockProps = useBlockProps();
export function Edit( { attributes }: BlockEditProps< BlockAttributes > ) {
const blockProps = useWooBlockProps( attributes );
const [ isModalOpen, setIsModalOpen ] = useState( false );
const [ description, setDescription ] = useEntityProp< string >(
'postType',

4
packages/js/product-editor/src/blocks/description/index.ts
View File

@ -2,11 +2,11 @@
* External dependencies
*/
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
@ -19,4 +19,4 @@ export const settings = {
edit: Edit,
};
export const init = () => initBlock( { name, metadata, settings } );
export const init = () => registerWooBlockType( { name, metadata, settings } );

7
packages/js/product-editor/src/blocks/images/edit.tsx
View File

@ -2,18 +2,19 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { BlockEditProps, BlockAttributes } from '@wordpress/blocks';
import { DropZone } from '@wordpress/components';
import classnames from 'classnames';
import { createElement, useState } from '@wordpress/element';
import { Icon, trash } from '@wordpress/icons';
import { MediaItem } from '@wordpress/media-utils';
import { useWooBlockProps } from '@woocommerce/block-templates';
import {
MediaUploader,
ImageGallery,
ImageGalleryItem,
} from '@woocommerce/components';
import { recordEvent } from '@woocommerce/tracks';
import { useBlockProps } from '@wordpress/block-editor';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore No types for this exist yet.
// eslint-disable-next-line @woocommerce/dependency-group
@ -23,7 +24,7 @@ type Image = MediaItem & {
src: string;
};
export function Edit() {
export function Edit( { attributes }: BlockEditProps< BlockAttributes > ) {
const [ images, setImages ] = useEntityProp< MediaItem[] >(
'postType',
'product',
@ -36,7 +37,7 @@ export function Edit() {
null
);
const blockProps = useBlockProps( {
const blockProps = useWooBlockProps( attributes, {
className: classnames( {
'has-images': images.length > 0,
} ),

8
packages/js/product-editor/src/blocks/images/index.ts
View File

@ -1,7 +1,11 @@
/**
* External dependencies
*/
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils';
import metadata from './block.json';
import { Edit } from './edit';
@ -15,7 +19,7 @@ export const settings = {
};
export const init = () =>
initBlock( {
registerWooBlockType( {
name,
metadata: metadata as never,
settings,

5
packages/js/product-editor/src/blocks/inventory-email/edit.tsx
View File

@ -2,6 +2,7 @@
* External dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { Link } from '@woocommerce/components';
import { Product } from '@woocommerce/data';
import {
@ -11,7 +12,6 @@ import {
} from '@wordpress/element';
import { getSetting } from '@woocommerce/settings';
import { BlockEditProps } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
import { useInstanceId } from '@wordpress/compose';
import {
BaseControl,
@ -30,9 +30,10 @@ import { useValidation } from '../../contexts/validation-context';
import { InventoryEmailBlockAttributes } from './types';
export function Edit( {
attributes,
clientId,
}: BlockEditProps< InventoryEmailBlockAttributes > ) {
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const notifyLowStockAmount = getSetting( 'notifyLowStockAmount', 2 );
const [ lowStockAmount, setLowStockAmount ] = useEntityProp< number >(

5
packages/js/product-editor/src/blocks/inventory-email/index.ts
View File

@ -1,13 +1,12 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
import { InventoryEmailBlockAttributes } from './types';
@ -25,5 +24,5 @@ export const settings: Partial<
};
export function init() {
return initBlock( { name, metadata, settings } );
return registerWooBlockType( { name, metadata, settings } );
}

5
packages/js/product-editor/src/blocks/inventory-quantity/edit.tsx
View File

@ -1,9 +1,9 @@
/**
* External dependencies
*/
import { useWooBlockProps } from '@woocommerce/block-templates';
import { Product } from '@woocommerce/data';
import { BlockEditProps } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
import { useInstanceId } from '@wordpress/compose';
import { useEntityProp } from '@wordpress/core-data';
import { createElement, useEffect } from '@wordpress/element';
@ -21,9 +21,10 @@ import { TrackInventoryBlockAttributes } from './types';
import { useValidation } from '../../contexts/validation-context';
export function Edit( {
attributes,
clientId,
}: BlockEditProps< TrackInventoryBlockAttributes > ) {
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const [ manageStock ] = useEntityProp< boolean >(
'postType',

5
packages/js/product-editor/src/blocks/inventory-quantity/index.ts
View File

@ -1,13 +1,12 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
import { TrackInventoryBlockAttributes } from './types';
@ -25,5 +24,5 @@ export const settings: Partial<
};
export function init() {
return initBlock( { name, metadata, settings } );
return registerWooBlockType( { name, metadata, settings } );
}

7
packages/js/product-editor/src/blocks/inventory-sku/edit.tsx
View File

@ -2,8 +2,9 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { BlockEditProps, BlockAttributes } from '@wordpress/blocks';
import { createElement, createInterpolateElement } from '@wordpress/element';
import { useBlockProps } from '@wordpress/block-editor';
import { useWooBlockProps } from '@woocommerce/block-templates';
import {
BaseControl,
@ -19,8 +20,8 @@ import { useEntityProp } from '@wordpress/core-data';
* Internal dependencies
*/
export function Edit() {
const blockProps = useBlockProps();
export function Edit( { attributes }: BlockEditProps< BlockAttributes > ) {
const blockProps = useWooBlockProps( attributes );
const [ sku, setSku ] = useEntityProp( 'postType', 'product', 'sku' );

4
packages/js/product-editor/src/blocks/inventory-sku/index.ts
View File

@ -2,11 +2,11 @@
* External dependencies
*/
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
@ -19,4 +19,4 @@ export const settings = {
edit: Edit,
};
export const init = () => initBlock( { name, metadata, settings } );
export const init = () => registerWooBlockType( { name, metadata, settings } );

4
packages/js/product-editor/src/blocks/name/edit.tsx
View File

@ -9,11 +9,11 @@ import {
useState,
} from '@wordpress/element';
import { useBlockProps } from '@wordpress/block-editor';
import { BlockEditProps } from '@wordpress/blocks';
import { useInstanceId } from '@wordpress/compose';
import { cleanForSlug } from '@wordpress/url';
import { useSelect, useDispatch } from '@wordpress/data';
import { useWooBlockProps } from '@woocommerce/block-templates';
import {
PRODUCTS_STORE_NAME,
WCDataSelector,
@ -41,7 +41,7 @@ import { NameBlockAttributes } from './types';
import { useProductEdits } from '../../hooks/use-product-edits';
export function Edit( { attributes }: BlockEditProps< NameBlockAttributes > ) {
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const { editEntityRecord, saveEntityRecord } = useDispatch( 'core' );

8
packages/js/product-editor/src/blocks/name/index.ts
View File

@ -1,7 +1,11 @@
/**
* External dependencies
*/
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils';
import metadata from './block.json';
import { Edit } from './edit';
@ -15,7 +19,7 @@ export const settings = {
};
export const init = () =>
initBlock( {
registerWooBlockType( {
name,
metadata: metadata as never,
settings,

4
packages/js/product-editor/src/blocks/notice/edit.tsx
View File

@ -1,10 +1,10 @@
/**
* External dependencies
*/
import { useBlockProps } from '@wordpress/block-editor';
import { createElement } from '@wordpress/element';
import type { BlockAttributes, BlockEditProps } from '@wordpress/blocks';
import { Button } from '@wordpress/components';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { getNewPath, navigateTo } from '@woocommerce/navigation';
import { Product } from '@woocommerce/data';
import { useEntityProp } from '@wordpress/core-data';
@ -25,7 +25,7 @@ export interface NoticeBlockAttributes extends BlockAttributes {
export function Edit( {
attributes,
}: BlockEditProps< NoticeBlockAttributes > ) {
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const { buttonText, content, title, type = 'info' } = attributes;
const [ productAttributes ] = useEntityProp< Product[ 'attributes' ] >(

4
packages/js/product-editor/src/blocks/notice/index.ts
View File

@ -2,11 +2,11 @@
* External dependencies
*/
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit, NoticeBlockAttributes } from './edit';
@ -22,5 +22,5 @@ export const settings: Partial< BlockConfiguration< NoticeBlockAttributes > > =
};
export function init() {
initBlock( { name, metadata, settings } );
registerWooBlockType( { name, metadata, settings } );
}

4
packages/js/product-editor/src/blocks/password/edit.tsx
View File

@ -1,12 +1,12 @@
/**
* External dependencies
*/
import { useBlockProps } from '@wordpress/block-editor';
import { BlockEditProps } from '@wordpress/blocks';
import { useInstanceId } from '@wordpress/compose';
import { useEntityProp } from '@wordpress/core-data';
import { createElement, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { useWooBlockProps } from '@woocommerce/block-templates';
import {
BaseControl,
CheckboxControl,
@ -23,7 +23,7 @@ import { RequirePasswordBlockAttributes } from './types';
export function Edit( {
attributes,
}: BlockEditProps< RequirePasswordBlockAttributes > ) {
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const { label } = attributes;
const [ postPassword, setPostPassword ] = useEntityProp< string >(

4
packages/js/product-editor/src/blocks/password/index.ts
View File

@ -2,11 +2,11 @@
* External dependencies
*/
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
import { RequirePasswordBlockAttributes } from './types';
@ -23,5 +23,5 @@ export const settings: Partial<
};
export function init() {
return initBlock( { name, metadata, settings } );
return registerWooBlockType( { name, metadata, settings } );
}

4
packages/js/product-editor/src/blocks/pricing/edit.tsx
View File

@ -1,10 +1,10 @@
/**
* External dependencies
*/
import { useWooBlockProps } from '@woocommerce/block-templates';
import { Link } from '@woocommerce/components';
import { getNewPath } from '@woocommerce/navigation';
import { recordEvent } from '@woocommerce/tracks';
import { useBlockProps } from '@wordpress/block-editor';
import { BlockEditProps } from '@wordpress/blocks';
import { useInstanceId } from '@wordpress/compose';
import { useEntityProp } from '@wordpress/core-data';
@ -25,7 +25,7 @@ import { PricingBlockAttributes } from './types';
export function Edit( {
attributes,
}: BlockEditProps< PricingBlockAttributes > ) {
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const { name, label, help } = attributes;
const [ price, setPrice ] = useEntityProp< string >(
'postType',

4
packages/js/product-editor/src/blocks/pricing/index.ts
View File

@ -2,11 +2,11 @@
* External dependencies
*/
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
import { PricingBlockAttributes } from './types';
@ -23,5 +23,5 @@ export const settings: Partial< BlockConfiguration< PricingBlockAttributes > > =
};
export function init() {
return initBlock( { name, metadata, settings } );
return registerWooBlockType( { name, metadata, settings } );
}

4
packages/js/product-editor/src/blocks/radio/edit.tsx
View File

@ -3,8 +3,8 @@
*/
import { createElement } from '@wordpress/element';
import { BlockEditProps } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
import { useEntityProp } from '@wordpress/core-data';
import { useWooBlockProps } from '@woocommerce/block-templates';
/**
* Internal dependencies
@ -13,7 +13,7 @@ import { RadioField } from '../../components/radio-field';
import { RadioBlockAttributes } from './types';
export function Edit( { attributes }: BlockEditProps< RadioBlockAttributes > ) {
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const { description, options, property, title } = attributes;
const [ value, setValue ] = useEntityProp< string >(
'postType',

4
packages/js/product-editor/src/blocks/radio/index.ts
View File

@ -2,11 +2,11 @@
* External dependencies
*/
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
import { RadioBlockAttributes } from './types';
@ -22,5 +22,5 @@ export const settings: Partial< BlockConfiguration< RadioBlockAttributes > > = {
};
export function init() {
return initBlock( { name, metadata, settings } );
return registerWooBlockType( { name, metadata, settings } );
}

4
packages/js/product-editor/src/blocks/regular-price/edit.tsx
View File

@ -2,11 +2,11 @@
* External dependencies
*/
import classNames from 'classnames';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { Link } from '@woocommerce/components';
import { Product } from '@woocommerce/data';
import { getNewPath } from '@woocommerce/navigation';
import { recordEvent } from '@woocommerce/tracks';
import { useBlockProps } from '@wordpress/block-editor';
import { BlockEditProps } from '@wordpress/blocks';
import { useInstanceId } from '@wordpress/compose';
import { useEntityProp } from '@wordpress/core-data';
@ -29,7 +29,7 @@ export function Edit( {
attributes,
clientId,
}: BlockEditProps< SalePriceBlockAttributes > ) {
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const { label, help } = attributes;
const [ regularPrice, setRegularPrice ] = useEntityProp< string >(
'postType',

4
packages/js/product-editor/src/blocks/regular-price/index.ts
View File

@ -2,11 +2,11 @@
* External dependencies
*/
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
import { SalePriceBlockAttributes } from './types';
@ -24,5 +24,5 @@ export const settings: Partial<
};
export function init() {
return initBlock( { name, metadata, settings } );
return registerWooBlockType( { name, metadata, settings } );
}

4
packages/js/product-editor/src/blocks/sale-price/edit.tsx
View File

@ -2,8 +2,8 @@
* External dependencies
*/
import classNames from 'classnames';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { Product } from '@woocommerce/data';
import { useBlockProps } from '@wordpress/block-editor';
import { BlockEditProps } from '@wordpress/blocks';
import { useInstanceId } from '@wordpress/compose';
import { useEntityProp } from '@wordpress/core-data';
@ -26,7 +26,7 @@ export function Edit( {
attributes,
clientId,
}: BlockEditProps< SalePriceBlockAttributes > ) {
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const { label, help } = attributes;
const [ regularPrice ] = useEntityProp< string >(
'postType',

4
packages/js/product-editor/src/blocks/sale-price/index.ts
View File

@ -2,11 +2,11 @@
* External dependencies
*/
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
import { SalePriceBlockAttributes } from './types';
@ -24,5 +24,5 @@ export const settings: Partial<
};
export function init() {
return initBlock( { name, metadata, settings } );
return registerWooBlockType( { name, metadata, settings } );
}

5
packages/js/product-editor/src/blocks/schedule-sale/edit.tsx
View File

@ -1,10 +1,10 @@
/**
* External dependencies
*/
import { useWooBlockProps } from '@woocommerce/block-templates';
import { DateTimePickerControl } from '@woocommerce/components';
import { Product } from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks';
import { useBlockProps } from '@wordpress/block-editor';
import { BlockEditProps } from '@wordpress/blocks';
import { ToggleControl } from '@wordpress/components';
import { useEntityProp } from '@wordpress/core-data';
@ -24,9 +24,10 @@ import { useProductEdits } from '../../hooks/use-product-edits';
import { useValidation } from '../../contexts/validation-context';
export function Edit( {
attributes,
clientId,
}: BlockEditProps< ScheduleSalePricingBlockAttributes > ) {
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const { hasEdit } = useProductEdits();
const dateTimeFormat = getSettings().formats.datetime;

5
packages/js/product-editor/src/blocks/schedule-sale/index.ts
View File

@ -1,13 +1,12 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
import { ScheduleSalePricingBlockAttributes } from './types';
@ -25,5 +24,5 @@ export const settings: Partial<
};
export function init() {
return initBlock( { name, metadata, settings } );
return registerWooBlockType( { name, metadata, settings } );
}

4
packages/js/product-editor/src/blocks/section/edit.tsx
View File

@ -4,8 +4,8 @@
import classNames from 'classnames';
import { createElement } from '@wordpress/element';
import type { BlockEditProps } from '@wordpress/blocks';
import { useWooBlockProps } from '@woocommerce/block-templates';
import {
useBlockProps,
// @ts-expect-error no exported member.
useInnerBlocksProps,
} from '@wordpress/block-editor';
@ -20,7 +20,7 @@ export function Edit( {
attributes,
}: BlockEditProps< SectionBlockAttributes > ) {
const { description, title, blockGap } = attributes;
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const innerBlockProps = useInnerBlocksProps(
{
className: classNames(

5
packages/js/product-editor/src/blocks/section/index.ts
View File

@ -1,13 +1,12 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
import { SectionBlockAttributes } from './types';
@ -24,5 +23,5 @@ export const settings: Partial< BlockConfiguration< SectionBlockAttributes > > =
};
export function init() {
return initBlock( { name, metadata, settings } );
return registerWooBlockType( { name, metadata, settings } );
}

8
packages/js/product-editor/src/blocks/shipping-class/edit.tsx
View File

@ -2,6 +2,7 @@
* External dependencies
*/
import { BlockEditProps } from '@wordpress/blocks';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { Link } from '@woocommerce/components';
import {
EXPERIMENTAL_PRODUCT_SHIPPING_CLASSES_STORE_NAME,
@ -10,7 +11,6 @@ import {
} from '@woocommerce/data';
import { getNewPath } from '@woocommerce/navigation';
import { recordEvent } from '@woocommerce/tracks';
import { useBlockProps } from '@wordpress/block-editor';
import { BaseControl, SelectControl } from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';
import { useSelect, useDispatch } from '@wordpress/data';
@ -69,11 +69,13 @@ function extractDefaultShippingClassFromProduct(
}
}
export function Edit( {}: BlockEditProps< ShippingClassBlockAttributes > ) {
export function Edit( {
attributes,
}: BlockEditProps< ShippingClassBlockAttributes > ) {
const [ showShippingClassModal, setShowShippingClassModal ] =
useState( false );
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const { createProductShippingClass, invalidateResolution } = useDispatch(
EXPERIMENTAL_PRODUCT_SHIPPING_CLASSES_STORE_NAME

5
packages/js/product-editor/src/blocks/shipping-class/index.ts
View File

@ -1,13 +1,12 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
import { ShippingClassBlockAttributes } from './types';
@ -25,5 +24,5 @@ export const settings: Partial<
};
export function init() {
return initBlock( { name, metadata, settings } );
return registerWooBlockType( { name, metadata, settings } );
}

5
packages/js/product-editor/src/blocks/shipping-dimensions/edit.tsx
View File

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { useBlockProps } from '@wordpress/block-editor';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { BlockEditProps } from '@wordpress/blocks';
import {
OPTIONS_STORE_NAME,
@ -36,9 +36,10 @@ import {
import { useValidation } from '../../contexts/validation-context';
export function Edit( {
attributes,
clientId,
}: BlockEditProps< ShippingDimensionsBlockAttributes > ) {
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const [ dimensions, setDimensions ] =
useEntityProp< Partial< ProductDimensions > | null >(

5
packages/js/product-editor/src/blocks/shipping-dimensions/index.ts
View File

@ -1,13 +1,12 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
import { ShippingDimensionsBlockAttributes } from './types';
@ -25,5 +24,5 @@ export const settings: Partial<
};
export function init() {
return initBlock( { name, metadata, settings } );
return registerWooBlockType( { name, metadata, settings } );
}

4
packages/js/product-editor/src/blocks/summary/edit.tsx
View File

@ -2,6 +2,7 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { createElement } from '@wordpress/element';
import { BlockEditProps } from '@wordpress/blocks';
import { BaseControl } from '@wordpress/components';
@ -16,7 +17,6 @@ import {
BlockControls,
RichText,
store as blockEditorStore,
useBlockProps,
} from '@wordpress/block-editor';
/**
@ -31,7 +31,7 @@ export function Edit( {
setAttributes,
}: BlockEditProps< SummaryAttributes > ) {
const { align, allowedFormats, direction, label } = attributes;
const blockProps = useBlockProps( {
const blockProps = useWooBlockProps( attributes, {
style: { direction },
} );
const contentId = useInstanceId(

4
packages/js/product-editor/src/blocks/summary/index.ts
View File

@ -2,11 +2,11 @@
* External dependencies
*/
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils';
import blockConfiguration from './block.json';
import { Edit } from './edit';
import { SummaryAttributes } from './types';
@ -22,7 +22,7 @@ export const settings = {
};
export function init() {
return initBlock< SummaryAttributes >( {
return registerWooBlockType< SummaryAttributes >( {
name,
metadata,
settings,

5
packages/js/product-editor/src/blocks/tab/edit.tsx
View File

@ -1,10 +1,11 @@
/**
* External dependencies
*/
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
import { InnerBlocks } from '@wordpress/block-editor';
import classnames from 'classnames';
import { createElement } from '@wordpress/element';
import type { BlockAttributes, BlockEditProps } from '@wordpress/blocks';
import { useWooBlockProps } from '@woocommerce/block-templates';
/**
* Internal dependencies
@ -27,7 +28,7 @@ export function Edit( {
selectedTab?: string | null;
};
} ) {
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const { id, title, order, isSelected: contextIsSelected } = attributes;
const isSelected = context?.selectedTab === id;
if ( isSelected !== contextIsSelected ) {

4
packages/js/product-editor/src/blocks/tab/index.ts
View File

@ -2,11 +2,11 @@
* External dependencies
*/
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit, TabBlockAttributes } from './edit';
@ -21,5 +21,5 @@ export const settings: Partial< BlockConfiguration< TabBlockAttributes > > = {
};
export function init() {
initBlock( { name, metadata, settings } );
registerWooBlockType( { name, metadata, settings } );
}

4
packages/js/product-editor/src/blocks/tag/edit.tsx
View File

@ -2,9 +2,9 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { createElement } from '@wordpress/element';
import { BlockAttributes } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
import { BaseControl } from '@wordpress/components';
import { ProductTag } from '@woocommerce/data';
import { useInstanceId } from '@wordpress/compose';
@ -25,7 +25,7 @@ export function Edit( {
attributes: BlockAttributes;
context?: { postType?: string };
} ) {
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const { name, label, placeholder } = attributes;
const [ tags, setTags ] = useEntityProp<
Pick< ProductTag, 'id' | 'name' >[]

8
packages/js/product-editor/src/blocks/tag/index.ts
View File

@ -1,7 +1,11 @@
/**
* External dependencies
*/
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils';
import metadata from './block.json';
import { Edit } from './edit';
@ -15,4 +19,4 @@ export const settings = {
};
export const init = () =>
initBlock( { name, metadata: metadata as never, settings } );
registerWooBlockType( { name, metadata: metadata as never, settings } );

4
packages/js/product-editor/src/blocks/taxonomy/edit.tsx
View File

@ -2,7 +2,6 @@
* External dependencies
*/
import type { BlockAttributes } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
import {
createElement,
useState,
@ -11,6 +10,7 @@ import {
useEffect,
} from '@wordpress/element';
import '@woocommerce/settings';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { __experimentalSelectTreeControl as SelectTreeControl } from '@woocommerce/components';
import { useEntityProp } from '@wordpress/core-data';
import { useDebounce, useInstanceId } from '@wordpress/compose';
@ -37,7 +37,7 @@ export function Edit( {
}: {
attributes: TaxonomyBlockAttributes;
} ) {
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const { hierarchical }: TaxonomyMetadata = useSelect(
( select ) =>
select( 'core' ).getTaxonomy( attributes.slug ) || {

8
packages/js/product-editor/src/blocks/taxonomy/index.ts
View File

@ -1,7 +1,11 @@
/**
* External dependencies
*/
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils';
import metadata from './block.json';
import { Edit } from './edit';
@ -15,7 +19,7 @@ export const settings = {
};
export const init = () =>
initBlock( {
registerWooBlockType( {
name,
metadata: metadata as never,
settings,

4
packages/js/product-editor/src/blocks/toggle/edit.tsx
View File

@ -3,9 +3,9 @@
*/
import { createElement } from '@wordpress/element';
import { BlockEditProps } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
import { useEntityProp } from '@wordpress/core-data';
import { ToggleControl } from '@wordpress/components';
import { useWooBlockProps } from '@woocommerce/block-templates';
/**
* Internal dependencies
@ -16,7 +16,7 @@ import { sanitizeHTML } from '../../utils/sanitize-html';
export function Edit( {
attributes,
}: BlockEditProps< ToggleBlockAttributes > ) {
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const { label, property, disabled, disabledCopy } = attributes;
const [ value, setValue ] = useEntityProp< boolean >(
'postType',

4
packages/js/product-editor/src/blocks/toggle/index.ts
View File

@ -2,11 +2,11 @@
* External dependencies
*/
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
import { ToggleBlockAttributes } from './types';
@ -23,5 +23,5 @@ export const settings: Partial< BlockConfiguration< ToggleBlockAttributes > > =
};
export function init() {
return initBlock( { name, metadata, settings } );
return registerWooBlockType( { name, metadata, settings } );
}

5
packages/js/product-editor/src/blocks/variation-items/edit.tsx
View File

@ -8,7 +8,7 @@ import {
ProductVariation,
useUserPreferences,
} from '@woocommerce/data';
import { useBlockProps } from '@wordpress/block-editor';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { recordEvent } from '@woocommerce/tracks';
import { BlockEditProps } from '@wordpress/blocks';
import { createElement, useMemo, useRef } from '@wordpress/element';
@ -29,6 +29,7 @@ import { TRACKS_SOURCE } from '../../constants';
import { handlePrompt } from '../../utils/handle-prompt';
export function Edit( {
attributes,
context,
}: BlockEditProps< VariationOptionsBlockAttributes > & {
context?: {
@ -40,7 +41,7 @@ export function Edit( {
EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME
);
const productId = useEntityId( 'postType', 'product' );
const blockProps = useBlockProps();
const blockProps = useWooBlockProps( attributes );
const [ productStatus ] = useEntityProp< string >(
'postType',
'product',

4
packages/js/product-editor/src/blocks/variation-items/index.ts
View File

@ -2,11 +2,11 @@
* External dependencies
*/
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
import { VariationOptionsBlockAttributes } from './types';
@ -24,5 +24,5 @@ export const settings: Partial<
};
export function init() {
return initBlock( { name, metadata, settings } );
return registerWooBlockType( { name, metadata, settings } );
}

9
packages/js/product-editor/src/blocks/variation-options/edit.tsx
View File

@ -2,12 +2,13 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import { BlockEditProps, BlockAttributes } from '@wordpress/blocks';
import {
createElement,
createInterpolateElement,
useMemo,
} from '@wordpress/element';
import { useWooBlockProps } from '@woocommerce/block-templates';
import {
Product,
ProductAttribute,
@ -26,8 +27,10 @@ import { useProductAttributes } from '../../hooks/use-product-attributes';
import { AttributeControl } from '../../components/attribute-control';
import { useProductVariationsHelper } from '../../hooks/use-product-variations-helper';
export function Edit() {
const blockProps = useBlockProps();
export function Edit( {
attributes: blockAttributes,
}: BlockEditProps< BlockAttributes > ) {
const blockProps = useWooBlockProps( blockAttributes );
const { generateProductVariations } = useProductVariationsHelper();
const {
updateUserPreferences,

5
packages/js/product-editor/src/blocks/variation-options/index.ts
View File

@ -1,13 +1,12 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
import { VariationOptionsBlockAttributes } from './types';
@ -25,5 +24,5 @@ export const settings: Partial<
};
export function init() {
return initBlock( { name, metadata, settings } );
return registerWooBlockType( { name, metadata, settings } );
}

4
packages/js/product-editor/src/blocks/variations/edit.tsx
View File

@ -4,12 +4,12 @@
import classNames from 'classnames';
import type { BlockEditProps } from '@wordpress/blocks';
import { Button } from '@wordpress/components';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { Product, ProductAttribute } from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks';
import { createElement, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
useBlockProps,
// @ts-expect-error no exported member.
useInnerBlocksProps,
} from '@wordpress/block-editor';
@ -63,7 +63,7 @@ export function Edit( {
const hasAttributes = hasAttributesUsedForVariations( productAttributes );
const blockProps = useBlockProps( {
const blockProps = useWooBlockProps( attributes, {
className: classNames( {
'wp-block-woocommerce-product-variations-fields--has-attributes':
hasAttributes,

5
packages/js/product-editor/src/blocks/variations/index.ts
View File

@ -1,13 +1,12 @@
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
import { BlockConfiguration } from '@wordpress/blocks';
import { registerWooBlockType } from '@woocommerce/block-templates';
/**
* Internal dependencies
*/
import { initBlock } from '../../utils/init-block';
import blockConfiguration from './block.json';
import { Edit } from './edit';
import { VariationsBlockAttributes } from './types';
@ -25,5 +24,5 @@ export const settings: Partial<
};
export function init() {
return initBlock( { name, metadata, settings } );
return registerWooBlockType( { name, metadata, settings } );
}

6
packages/js/product-editor/src/components/tabs/test/tabs.spec.tsx
View File

@ -13,9 +13,9 @@ import { useState } from '@wordpress/element';
import { Tabs } from '../';
import { Edit as Tab } from '../../../blocks/tab/edit';
jest.mock( '@wordpress/block-editor', () => ( {
...jest.requireActual( '@wordpress/block-editor' ),
useBlockProps: jest.fn(),
jest.mock( '@woocommerce/block-templates', () => ( {
...jest.requireActual( '@woocommerce/block-templates' ),
useWooBlockProps: jest.fn(),
} ) );
jest.mock( '@woocommerce/navigation', () => ( {

16
packages/js/product-editor/src/utils/init-block.ts
View File

@ -1,11 +1,9 @@
/**
* External dependencies
*/
import {
Block,
BlockConfiguration,
registerBlockType,
} from '@wordpress/blocks';
import { Block, BlockConfiguration } from '@wordpress/blocks';
import deprecated from '@wordpress/deprecated';
import { registerWooBlockType } from '@woocommerce/block-templates';
interface BlockRepresentation< T extends Record< string, object > > {
name?: string;
@ -23,9 +21,13 @@ export function initBlock<
// eslint-disable-next-line @typescript-eslint/no-explicit-any
T extends Record< string, any > = Record< string, any >
>( block: BlockRepresentation< T > ): Block< T > | undefined {
deprecated( 'initBlock()', {
alternative: 'registerWooBlockType() from @woocommerce/block-templates',
} );
if ( ! block ) {
return;
}
const { metadata, settings, name } = block;
return registerBlockType< T >( { name, ...metadata }, settings );
return registerWooBlockType( block );
}

1
plugins/woocommerce-admin/webpack.config.js
View File

@ -40,6 +40,7 @@ const wcAdminPackages = [
'data',
'tracks',
'onboarding',
'block-templates',
'product-editor',
];
// wpAdminScripts are loaded on wp-admin pages outside the context of WooCommerce Admin

5
plugins/woocommerce-beta-tester/changelog/add-expose-block-id-and-order Normal file
View File

@ -0,0 +1,5 @@
Significance: patch
Type: tweak
Comment: Code formatting only.

6
plugins/woocommerce-beta-tester/package.json
View File

@ -50,9 +50,9 @@
"js": "assets/js/*.js"
}
},
"config": {
"build_step": "pnpm run build:zip"
},
"config": {
"build_step": "pnpm run build:zip"
},
"scripts": {
"postinstall": "composer install",
"changelog": "composer exec -- changelogger",

4
plugins/woocommerce/changelog/add-expose-block-id-and-order Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Include template block ID and block order in formatted block template so they are available to the client.

15
plugins/woocommerce/src/Internal/Admin/BlockTemplates/AbstractBlock.php
View File

@ -10,6 +10,8 @@ use Automattic\WooCommerce\Admin\BlockTemplates\ContainerInterface;
* Block configuration used to specify blocks in BlockTemplate.
*/
class AbstractBlock implements BlockInterface {
use BlockFormattedTemplateTrait;
/**
* The block name.
*
@ -191,17 +193,4 @@ class AbstractBlock implements BlockInterface {
return ! ( $is_in_parent && $is_in_root_template );
}
/**
* Get the block configuration as a formatted template.
*
* @return array The block configuration as a formatted template.
*/
public function get_formatted_template(): array {
$arr = [
$this->get_name(),
$this->get_attributes(),
];
return $arr;
}
}

9
plugins/woocommerce/src/Internal/Admin/BlockTemplates/BlockContainerTrait.php
View File

@ -9,6 +9,10 @@ use Automattic\WooCommerce\Admin\BlockTemplates\ContainerInterface;
* Trait for block containers.
*/
trait BlockContainerTrait {
use BlockFormattedTemplateTrait {
get_formatted_template as get_block_formatted_template;
}
/**
* The inner blocks.
*
@ -197,10 +201,7 @@ trait BlockContainerTrait {
* Get the inner blocks as a formatted template.
*/
public function get_formatted_template(): array {
$arr = [
$this->get_name(),
$this->get_attributes(),
];
$arr = $this->get_block_formatted_template();
$inner_blocks = $this->get_inner_blocks_sorted_by_order();

28
plugins/woocommerce/src/Internal/Admin/BlockTemplates/BlockFormattedTemplateTrait.php Normal file
View File

@ -0,0 +1,28 @@
<?php
namespace Automattic\WooCommerce\Internal\Admin\BlockTemplates;
/**
* Trait for block formatted template.
*/
trait BlockFormattedTemplateTrait {
/**
* Get the block configuration as a formatted template.
*
* @return array The block configuration as a formatted template.
*/
public function get_formatted_template(): array {
$arr = [
$this->get_name(),
array_merge(
$this->get_attributes(),
[
'_templateBlockId' => $this->get_id(),
'_templateBlockOrder' => $this->get_order(),
]
),
];
return $arr;
}
}

10
plugins/woocommerce/src/Internal/Admin/WCAdminAssets.php
View File

@ -272,6 +272,7 @@ class WCAdminAssets {
'wc-store-data',
'wc-currency',
'wc-navigation',
'wc-block-templates',
'wc-product-editor',
);
@ -337,6 +338,14 @@ class WCAdminAssets {
);
wp_style_add_data( 'wc-components', 'rtl', 'replace' );
wp_register_style(
'wc-block-templates',
self::get_url( 'block-templates/style', 'css' ),
array(),
$css_file_version
);
wp_style_add_data( 'wc-block-templates', 'rtl', 'replace' );
wp_register_style(
'wc-product-editor',
self::get_url( 'product-editor/style', 'css' ),
@ -405,6 +414,7 @@ class WCAdminAssets {
'wc-date',
'wc-components',
'wc-tracks',
'wc-block-templates',
'wc-product-editor',
];
foreach ( $handles_for_injection as $handle ) {

97
plugins/woocommerce/tests/php/src/Internal/Admin/BlockTemplates/BlockTemplateTest.php
View File

@ -310,42 +310,55 @@ class BlockTemplateTest extends WC_Unit_Test_Case {
[
'test-block-name-a',
[
'attr-1' => 'value-1',
'attr-2' => 'value-2',
'attr-1' => 'value-1',
'attr-2' => 'value-2',
'_templateBlockId' => 'test-block-name-a-1',
'_templateBlockOrder' => 10,
],
],
[
'test-block-name-b',
[
'attr-1' => 'value-1',
'attr-2' => 'value-2',
'attr-1' => 'value-1',
'attr-2' => 'value-2',
'_templateBlockId' => 'test-block-name-b-1',
'_templateBlockOrder' => 50,
],
[
[
'test-block-name-1',
[
'attr-3' => 'value-3',
'attr-4' => 'value-4',
'attr-3' => 'value-3',
'attr-4' => 'value-4',
'_templateBlockId' => 'test-block-name-1-1',
'_templateBlockOrder' => 10,
],
],
[
'test-block-name-2',
[
'attr-1' => 'value-1',
'attr-2' => 'value-2',
'attr-1' => 'value-1',
'attr-2' => 'value-2',
'_templateBlockId' => 'test-block-name-2-1',
'_templateBlockOrder' => 20,
],
],
[
'test-block-name-3',
[],
[
'_templateBlockId' => 'test-block-name-3-1',
'_templateBlockOrder' => 30,
],
],
],
],
[
'test-block-name-c',
[
'attr-c1' => 'value-c1',
'attr-c2' => 'value-c2',
'attr-c1' => 'value-c1',
'attr-c2' => 'value-c2',
'_templateBlockId' => 'test-block-name-c-1',
'_templateBlockOrder' => 100,
],
],
],
@ -446,52 +459,71 @@ class BlockTemplateTest extends WC_Unit_Test_Case {
[
'test-block-name-a',
[
'attr-1' => 'value-1',
'attr-2' => 'value-2',
'attr-1' => 'value-1',
'attr-2' => 'value-2',
'_templateBlockId' => 'a',
'_templateBlockOrder' => 10,
],
[
[
'inserted-block',
[],
[
'_templateBlockId' => 'inserted-block-1',
'_templateBlockOrder' => 10,
],
],
],
],
[
'test-block-name-b',
[
'attr-1' => 'value-1',
'attr-2' => 'value-2',
'attr-1' => 'value-1',
'attr-2' => 'value-2',
'_templateBlockId' => 'b',
'_templateBlockOrder' => 50,
],
[
[
'test-block-name-1',
[
'attr-3' => 'value-3',
'attr-4' => 'value-4',
'attr-3' => 'value-3',
'attr-4' => 'value-4',
'_templateBlockId' => 'test-block-name-1-1',
'_templateBlockOrder' => 10,
],
],
[
'another-inserted-block',
[],
[
'_templateBlockId' => 'another-inserted-block-1',
'_templateBlockOrder' => 15,
],
],
[
'test-block-name-2',
[
'attr-1' => 'value-1',
'attr-2' => 'value-2',
'attr-1' => 'value-1',
'attr-2' => 'value-2',
'_templateBlockId' => 'test-block-name-2-1',
'_templateBlockOrder' => 20,
],
],
[
'test-block-name-3',
[],
[
'_templateBlockId' => 'test-block-name-3-1',
'_templateBlockOrder' => 30,
],
],
],
],
[
'test-block-name-c',
[
'attr-c1' => 'value-c1',
'attr-c2' => 'value-c2',
'attr-c1' => 'value-c1',
'attr-c2' => 'value-c2',
'_templateBlockId' => 'test-block-name-c-1',
'_templateBlockOrder' => 100,
],
],
],
@ -585,21 +617,28 @@ class BlockTemplateTest extends WC_Unit_Test_Case {
[
'test-block-name-a',
[
'attr-1' => 'value-1',
'attr-2' => 'value-2',
'attr-1' => 'value-1',
'attr-2' => 'value-2',
'_templateBlockId' => 'a',
'_templateBlockOrder' => 10,
],
[
[
'inserted-block',
[],
[
'_templateBlockId' => 'inserted-block-1',
'_templateBlockOrder' => 10,
],
],
],
],
[
'test-block-name-c',
[
'attr-c1' => 'value-c1',
'attr-c2' => 'value-c2',
'attr-c1' => 'value-c1',
'attr-c2' => 'value-c2',
'_templateBlockId' => 'test-block-name-c-1',
'_templateBlockOrder' => 100,
],
],
],

47
plugins/woocommerce/tests/php/src/Internal/Admin/BlockTemplates/BlockTest.php
View File

@ -394,20 +394,27 @@ class BlockTest extends WC_Unit_Test_Case {
[
'test-block-name',
[
'attr-1' => 'value-1',
'attr-2' => 'value-2',
'attr-1' => 'value-1',
'attr-2' => 'value-2',
'_templateBlockId' => 'test-block-id',
'_templateBlockOrder' => 10,
],
[
[
'test-block-name-2',
[
'attr-3' => 'value-3',
'attr-4' => 'value-4',
'attr-3' => 'value-3',
'attr-4' => 'value-4',
'_templateBlockId' => 'test-block-id-2',
'_templateBlockOrder' => 10,
],
],
[
'test-block-name-3',
[],
[
'_templateBlockId' => 'test-block-id-3',
'_templateBlockOrder' => 10,
],
],
],
],
@ -466,27 +473,45 @@ class BlockTest extends WC_Unit_Test_Case {
$this->assertSame(
[
'test-block-name',
[],
[
'_templateBlockId' => 'test-block-name-1',
'_templateBlockOrder' => 10,
],
[
[
'one',
[],
[
'_templateBlockId' => 'one-1',
'_templateBlockOrder' => 1,
],
],
[
'two',
[],
[
'_templateBlockId' => 'two-1',
'_templateBlockOrder' => 2,
],
],
[
'three',
[],
[
'_templateBlockId' => 'three-1',
'_templateBlockOrder' => 3,
],
],
[
'four',
[],
[
'_templateBlockId' => 'four-1',
'_templateBlockOrder' => 4,
],
],
[
'five',
[],
[
'_templateBlockId' => 'five-1',
'_templateBlockOrder' => 5,
],
],
],
],

22
plugins/woocommerce/tests/php/src/Internal/Admin/BlockTemplates/CustomBlockTest.php
View File

@ -37,18 +37,25 @@ class CustomBlockTest extends WC_Unit_Test_Case {
$this->assertSame(
[
'test-block-name',
[],
[
'_templateBlockId' => 'test-block-name-1',
'_templateBlockOrder' => 10,
],
[
[
'custom-inner-block',
[
'title' => 'a',
'title' => 'a',
'_templateBlockId' => 'custom-inner-block-1',
'_templateBlockOrder' => 10,
],
],
[
'custom-inner-block',
[
'title' => 'b',
'title' => 'b',
'_templateBlockId' => 'custom-inner-block-2',
'_templateBlockOrder' => 10,
],
],
],
@ -72,12 +79,17 @@ class CustomBlockTest extends WC_Unit_Test_Case {
$this->assertSame(
[
'test-block-name',
[],
[
'_templateBlockId' => 'test-block-name-1',
'_templateBlockOrder' => 10,
],
[
[
'custom-inner-block',
[
'title' => 'b',
'title' => 'b',
'_templateBlockId' => 'custom-inner-block-2',
'_templateBlockOrder' => 10,
],
],
],

1750
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff