): JSX.Element {
19 | return (
20 |
21 | setAttributes({ message: val.toString() })}
25 | />
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { registerBlockType } from '@wordpress/blocks';
2 |
3 | /* adds styles to bundle */
4 | import './style/style-admin.scss';
5 |
6 | import blockConfig from '../block.json';
7 |
8 | import Edit from './edit';
9 | import Save from './save';
10 |
11 | const jsonData = blockConfig;
12 |
13 | /** Registering the block with the name of the block and the attributes of the block. */
14 | registerBlockType(jsonData.name, {
15 | ...jsonData,
16 | /**
17 | * @see ./edit.js
18 | */
19 | edit: Edit,
20 | /**
21 | * @see ./save.js
22 | */
23 | save: Save,
24 | icon: 'universal-access-alt',
25 | supports: {
26 | align: true,
27 | className: true,
28 | spacing: {
29 | margin: true, // Enable margin UI control.
30 | padding: true, // Enable padding UI control.
31 | blockGap: true, // Enables block spacing UI control.
32 | },
33 | },
34 | attributes: {
35 | message: {
36 | type: 'string',
37 | source: 'text',
38 | default: '',
39 | },
40 | },
41 | });
42 |
--------------------------------------------------------------------------------
/src/save.tsx:
--------------------------------------------------------------------------------
1 | /* adds the frontend styles to bundle */
2 | import './style/style.scss';
3 |
4 | import { useBlockProps } from '@wordpress/block-editor';
5 | import type { BlockSaveProps } from '@wordpress/blocks';
6 |
7 | import { TextDef } from './types';
8 | /**
9 | * The save function defines the way in which the different attributes should be combined into the final markup, which is then serialized into post_content.
10 | *
11 | * @param props
12 | * @param props.attributes - the block attributes
13 | * @function Object() { [native code] }
14 | */
15 | function Save({ attributes }: BlockSaveProps): JSX.Element {
16 | const blockProps = useBlockProps.save({
17 | className: 'block-boilerplate',
18 | });
19 | return {attributes.message}
;
20 | }
21 |
22 | export default Save;
23 |
--------------------------------------------------------------------------------
/src/style/style-admin.scss:
--------------------------------------------------------------------------------
1 | /* backend */
2 | .wp-block-block-boilerplate {
3 | background: khaki;
4 | }
5 |
--------------------------------------------------------------------------------
/src/style/style.scss:
--------------------------------------------------------------------------------
1 | /* frontend */
2 | .block-boilerplate {
3 | background: coral;
4 | }
5 |
--------------------------------------------------------------------------------
/src/types.d.ts:
--------------------------------------------------------------------------------
1 | /* Defining an interface. */
2 | export interface TextDef {
3 | message: string;
4 | }
5 |
--------------------------------------------------------------------------------
/tests/e2e/main.test.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Load utilities from the e2e-test-utils package.
3 | */
4 | import { visitAdminPage } from '@wordpress/e2e-test-utils';
5 |
6 | // Name of the test suite.
7 | describe( 'Hello World', () => {
8 | // Flow being tested.
9 | // Ideally each flow is independent and can be run separately.
10 | it( 'Should load properly', async () => {
11 | // Navigate the admin and performs tasks
12 | // Use Puppeteer APIs to interact with mouse, keyboard...
13 | await visitAdminPage( '/' );
14 |
15 | // Assertions
16 | const nodes = await page.$x(
17 | '//h2[contains(text(), "Welcome to WordPress!")]'
18 | );
19 | expect( nodes.length ).not.toEqual( 0 );
20 | }, 60000 );
21 | } );
22 |
--------------------------------------------------------------------------------
/tests/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "transformIgnorePatterns": [ "/node_modules/" ],
3 | "compilerOptions": {
4 | "strictNullChecks": true,
5 | "esModuleInterop": true
6 | },
7 | "coverageThreshold": {
8 | "global": {
9 | "branches": 10,
10 | "functions": 10,
11 | "lines": 100,
12 | "statements": 10
13 | }
14 | },
15 | "collectCoverage": true
16 | }
17 |
--------------------------------------------------------------------------------
/tests/unit/main.test.ts:
--------------------------------------------------------------------------------
1 | /* JEST testing */
2 | describe( 'boilerplate test', () => {
3 | it( 'it can make simple additions', () => {
4 | expect( 1 + 2 ).toBe( 3 );
5 | } );
6 | } );
7 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@wp-blocks/tsconfig",
3 | "compilerOptions": {
4 | "rootDir": "./src",
5 | "outDir": "./build/@types",
6 |
7 | "strict": true,
8 | "resolveJsonModule": true,
9 | "forceConsistentCasingInFileNames": true,
10 | "pretty": true,
11 |
12 | "typeRoots": ["./node_modules/@types"],
13 | "types": [
14 | "puppeteer",
15 | "jest-environment-puppeteer",
16 | "expect-puppeteer",
17 | "src/@types"
18 | ]
19 | },
20 | "include": ["./src/**/*", "./block.json"],
21 | "exclude": [ "build", "coverage", "**/*.test.ts" ]
22 | }
23 |
--------------------------------------------------------------------------------
/typescript-wp-block.php:
--------------------------------------------------------------------------------
1 |