Plugin

The plugin folder structure is separated from the root folder structure to avoid flooding the documentation. Additionally folders/files marked with a prefixed 💡 are important for getting started (that means, learn more about them).

All files and folders written in italics are not saved in Git, but automatically arranged when you develop or deploy your plugin.

Folder structure

• 📁 plugins/your-plugin Folder you created with create-wp-react-app create-plugin

  • 📁 coverage Coverage reports, see this

  • 📁 devops Files related to CI/CD, Docker and so on for this specific plugin

    • 📁 .gitlab

      • 📄 💡 .gitlab-ci.yml CI/CD similar root file, included in root .gitlab-ci.yml

      • 📄 stage-build-production.yml Predefined job to build production plugin when merged to master

      • 📄 stage-build.yml Predefined job to build plugin

      • 📄 stage-deploy.yml Predefined job for wordpress.org deployment

      • 📄 stage-test.yml Predefined test jobs

      • 📄 stage-validate.yml Jobs for Docker garbage collection, semantic versioning and license scanner

    • 📁 docker-compose Compose files are consumed automatically

      • 📄 docker-compose.e2e.yml Used in Cypress E2E tests

      • 📄 docker-compose.local.yml Used locally with port expose

      • 📄 docker-compose.traefik.yml Used for Review applications

      • 📄 docker-compose.yml This file is automatically merged with devops/docker-compose/docker-compose.yml, see here

    • 📁 scripts Additional scripts used in Docker containers (mounted) for this specific plugin

      • 📄 💡 wordpress-startup.sh Similar to devops/scripts/wordpress-startup.sh

  • 📁 build Run yarn build to create an installable plugin into this folder

  • 📁 docs Run yarn docs to create all technical docs into this folder

  • 📁 node_modules Node dependencies

  • 📁 scripts Scripts related to development

    • 📄 💡 Gruntfile.ts Gruntfile for this plugin, extends common/Gruntfile.base.ts

    • 📄 💡 webpack.config.ts Webpack configuration file for this plugin, consumes common/webpack.factory.ts, see here

  • 📁 src Your plugin coding, here we go!

    • 📁 inc Server-side coding in PHP

      • 📁 base Base classes and functions

        • 📁 others

          • 📄 cachebuster-lib.php Cachebuster file for library files

          • 📄 cachebuster.php Cachebuster file for entrypoint files

          • 📄 fallback-php-version.php Show admin notice when PHP version not reached

          • 📄 fallback-rest-api.php Show admin notice when WP REST API is not available

          • 📄 fallback-wp-version.php Show admin notice when WP version is not reachable

          • 📄 index.php Empty index.php file to prevent directory browsing

          • 📄 start.php Initializes the plugins Core class and shows notices if requirements are not met (e. g. WP version)

        • 📄 💡 Core.php Abstract core class for main initialization of namespacing and so on, similar to the well-known functions.php

        • 📄 index.php Empty index.php file to prevent directory browsing

        • 📄 💡 UtilsProvider.php Make plugin relevant data available to composer packages, used in all your classes!

      • 📁 💡 rest Example WP REST API endpoint implementation

        • 📄 index.php Empty index.php file to prevent directory browsing

        • 📄 HelloWorld.php Example wp-json/your-plugin/hello-world endpoint

      • 📁 💡 view View relevant coding like initialization of Widgets and admin pages

        • 📁 menu Example admin page implementation

          • 📄 index.php Empty index.php file to prevent directory browsing

          • 📄 Page.php Example "Your plugin" admin page

        • 📁 widget Example widget implementation

          • 📄 index.php Empty index.php file to prevent directory browsing

          • 📄 Widget.php React example widget implementation

        • 📄 index.php Empty index.php file to prevent directory browsing

      • 📄 💡 Activator.php Class for activate, deactivate and install actions, extends ./base/Activator.php

      • 📄 💡 Assets.php Class for assets management, extends ./base/Assets.php

      • 📄 💡 Core.php Core class, put your hook and filter registrations here; extends ./base/Core.php

      • 📄 index.php Empty index.php file to prevent directory browsing

      • 📄 💡 Localization.php Allows to override used language, extends ./base/Localization.php

    • 📁 languages Server-side language files

      • 📄 wp-reactjs-starter.pot Language file can be translated with Poedit

    • 📁 public Client-side coding in React (TypeScript)

      • 📁 dev Run yarn build:js:development to compile TypeScript to consumable JS files

      • 📁 dist Run yarn build:js:production to compile TypeScript to minified consumable JS files

      • 📁 lib Run yarn grunt libs:copy to copy external library files to this folder

      • 📁 languages Client-side language files

        • 📄 wp-reactjs-starter.pot Language file can be translated with Poedit

      • 📁 💡 ts Your frontend TypeScript entrypoints and coding

        • 📁 components React components

          • 📄 index.tsx Export all members from this folder

          • 📄 page.tsx Page component used in src/inc/view/menu/Page.php

          • 📄 todo.tsx Example todo component consuming the store from ../store/todo.tsx, used in ./page.tsx

          • 📄 todoItem.tsx Example todo item component, used in ./todo.tsx

        • 📁 models Model definitions for your stores

          • 📄 index.tsx Export all members from this folder

          • 📄 todoModel.tsx Example todo item implementation, see ../store/todo.ts

        • 📁 store MobX stores

          • 📄 index.tsx Export all members from this folder

          • 📄 option.tsx Option store, see src/inc/base/Assets.php

          • 📄 stores.tsx Combine all available stores (see this)

          • 📄 todo.tsx Example Todo store implementation

        • 📁 style CSS styles as SCSS files

          • 📄 admin.scss Consumed in ../admin.tsx, enqueued in Assets.php

          • 📄 widget.scss Consumed in ../widget.tsx, enqueued in Assets.php

        • 📁 types Additional declaration files

          • 📄 global.d.ts Avoid errors of plain JS packages (see this)

        • 📁 utils Utils and helpers

          • 📄 index.tsx Create utils from packages/utils/lib/factory like i18n and AJAX handler

        • 📁 widget Example widget implementation, see src/inc/view/widget/Widget.php

          • 📄 index.tsx React component for the widget container

        • 📁 wp-api WP REST API types

          • 📄 hello.get.tsx Types for wp-json/your-plugin/hello-world, see src/inc/rest/HelloWorld.php

          • 📄 index.tsx Export all members from this folder

        • 📄 admin.tsx Admin frontend coding (entrypoint), enqueued in Assets.php

        • 📄 widget.tsx Widget frontend coding (entrypoint), enqueued in Assets.php

    • 📄 💡 index.php Main plugin file making your plugin to a real WordPress plugin

    • 📄 uninstall.php Uninstall file

  • 📁 test Test files and specs

    • 📁 💡 cypress Put your E2E test files here

    • 📁 jest Put all your Jest tests here

    • 📁 phpunit Put all your PHPUnit tests here

    • 📄 jest.config.js Jest configuration file

    • 📄 jest.setup.js Jest setup file

    • 📄 patchwork.json Patchwork configuration file

    • 📄 phpunit.bootstrap.php PHPUnit bootstrap file

    • 📄 phpunit.xdebug.php PHPUnit + [XDebug filtering]((https://xdebug.org/docs/code_coverage)) for faster code coverage analysis

    • 📄 phpunit.xml PHPUnit configuration file

  • 📁 vendor Composer vendor-dir

  • 📁 wordpress.org wordpress.org related files for release in the plugin directory, see here

    • 📁 assets Assets like banner and icons (see this)

    • 📄 💡 README.wporg.txt Plugin readme

  • 📄 CHANGELOG.md Conventional changelog output

  • 📄 composer.json Composer configuration file

  • 📄 composer.lock Composer lock file

  • 📄 cypress.json Cypress configuration file

  • 📄 LICENSE Plugin license file

  • 📄 LICENSE_3RD_PARTY_JS.md Yarn dependencies disclaimer, see License checker

  • 📄 LICENSE_3RD_PARTY_PHP.md Composer dependencies disclaimer, see License checker

  • 📄 package.json Package definition file

  • 📄 tsconfig.json TypeScript configuration file, extends common/tsconfig.json