shelob9/wordpress-plugin

WordPress plugin starter template with all of the things.

WordPress Plugin

Josh's opinionated boilerplate and template for WordPress plugin with PSR-4 autoloader, TypeScript, Docker, Github actions, and other fun stuff.

Creating Your Own

The steps to generate your own plugin are documented in Getting Started.

Everything

This option includes everything: local dev, Typescript, composer autoloader, PHP tests, JavaScript tests, etc.

• Documentation

Basic

This version has less things, it does not use Yarn workspace or Typescript or composer. It generates one PHP file that can load JS/CSS and a WordPress-friendly webpack config for a React-powered admin interface and a block.

• Documentation

Documentation

• Getting Started
• PHP
• JavaScript
• Local Development
• CI/CD

Contributing

Please feel free to open a pull request if you would like to contribute.

wordpress-plugin's Issues

Make unit Test case extend BrainMonkey TestCase

https://twitter.com/jrf_nl/status/1333807227514269698?s=19

Nice! I'd recommend letting the TestCase extend the BrainMonkey TestCase as that will save people from having to learn about/fiddly with the traits and it will also set up BrainMonkey and count Mockery exceptions correctly.

Action to create a ZIP

Add a generator

Automatically make the neccasary changes using use-preset or something.

JavaScript test install error in CI

Tests run fine on my machine -- Windows 10 -- but do not install properly in Github actions. I think Windows vs Ubuntu is the issue here.

https://github.com/Shelob9/wordpress-plugin/runs/1413111730?check_suite_focus=true

ERR! stack Error: Failed to execute '/usr/local/bin/node /home/runner/work/wordpress-plugin/wordpress-plugin/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/home/runner/work/wordpress-plugin/wordpress-plugin/node_modules/nodegit/build/Release/nodegit.node --module_name=nodegit --module_path=/home/runner/work/wordpress-plugin/wordpress-plugin/node_modules/nodegit/build/Release --napi_version=7 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v83' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/home/runner/work/wordpress-plugin/wordpress-plugin/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR!
stack     at ChildProcess.emit (events.js:315:20)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:1048:16)
node-pre-gyp ERR!
stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
node-pre-gyp
ERR! System Linux 5.4.0-1031-azure
node-pre-gyp ERR!
command "/usr/local/bin/node" "/home/runner/work/wordpress-plugin/wordpress-plugin/node_modules/nodegit/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"

Using @mui or antd

Hi Josh!
I am trying to use this plugin template with some nice components from @mui/material or with antdesign.
In the pages/package.json i define "@mui/material": "5.8.5" as a dependency and in the pages/blocks/index.js i import it and use it.
With mui or antd i get the same "invalid hook" error. Do you maybe have an idea why this is happening?
(i understand if you dont have time, thanks for the free template anyway :) just thought i d try, cuz it ve been messing with it for more than a week :D)

import Button from '@mui/material/Button/Button';
registerBlockType( 'wordpress-plugin/block', {
    title: 'PLUGIN_NAME',
    apiVersion: 2,
    description: 'Hi Roy',
    category: 'widgets',
    icon: 'smiley',
    supports: {
        html: false,
    },
    attributes,
    edit: Edit,
    save: ({attributes}) => {
        return (
            <Button variant="text"></Button>
        );
    }
} );

react-dom.js?ver=17.0.1:14936 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (react-dom.js?ver=17.0.1:14936:15)
    at Object.useContext (react.js?ver=17.0.1:1529:23)
    at Object.Button [as render] (Button.js:224:24)
    at renderElement (element.js?ver=3dfdc75a0abf30f057df44e9a39abe5b:1137:33)
    at getSaveContent (blocks.js?ver=70f0d7113c28590b968147e200d13a68:8588:64)
    at fixCustomClassname (blocks.js?ver=70f0d7113c28590b968147e200d13a68:11292:24)
    at applyBuiltInValidationFixes (blocks.js?ver=70f0d7113c28590b968147e200d13a68:11325:34)
    at applyBlockValidation (blocks.js?ver=70f0d7113c28590b968147e200d13a68:11588:22)
    at parseRawBlock (blocks.js?ver=70f0d7113c28590b968147e200d13a68:11637:26)
    at blocks.js?ver=70f0d7113c28590b968147e200d13a68:11699:19
