Skip to content

Commit 8ce37c7

Browse files
srtfishersrtfisher
authored
Merge pull request #133 from alleyinteractive/assets-create-wordpress-plugin
Replacing mix with create-wordpress-plugin webpack and porting over block generator
2 parents 95bba52 + 91367e9 commit 8ce37c7

33 files changed

+11695
-13080
lines changed

‎.eslintignore‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
webpack
2-
src/webpack
31
build
42
vendor
5-
webpack.mix.js
3+
webpack.config.js

‎.eslintrc.json‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
{
2-
// Extend the AirBnb lint config
2+
"env": {
3+
"browser": true,
4+
"es2021": true,
5+
"jest": true,
6+
"node": true
7+
},
38
"extends": ["airbnb", "airbnb-typescript", "airbnb/hooks"],
49
"parser": "@typescript-eslint/parser",
510
"parserOptions": {
6-
"ecmaVersion": 6,
711
"ecmaFeatures": {
812
"globalReturn": true,
913
"impliedStrict": true,
@@ -12,29 +16,23 @@
1216
"project": "./tsconfig.json",
1317
"sourceType": "module"
1418
},
15-
"env": {
16-
"es6": true,
17-
"browser": true,
18-
"node": true,
19-
"jest": true
20-
},
21-
"globals": {
22-
"wp": true
23-
},
24-
"settings": {
25-
"import/resolver": "webpack"
26-
},
27-
"plugins": [
28-
"react-hooks"
29-
],
3019
"rules": {
31-
"react-hooks/rules-of-hooks": "error",
32-
"react-hooks/exhaustive-deps": "warn",
33-
"import/prefer-default-export": "off",
34-
"import/no-unresolved": [0],
35-
"import/no-cycle": [0],
36-
"import/extensions": [0],
20+
"no-restricted-syntax": [
21+
"error",
22+
{
23+
"message": "Ternaries must be used instead of && in JSX expressions to avoid the potential for accidental output. Use, for example, {condition ? <Element /> : null}.",
24+
"selector": ":matches(JSXElement, JSXFragment) > JSXExpressionContainer > LogicalExpression[operator='&&']"
25+
},
26+
{
27+
"message": "Ternaries must be used instead of || in JSX expressions to avoid the potential for accidental output. Use, for example, {thing1 ? thing1 : thing2}.",
28+
"selector": ":matches(JSXElement, JSXFragment) > JSXExpressionContainer > LogicalExpression[operator='||']"
29+
}
30+
],
31+
"react/jsx-props-no-spreading": "off",
3732
"react/react-in-jsx-scope": "off",
3833
"react/require-default-props": "off"
34+
},
35+
"settings": {
36+
"import/resolver": "webpack"
3937
}
4038
}

‎.github/dependabot.yml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,13 @@ updates:
1313
directory: "/"
1414
schedule:
1515
interval: "weekly"
16+
17+
- package-ecosystem: "npm"
18+
directory: "/"
19+
schedule:
20+
interval: "weekly"
21+
day: "saturday"
22+
time: "09:00"
23+
timezone: "America/New_York"
24+
ignore:
25+
- dependency-name: "@wordpress/*"

‎.github/workflows/upgrade-wordpress-plugin.yml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
name: Update WordPress Plugin
2+
3+
on:
4+
schedule:
5+
- cron: '0 */6 * * *'
6+
7+
permissions:
8+
contents: write
9+
pull-requests: write
10+
11+
jobs:
12+
update-plugin:
13+
runs-on: ubuntu-latest
14+
steps:
15+
- uses: actions/checkout@v3
16+
- uses: alleyinteractive/[email protected]
17+
with:
18+
plugin-file: 'plugin.php'
19+
upgrade-npm-dependencies: "true"

‎app/providers/class-asset-service-provider.php‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,35 @@ class Asset_Service_Provider extends Service_Provider {
2222
* @return void
2323
*/
2424
public function boot() {
25+
/*
26+
|--------------------------------------------------------------------------
27+
| Load the blocks included with the plugin.
28+
|--------------------------------------------------------------------------
29+
|
30+
| This will load the blocks included with the plugin and generated
31+
| with `npm run create-block`.
32+
|
33+
*/
34+
$this->load_blocks();
35+
2536
/*
2637
|--------------------------------------------------------------------------
2738
| Enqueue Assets
2839
|--------------------------------------------------------------------------
2940
|
41+
| Enqueue an asset directly from the build/ folder (with any dependencies included)
42+
|
43+
| asset()->script( '/app.js' )->async();
44+
| asset()->style( '/article.css' )->condition( 'single' );
45+
|
3046
| Enqueue a raw asset using the asset() helper:
3147
|
32-
| asset()->script( 'example-entry' )->async()->src( mix( '/app.js' ) );
33-
| asset()->style( 'example-entry' )->condition( 'single' )->src( mix( '/app.css' ) );
48+
| asset()->script( 'example-entry' )->async()->src( asset_loader( '/app.js' ) );
49+
| asset()->style( 'example-entry' )->condition( 'single' )->src( asset_loader( '/app.css' ) );
3450
|
3551
| Enqueue an asset with dependencies from @wordpress/dependency-extraction-webpack-plugin:
3652
|
37-
| asset()->script( 'example-block' )->src( mix( '/example-block.js' ) )->dependencies( mix()->dependencies( '/example-block.js' ) );
53+
| asset()->script( 'example-block' )->src( asset_loader( '/example-block.js' ) )->dependencies( asset_loader()->dependencies( '/example-block.js' ) );
3854
|
3955
| Get cookin'!
4056
|

‎bin/create-block/index.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const path = require('path');
2+
3+
/**
4+
* Custom Variables and templates for scaffolding blocks.
5+
* @see https://github.com/WordPress/gutenberg/blob/trunk/packages/create-block/docs/external-template.md#external-project-templates
6+
*/
7+
module.exports = {
8+
defaultValues: {
9+
namespace: 'create-wordpress-plugin',
10+
plugin: false,
11+
description: '',
12+
dashicon: 'palmtree',
13+
category: 'widgets',
14+
editorScript: 'file:index.ts',
15+
editorStyle: 'file:index.css',
16+
style: ['file:style-index.css'],
17+
},
18+
variants: {
19+
static: {},
20+
'static-javascript': {
21+
blockTemplatesPath: path.join(__dirname, 'templates', 'block', 'javascript'),
22+
},
23+
dynamic: {
24+
render: 'file:render.php',
25+
},
26+
'dynamic-javascript': {
27+
blockTemplatesPath: path.join(__dirname, 'templates', 'block', 'javascript'),
28+
render: 'file:render.php',
29+
},
30+
},
31+
blockTemplatesPath: path.join(__dirname, 'templates', 'block', 'typescript'),
32+
};

‎bin/create-block/templates/block/javascript/edit.jsx.mustache‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/**
2+
* Retrieves the translation of text.
3+
*
4+
* @see https://developer.wordpress.org/block-editor/reference-guides/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/reference-guides/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 './index.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/reference-guides/block-api/block-edit-save/#edit
29+
*
30+
* @return {WPElement} Element to render.
31+
*/
32+
export default function Edit() {
33+
return (
34+
<p {...useBlockProps()}>
35+
{ __('Block Title – hello from the editor!', 'create-wordpress-plugin') }
36+
</p>
37+
);
38+
}

‎bin/create-block/templates/block/javascript/index.js.mustache‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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+
{{#isStaticVariant}}
22+
import save from './save';
23+
{{/isStaticVariant}}
24+
import metadata from './block.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(
32+
metadata.name,
33+
{
34+
edit,
35+
{{#isStaticVariant}}
36+
save,
37+
{{/isStaticVariant}}
38+
},
39+
);

‎bin/create-block/templates/block/javascript/index.php.mustache‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<?php
2+
/**
3+
* Block Name: {{title}}.
4+
*
5+
* @package create-wordpress-plugin
6+
*/
7+
8+
/**
9+
* Registers the block using the metadata loaded from the `block.json` file.
10+
* Behind the scenes, it registers also all assets so they can be enqueued
11+
* through the block editor in the corresponding context.
12+
*
13+
* @see https://developer.wordpress.org/reference/functions/register_block_type/
14+
*/
15+
function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
16+
// Register the block by passing the location of block.json.
17+
register_block_type(
18+
__DIR__
19+
);
20+
21+
}
22+
add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );

‎bin/create-block/templates/block/javascript/index.scss.mustache‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* The following styles get applied inside the editor only.
3+
*
4+
* All imported CSS files are bundled into one chunk named after the entry point,
5+
* which defaults to index.js, and thus the file created becomes index.css.
6+
* This is for styles used only in the editor.
7+
*
8+
* Replace them with your own styles or remove the file completely.
9+
*/
10+
11+
.wp-block-{{namespace}}-{{slug}} {
12+
border: 1px dotted #f00;
13+
}

0 commit comments

Comments
 (0)