├── .gitignore
├── src
├── block1
│ ├── tailwind.config.js
│ ├── editor.scss
│ ├── style.scss
│ ├── block.json
│ ├── save.js
│ ├── index.js
│ └── edit.js
├── block2
│ ├── tailwind.config.js
│ ├── editor.scss
│ ├── style.scss
│ ├── block.json
│ ├── save.js
│ ├── index.js
│ └── edit.js
└── block3
│ ├── tailwind.config.js
│ ├── editor.scss
│ ├── style.scss
│ ├── block.json
│ ├── save.js
│ ├── index.js
│ └── edit.js
├── postcss.config.js
├── package.json
├── tailwind-blocks.php
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | build
2 | node_modules
3 | .editorconfig
4 |
--------------------------------------------------------------------------------
/src/block1/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | content: ['./src/block1/*js'],
3 | theme: {
4 | extend: {},
5 | },
6 | plugins: [],
7 | };
8 |
--------------------------------------------------------------------------------
/src/block2/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | content: ['./src/block2/*js'],
3 | theme: {
4 | extend: {},
5 | },
6 | plugins: [],
7 | };
8 |
--------------------------------------------------------------------------------
/src/block3/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | content: ['./src/block3/*js'],
3 | theme: {
4 | extend: {},
5 | },
6 | plugins: [],
7 | };
8 |
--------------------------------------------------------------------------------
/src/block1/editor.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * The following styles get applied inside the editor only.
3 | *
4 | * Replace them with your own styles or remove the file completely.
5 | */
6 |
7 | .wp-block-create-block-block1 {
8 | border: 2px dotted #f00;
9 | }
10 |
--------------------------------------------------------------------------------
/src/block2/editor.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * The following styles get applied inside the editor only.
3 | *
4 | * Replace them with your own styles or remove the file completely.
5 | */
6 |
7 | .wp-block-create-block-block2 {
8 | border: 2px dotted #f00;
9 | }
10 |
--------------------------------------------------------------------------------
/src/block3/editor.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * The following styles get applied inside the editor only.
3 | *
4 | * Replace them with your own styles or remove the file completely.
5 | */
6 |
7 | .wp-block-create-block-block3 {
8 | border: 2px dotted #f00;
9 | }
10 |
--------------------------------------------------------------------------------
/src/block1/style.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * The following styles get applied both on the front of your site
3 | * and in the editor.
4 | *
5 | * Replace them with your own styles or remove the file completely.
6 | */
7 |
8 | @tailwind components;
9 | @tailwind utilities;
10 |
11 | .wp-block-create-block-block1 {
12 | background-color: #21759b;
13 | color: #fff;
14 | }
15 |
--------------------------------------------------------------------------------
/src/block2/style.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * The following styles get applied both on the front of your site
3 | * and in the editor.
4 | *
5 | * Replace them with your own styles or remove the file completely.
6 | */
7 |
8 | @tailwind components;
9 | @tailwind utilities;
10 |
11 | .wp-block-create-block-block2 {
12 | background-color: #1dd85c;
13 | color: #fff;
14 | }
15 |
--------------------------------------------------------------------------------
/src/block3/style.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * The following styles get applied both on the front of your site
3 | * and in the editor.
4 | *
5 | * Replace them with your own styles or remove the file completely.
6 | */
7 |
8 | @tailwind components;
9 | @tailwind utilities;
10 |
11 | .wp-block-create-block-block3 {
12 | background-color: #df1a5c;
13 | color: #fff;
14 | }
15 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | 'postcss-multiple-tailwind': {
4 | mode: 'auto',
5 | },
6 | autoprefixer: { grid: true },
7 | ...(process.env.NODE_ENV === 'production'
8 | ? {
9 | cssnano: {
10 | preset: [
11 | 'default',
12 | {
13 | discardComments: {
14 | removeAll: true,
15 | },
16 | },
17 | ],
18 | },
19 | }
20 | : {}),
21 | },
22 | };
23 |
--------------------------------------------------------------------------------
/src/block1/block.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://schemas.wp.org/trunk/block.json",
3 | "apiVersion": 2,
4 | "name": "create-block/block1",
5 | "version": "0.1.0",
6 | "title": "Tailwind Block #1",
7 | "category": "widgets",
8 | "icon": "smiley",
9 | "description": "Example Tailwind CSS static block scaffolded with Create Block tool.",
10 | "supports": {
11 | "html": false
12 | },
13 | "textdomain": "tailwind-blocks",
14 | "editorScript": "file:./index.js",
15 | "editorStyle": "file:./index.css",
16 | "style": "file:./style-index.css"
17 | }
18 |
--------------------------------------------------------------------------------
/src/block2/block.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://schemas.wp.org/trunk/block.json",
3 | "apiVersion": 2,
4 | "name": "create-block/block2",
5 | "version": "0.1.0",
6 | "title": "Tailwind Block #2",
7 | "category": "widgets",
8 | "icon": "smiley",
9 | "description": "Example Tailwind CSS static block scaffolded with Create Block tool.",
10 | "supports": {
11 | "html": false
12 | },
13 | "textdomain": "tailwind-blocks",
14 | "editorScript": "file:./index.js",
15 | "editorStyle": "file:./index.css",
16 | "style": "file:./style-index.css"
17 | }
18 |
--------------------------------------------------------------------------------
/src/block3/block.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://schemas.wp.org/trunk/block.json",
3 | "apiVersion": 2,
4 | "name": "create-block/block3",
5 | "version": "0.1.0",
6 | "title": "Tailwind Block #3",
7 | "category": "widgets",
8 | "icon": "smiley",
9 | "description": "Example Tailwind CSS static block scaffolded with Create Block tool.",
10 | "supports": {
11 | "html": false
12 | },
13 | "textdomain": "tailwind-blocks",
14 | "editorScript": "file:./index.js",
15 | "editorStyle": "file:./index.css",
16 | "style": "file:./style-index.css"
17 | }
18 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tailwind-blocks",
3 | "version": "0.1.0",
4 | "description": "Example static block scaffolded with Create Block tool.",
5 | "author": "The WordPress Contributors",
6 | "license": "GPL-2.0-or-later",
7 | "main": "build/block1/index.js",
8 | "scripts": {
9 | "build": "wp-scripts build",
10 | "format": "wp-scripts format",
11 | "lint:css": "wp-scripts lint-style",
12 | "lint:js": "wp-scripts lint-js",
13 | "packages-update": "wp-scripts packages-update",
14 | "plugin-zip": "wp-scripts plugin-zip",
15 | "start": "wp-scripts start"
16 | },
17 | "devDependencies": {
18 | "@wordpress/scripts": "^22.2.1",
19 | "autoprefixer": "^10.4.2",
20 | "cssnano": "^5.1.4",
21 | "postcss": "^8.4.10",
22 | "postcss-cli": "^9.1.0",
23 | "postcss-multiple-tailwind": "^1.0.0",
24 | "tailwindcss": "^3.0.23"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/tailwind-blocks.php:
--------------------------------------------------------------------------------
1 |
28 | {__(
29 | 'Block1 - Hello from the saved content!',
30 | 'tailwind-blocks'
31 | )}
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/src/block2/save.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Retrieves the translation of text.
3 | *
4 | * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
5 | */
6 | import { __ } from '@wordpress/i18n';
7 |
8 | /**
9 | * React hook that is used to mark the block wrapper element.
10 | * It provides all the necessary props like the class name.
11 | *
12 | * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
13 | */
14 | import { useBlockProps } from '@wordpress/block-editor';
15 |
16 | /**
17 | * The save function defines the way in which the different attributes should
18 | * be combined into the final markup, which is then serialized by the block
19 | * editor into `post_content`.
20 | *
21 | * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save
22 | *
23 | * @return {WPElement} Element to render.
24 | */
25 | export default function save() {
26 | return (
27 |
28 | {__(
29 | 'Block2 - Hello from the saved content!',
30 | 'tailwind-blocks'
31 | )}
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/src/block3/save.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Retrieves the translation of text.
3 | *
4 | * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
5 | */
6 | import { __ } from '@wordpress/i18n';
7 |
8 | /**
9 | * React hook that is used to mark the block wrapper element.
10 | * It provides all the necessary props like the class name.
11 | *
12 | * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
13 | */
14 | import { useBlockProps } from '@wordpress/block-editor';
15 |
16 | /**
17 | * The save function defines the way in which the different attributes should
18 | * be combined into the final markup, which is then serialized by the block
19 | * editor into `post_content`.
20 | *
21 | * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save
22 | *
23 | * @return {WPElement} Element to render.
24 | */
25 | export default function save() {
26 | return (
27 |
28 | {__(
29 | 'Block3 - Hello from the saved content!',
30 | 'tailwind-blocks'
31 | )}
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/src/block1/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Registers a new block provided a unique name and an object defining its behavior.
3 | *
4 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
5 | */
6 | import { registerBlockType } from '@wordpress/blocks';
7 |
8 | /**
9 | * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
10 | * All files containing `style` keyword are bundled together. The code used
11 | * gets applied both to the front of your site and to the editor.
12 | *
13 | * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
14 | */
15 | import './style.scss';
16 |
17 | /**
18 | * Internal dependencies
19 | */
20 | import Edit from './edit';
21 | import save from './save';
22 | import json from './json';
23 |
24 | const { name } = json;
25 |
26 | /**
27 | * Every block starts by registering a new block type definition.
28 | *
29 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
30 | */
31 | registerBlockType(name, {
32 | /**
33 | * @see ./edit.js
34 | */
35 | edit: Edit,
36 | /**
37 | * @see ./save.js
38 | */
39 | save,
40 | });
41 |
--------------------------------------------------------------------------------
/src/block2/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Registers a new block provided a unique name and an object defining its behavior.
3 | *
4 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
5 | */
6 | import { registerBlockType } from '@wordpress/blocks';
7 |
8 | /**
9 | * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
10 | * All files containing `style` keyword are bundled together. The code used
11 | * gets applied both to the front of your site and to the editor.
12 | *
13 | * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
14 | */
15 | import './style.scss';
16 |
17 | /**
18 | * Internal dependencies
19 | */
20 | import Edit from './edit';
21 | import save from './save';
22 | import json from './json';
23 |
24 | const { name } = json;
25 |
26 | /**
27 | * Every block starts by registering a new block type definition.
28 | *
29 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
30 | */
31 | registerBlockType(name, {
32 | /**
33 | * @see ./edit.js
34 | */
35 | edit: Edit,
36 | /**
37 | * @see ./save.js
38 | */
39 | save,
40 | });
41 |
--------------------------------------------------------------------------------
/src/block3/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Registers a new block provided a unique name and an object defining its behavior.
3 | *
4 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
5 | */
6 | import { registerBlockType } from '@wordpress/blocks';
7 |
8 | /**
9 | * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
10 | * All files containing `style` keyword are bundled together. The code used
11 | * gets applied both to the front of your site and to the editor.
12 | *
13 | * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
14 | */
15 | import './style.scss';
16 |
17 | /**
18 | * Internal dependencies
19 | */
20 | import Edit from './edit';
21 | import save from './save';
22 | import json from './json';
23 |
24 | const { name } = json;
25 |
26 | /**
27 | * Every block starts by registering a new block type definition.
28 | *
29 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
30 | */
31 | registerBlockType(name, {
32 | /**
33 | * @see ./edit.js
34 | */
35 | edit: Edit,
36 | /**
37 | * @see ./save.js
38 | */
39 | save,
40 | });
41 |
--------------------------------------------------------------------------------
/src/block1/edit.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Retrieves the translation of text.
3 | *
4 | * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
5 | */
6 | import { __ } from '@wordpress/i18n';
7 |
8 | /**
9 | * React hook that is used to mark the block wrapper element.
10 | * It provides all the necessary props like the class name.
11 | *
12 | * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
13 | */
14 | import { useBlockProps } from '@wordpress/block-editor';
15 |
16 | /**
17 | * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
18 | * Those files can contain any CSS code that gets applied to the editor.
19 | *
20 | * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
21 | */
22 | import './editor.scss';
23 |
24 | /**
25 | * The edit function describes the structure of your block in the context of the
26 | * editor. This represents what the editor will render when the block is used.
27 | *
28 | * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
29 | *
30 | * @return {WPElement} Element to render.
31 | */
32 | export default function Edit() {
33 | return (
34 |
35 | {__('Block #1 - Hello from the editor!', 'tailwind-blocks')}
36 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/src/block2/edit.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Retrieves the translation of text.
3 | *
4 | * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
5 | */
6 | import { __ } from '@wordpress/i18n';
7 |
8 | /**
9 | * React hook that is used to mark the block wrapper element.
10 | * It provides all the necessary props like the class name.
11 | *
12 | * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
13 | */
14 | import { useBlockProps } from '@wordpress/block-editor';
15 |
16 | /**
17 | * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
18 | * Those files can contain any CSS code that gets applied to the editor.
19 | *
20 | * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
21 | */
22 | import './editor.scss';
23 |
24 | /**
25 | * The edit function describes the structure of your block in the context of the
26 | * editor. This represents what the editor will render when the block is used.
27 | *
28 | * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
29 | *
30 | * @return {WPElement} Element to render.
31 | */
32 | export default function Edit() {
33 | return (
34 |
35 | {__('Block #2 - Hello from the editor!', 'tailwind-blocks')}
36 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/src/block3/edit.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Retrieves the translation of text.
3 | *
4 | * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
5 | */
6 | import { __ } from '@wordpress/i18n';
7 |
8 | /**
9 | * React hook that is used to mark the block wrapper element.
10 | * It provides all the necessary props like the class name.
11 | *
12 | * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
13 | */
14 | import { useBlockProps } from '@wordpress/block-editor';
15 |
16 | /**
17 | * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
18 | * Those files can contain any CSS code that gets applied to the editor.
19 | *
20 | * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
21 | */
22 | import './editor.scss';
23 |
24 | /**
25 | * The edit function describes the structure of your block in the context of the
26 | * editor. This represents what the editor will render when the block is used.
27 | *
28 | * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
29 | *
30 | * @return {WPElement} Element to render.
31 | */
32 | export default function Edit() {
33 | return (
34 |
35 | {__('Block #3 - Hello from the editor!', 'tailwind-blocks')}
36 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Tailwind Blocks
2 |
3 | Example plugin demonstrating how to integrate Tailwind with the [`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) script. The plugin was scaffolded using `@wordpress/create-block` and then Tailwind was manually integrated.
4 |
5 | **Coming soon!** Work has started on a custom template for `@wordpress/create-block` that will create a full block plugin with multiple blocks, each one seamlessly integrated with Tailwind right out of the box.
6 |
7 | ## Usage
8 |
9 | Clone the repository and install npm packages.
10 |
11 | ```
12 | git clone https://github.com/dgwyer/tailwind-blocks.git
13 | cd tailwind-blocks
14 | npm i
15 | ```
16 |
17 | Start the build process in development or do a production build.
18 |
19 | `npm start` or `npm run build`
20 |
21 | Add the plugin to the `/wp-content/plugins/` folder of your local WordPress site and activate as normal.
22 |
23 | Create a new page and add any of the three example blocks included with the plugin to the editor.
24 |
25 | 
26 |
27 | Change the source code in any block. e.g. `./src/block1/edit.js` and add Tailwind classes. If you're in development mode then the plugin will automatically recompile JS and CSS including Tailwind styles. Simply refresh the browser to view updates.
28 |
--------------------------------------------------------------------------------