├── src
├── dynamic-block
│ ├── style.scss
│ ├── render.php
│ ├── block.json
│ ├── index.js
│ └── edit.js
├── static-block
│ ├── style.scss
│ ├── editor.scss
│ ├── block.json
│ ├── save.js
│ ├── view.js
│ ├── index.js
│ └── edit.js
└── setting-page
│ ├── index.js
│ ├── useSettings.js
│ └── Page.jsx
├── .eslintrc
├── scoper.inc.php
├── readme.txt
├── .editorconfig
├── inc
├── views
│ └── setting-page.php
├── bootstrap
│ └── app.php
└── languages
│ └── plugin-name.pot
├── .gitignore
├── app
├── Blocks.php
├── Plugin.php
└── SettingPage.php
├── package.json
├── uninstall.php
├── webpack.config.js
├── plugin-name.php
├── composer.json
├── phpcs.xml.dist
├── README.md
└── LICENSE
/src/dynamic-block/style.scss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [ "plugin:@wordpress/eslint-plugin/recommended" ]
3 | }
4 |
--------------------------------------------------------------------------------
/src/static-block/style.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Styles applied on the front-end.
3 | */
4 |
5 | @use './editor.scss';
6 |
--------------------------------------------------------------------------------
/src/static-block/editor.scss:
--------------------------------------------------------------------------------
1 | .wp-block-plugin-name-static {
2 | background-color: #21759b;
3 | color: #fff;
4 | padding: 2px;
5 | }
6 |
--------------------------------------------------------------------------------
/src/dynamic-block/render.php:
--------------------------------------------------------------------------------
1 |
>
2 |
3 |
4 |
--------------------------------------------------------------------------------
/scoper.inc.php:
--------------------------------------------------------------------------------
1 | get();
13 |
--------------------------------------------------------------------------------
/src/setting-page/index.js:
--------------------------------------------------------------------------------
1 | import domReady from '@wordpress/dom-ready';
2 | import { createRoot } from '@wordpress/element';
3 | import { Page } from './Page';
4 |
5 | domReady( () => {
6 | const container = document.querySelector( '#plugin-name-settings' );
7 | if ( container ) {
8 | createRoot( container ).render( );
9 | }
10 | } );
11 |
--------------------------------------------------------------------------------
/readme.txt:
--------------------------------------------------------------------------------
1 | === Plugin Name ===
2 |
3 | Contributors: tfirdaus
4 | Tags: wordpress, plugin, boilerplate
5 | Requires at least: 6.0
6 | Tested up to: 6.7
7 | Stable tag: 0.1.0
8 | Requires PHP: 7.4
9 | License: GPLv3
10 | License URI: https://www.gnu.org/licenses/gpl-3.0.html
11 |
12 | The plugin short description.
13 |
14 | == Description ==
15 |
16 | The plugin long description.
17 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | end_of_line = lf
6 | insert_final_newline = true
7 | trim_trailing_whitespace = true
8 | indent_style = tab
9 | indent_size = 4
10 |
11 | [*.json]
12 | indent_size = 2
13 |
14 | [*.{md,neon,neon.dist,yml,yaml}]
15 | indent_style = space
16 | indent_size = 2
17 |
18 | [*.md]
19 | trim_trailing_whitespace = false
20 |
21 | [{*.txt}]
22 | end_of_line = crlf
23 |
--------------------------------------------------------------------------------
/src/dynamic-block/block.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://schemas.wp.org/trunk/block.json",
3 | "apiVersion": 3,
4 | "name": "plugin-name/dynamic-block",
5 | "version": "0.1.0",
6 | "title": "Dynamic Block",
7 | "category": "widgets",
8 | "textdomain": "plugin-name",
9 | "render": "file:./render.php",
10 | "editorScript": "file:./index.js",
11 | "editorStyle": "file:./styles.scss",
12 | "keywords": [ "dynamic" ]
13 | }
14 |
--------------------------------------------------------------------------------
/src/dynamic-block/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Registers a new block provided a unique name and an object defining its
3 | * behaviors.
4 | *
5 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
6 | */
7 | import { registerBlockType } from '@wordpress/blocks';
8 |
9 | /**
10 | * Internal dependencies
11 | */
12 | import Edit from './edit.js';
13 | import metadata from './block.json';
14 |
15 | registerBlockType( metadata.name, {
16 | edit: Edit,
17 | } );
18 |
--------------------------------------------------------------------------------
/src/static-block/block.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://schemas.wp.org/trunk/block.json",
3 | "apiVersion": 3,
4 | "name": "plugin-name/static-block",
5 | "version": "0.1.0",
6 | "title": "Static Block",
7 | "category": "widgets",
8 | "description": "An example of static block",
9 | "example": {},
10 | "supports": {
11 | "html": false
12 | },
13 | "textdomain": "todo-list",
14 | "editorScript": "file:./index.js",
15 | "editorStyle": "file:./index.css",
16 | "style": "file:./style-index.css",
17 | "viewScript": "file:./view.js"
18 | }
19 |
--------------------------------------------------------------------------------
/src/dynamic-block/edit.js:
--------------------------------------------------------------------------------
1 | /**
2 | * `useBlockProps` hook helps manage and apply essential props on the block
3 | * wrapper element, such as the class names, styles, and other attributes.
4 | *
5 | * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
6 | */
7 | import { useBlockProps } from '@wordpress/block-editor';
8 | import { useSettings } from '../setting-page/useSettings';
9 |
10 | export default function Edit() {
11 | const { getOption } = useSettings();
12 | return (
13 | { getOption( 'greeting' ) }
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/inc/views/setting-page.php:
--------------------------------------------------------------------------------
1 |
14 |
15 |
16 |
17 |
22 |
23 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # OS generated files #
2 | ######################
3 | .DS_Store
4 | Thumbs.db
5 |
6 | # Logs and databases #
7 | ######################
8 | *.sql
9 | *.log
10 |
11 | # Caches #
12 | ##########
13 | *.cache
14 |
15 | # Compiled source #
16 | ###################
17 | *.tar*
18 | *.zip
19 | dist*
20 | build*
21 | @*
22 |
23 | # Dependencies #
24 | ################
25 | vendor*
26 | composer.lock
27 | node_modules
28 |
29 | # Temporary files #
30 | ###################
31 | tmp
32 | wordpress/
33 |
34 | # Environment files #
35 | ######################
36 | .env
37 |
38 | # Private Configs #
39 | ######################
40 | phpcs.xml
41 | phpstan.xml
42 | phpunit.xml
43 | *.override.xml
44 | wp-cli.local.yml
45 |
--------------------------------------------------------------------------------
/src/static-block/save.js:
--------------------------------------------------------------------------------
1 | /**
2 | * `useBlockProps` hook helps manage and apply essential props on the block wrapper element,
3 | * such as the class names, styles, and other attributes.
4 | *
5 | * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
6 | */
7 | import { useBlockProps } from '@wordpress/block-editor';
8 |
9 | /**
10 | * The save function defines the way in which the different attributes should
11 | * be combined into the final markup, which is then serialized by the block
12 | * editor into `post_content`.
13 | *
14 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
15 | *
16 | * @return {Element} Element to render.
17 | */
18 | export default function save() {
19 | return (
20 | { 'Hello from the saved content!' }
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/static-block/view.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Use this file for JavaScript code that you want to run in the front-end
3 | * on posts/pages that contain this block.
4 | *
5 | * When this file is defined as the value of the `viewScript` property
6 | * in `block.json` it will be enqueued on the front end of the site.
7 | *
8 | * Example:
9 | *
10 | * ```js
11 | * {
12 | * "viewScript": "file:./view.js"
13 | * }
14 | * ```
15 | *
16 | * If you're not making any changes to this file because your project doesn't need any
17 | * JavaScript running in the front-end, then you should delete this file and remove
18 | * the `viewScript` property from `block.json`.
19 | *
20 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script
21 | */
22 |
23 | /* eslint-disable no-console */
24 | console.log( 'Hello from the front-end!' );
25 | /* eslint-enable no-console */
26 |
--------------------------------------------------------------------------------
/app/Blocks.php:
--------------------------------------------------------------------------------
1 | isDir()) {
40 | continue;
41 | }
42 |
43 | register_block_type($block->getRealPath());
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@syntatis/howdy",
3 | "version": "0.1.0",
4 | "description": "Build your next modern plugin for WordPress®",
5 | "author": {
6 | "name": "Thoriq Firdaus",
7 | "url": "https://github.com/tfirdaus"
8 | },
9 | "private": true,
10 | "license": "GPL-3.0",
11 | "keywords": [
12 | "wordpress",
13 | "plugin",
14 | "boilerplate"
15 | ],
16 | "dependencies": {
17 | "@syntatis/kubrick": "^0.2.0",
18 | "@wordpress/api-fetch": "^7.27.0",
19 | "@wordpress/dom-ready": "^4.27.0",
20 | "@wordpress/element": "^6.27.0",
21 | "@wordpress/i18n": "^6.0.0"
22 | },
23 | "devDependencies": {
24 | "@wordpress/scripts": "^30.20.0",
25 | "cross-env": "^10.0.0"
26 | },
27 | "scripts": {
28 | "start": "wp-scripts start --output-path=dist/assets",
29 | "build": "cross-env NODE_ENV=production wp-scripts build --output-path=dist/assets",
30 | "lint:js": "wp-scripts lint-js ./src",
31 | "lint:css": "wp-scripts lint-style ./src",
32 | "format": "wp-scripts format",
33 | "update-packages": "wp-scripts packages-update"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/uninstall.php:
--------------------------------------------------------------------------------
1 | init();
44 | }
45 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
2 | const path = require( 'path' );
3 | // eslint-disable-next-line import/no-extraneous-dependencies
4 | const glob = require( 'glob' );
5 | const fs = require( 'fs' );
6 |
7 | /**
8 | * Generates an object of file entries based on the provided paths.
9 | *
10 | * @param {string[]} paths - An array of file paths.
11 | * @return {Object} - An object containing file entries.
12 | */
13 | const fileEntries = ( paths ) => {
14 | const entries = {};
15 | paths.forEach( function ( dirPath ) {
16 | const name = dirPath
17 | .split( '/' )
18 | .filter( ( value ) => value !== '.' && value !== 'src' )
19 | .join( '/' );
20 |
21 | if ( ! name.startsWith( '_' ) ) {
22 | const indexFile = [ 'index.tsx', 'index.ts', 'index.js' ]
23 | .map( ( fileName ) => path.join( dirPath, fileName ) )
24 | .find( ( filePath ) => fs.existsSync( filePath ) );
25 |
26 | if ( indexFile ) {
27 | entries[ `${ name }/index` ] = path.resolve(
28 | process.cwd(),
29 | indexFile
30 | );
31 | }
32 | }
33 | } );
34 | return entries;
35 | };
36 |
37 | module.exports = {
38 | ...defaultConfig,
39 | entry: {
40 | ...defaultConfig.entry(),
41 | ...fileEntries( glob.sync( './src/*' ) ),
42 | },
43 | };
44 |
--------------------------------------------------------------------------------
/src/static-block/edit.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Retrieves functions to make the text translatable.
3 | *
4 | * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
5 | */
6 | import { __ } from '@wordpress/i18n';
7 |
8 | /**
9 | * `useBlockProps` hook helps manage and apply essential props on the block
10 | * wrapper element, such as the class names, styles, and other attributes.
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 | * Styles applied in the editor.
18 | *
19 | * The file will be processed with Webpack and automatically be enqueued in
20 | * the editor.
21 | *
22 | * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
23 | */
24 | import './editor.scss';
25 |
26 | /**
27 | * The edit function describes the structure of your block in the context of the
28 | * editor. This represents what the editor will render when the block is used.
29 | *
30 | * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
31 | *
32 | * @return {Element} Element to render.
33 | */
34 | export default function Edit() {
35 | return (
36 |
37 | { __( 'Hello from the editor!', 'plugin-name' ) }
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/plugin-name.php:
--------------------------------------------------------------------------------
1 | $this->activate());
25 | register_deactivation_hook(PLUGIN_FILE, fn () => $this->deactivate());
26 | }
27 |
28 | /**
29 | * Return a list of object to initialize.
30 | *
31 | * @return Traversable