throwInvalidHookError @ react-dom.js?ver=17.0.1:14936
useContext @ react.js?ver=17.0.1:1529
Button @ Button.js:224
renderElement @ element.js?ver=3dfdc75a0abf30f057df44e9a39abe5b:1137
getSaveContent @ blocks.js?ver=70f0d7113c28590b968147e200d13a68:8588
fixCustomClassname @ blocks.js?ver=70f0d7113c28590b968147e200d13a68:11292
applyBuiltInValidationFixes @ blocks.js?ver=70f0d7113c28590b968147e200d13a68:11325
applyBlockValidation @ blocks.js?ver=70f0d7113c28590b968147e200d13a68:11588
parseRawBlock @ blocks.js?ver=70f0d7113c28590b968147e200d13a68:11637
(anonymous) @ blocks.js?ver=70f0d7113c28590b968147e200d13a68:11699
parser_parse @ blocks.js?ver=70f0d7113c28590b968147e200d13a68:11698
(anonymous) @ core-data.js?ver=95df951bbac4c9f2fd2e6da80561595d:5685
invokePassiveEffectCreate @ react-dom.js?ver=17.0.1:23517
callCallback @ react-dom.js?ver=17.0.1:3942
invokeGuardedCallbackDev @ react-dom.js?ver=17.0.1:3991
invokeGuardedCallback @ react-dom.js?ver=17.0.1:4053
flushPassiveEffectsImpl @ react-dom.js?ver=17.0.1:23604
unstable_runWithPriority @ react.js?ver=17.0.1:2764
runWithPriority$1 @ react-dom.js?ver=17.0.1:11306
flushPassiveEffects @ react-dom.js?ver=17.0.1:23477
performSyncWorkOnRoot @ react-dom.js?ver=17.0.1:22299
(anonymous) @ react-dom.js?ver=17.0.1:11357
unstable_runWithPriority @ react.js?ver=17.0.1:2764
runWithPriority$1 @ react-dom.js?ver=17.0.1:11306
flushSyncCallbackQueueImpl @ react-dom.js?ver=17.0.1:11352
flushSyncCallbackQueue @ react-dom.js?ver=17.0.1:11339
scheduleUpdateOnFiber @ react-dom.js?ver=17.0.1:21923
dispatchAction @ react-dom.js?ver=17.0.1:16169
onStoreChange @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:4076
onChange @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:4084
(anonymous) @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:2872
(anonymous) @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:2330
dispatch @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:863
(anonymous) @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:1647
(anonymous) @ redux-routine.js?ver=5156478c032ea85a2bbdceeb7a43b0c1:854
(anonymous) @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:1541
(anonymous) @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:1635
(anonymous) @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:2440
(anonymous) @ core-data.js?ver=95df951bbac4c9f2fd2e6da80561595d:4828
await in (anonymous) (async)
(anonymous) @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:1644
(anonymous) @ redux-routine.js?ver=5156478c032ea85a2bbdceeb7a43b0c1:854
(anonymous) @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:1541
(anonymous) @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:1635
fulfillResolver @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:2615
(anonymous) @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:2570
setTimeout (async)
fulfillSelector @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:2565
selectorResolver @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:2578
(anonymous) @ edit-post.js?ver=0066e2a76eff88129280c12c9a52b6b4:9000
(anonymous) @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:4009
__unstableMarkListeningStores @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:2774
(anonymous) @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:2833
(anonymous) @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:4009
useSelect @ data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:4023
Editor @ edit-post.js?ver=0066e2a76eff88129280c12c9a52b6b4:8968
renderWithHooks @ react-dom.js?ver=17.0.1:15015
mountIndeterminateComponent @ react-dom.js?ver=17.0.1:17841
beginWork @ react-dom.js?ver=17.0.1:19079
beginWork$1 @ react-dom.js?ver=17.0.1:23970
performUnitOfWork @ react-dom.js?ver=17.0.1:22806
workLoopSync @ react-dom.js?ver=17.0.1:22737
renderRootSync @ react-dom.js?ver=17.0.1:22700
performSyncWorkOnRoot @ react-dom.js?ver=17.0.1:22323
scheduleUpdateOnFiber @ react-dom.js?ver=17.0.1:21911
updateContainer @ react-dom.js?ver=17.0.1:25512
(anonymous) @ react-dom.js?ver=17.0.1:26051
unbatchedUpdates @ react-dom.js?ver=17.0.1:22461
legacyRenderSubtreeIntoContainer @ react-dom.js?ver=17.0.1:26050
render @ react-dom.js?ver=17.0.1:26133
initializeEditor @ edit-post.js?ver=0066e2a76eff88129280c12c9a52b6b4:9469
(anonymous) @ post.php?post=10&action=edit:2247
Show 9 more frames
react-dom.js?ver=17.0.1:20115 The above error occurred in the <EditorProvider> component:

    at EditorProvider (http://localhost:4242/wp-includes/js/dist/editor.js?ver=3f6371e7599e6cefa5d43fae1b61f643:11575:5)
    at http://localhost:4242/wp-includes/js/dist/editor.js?ver=3f6371e7599e6cefa5d43fae1b61f643:11343:5
    at WithRegistryProvider(EditorProvider)
    at SlotFillProvider (http://localhost:4242/wp-includes/js/dist/components.js?ver=79d190e9af232aeaa59c1b40aa22932c:23058:5)
    at provider_SlotFillProvider (http://localhost:4242/wp-includes/js/dist/components.js?ver=79d190e9af232aeaa59c1b40aa22932c:23086:5)
    at Provider (http://localhost:4242/wp-includes/js/dist/components.js?ver=79d190e9af232aeaa59c1b40aa22932c:23235:5)
    at div
    at ShortcutProvider (http://localhost:4242/wp-includes/js/dist/keyboard-shortcuts.js?ver=418fddac042f08102c4110f70e13cd47:763:75)
    at Editor (http://localhost:4242/wp-includes/js/dist/edit-post.js?ver=0066e2a76eff88129280c12c9a52b6b4:8949:5)