Creating a new component

Generate boilerplate code

To generate the boilerplate code for a new component, run the following command with example and simple replaced with the desired component name and type. Valid types are simple, complex, and wrapper.

Note: If using PowerShell or WSL with Node aliased to PowerShell, do not use equals signs.

npm run generate component -- --name=YourThing --type=simple

npm run generate component -- --name YourThing --type simple

Compile assets

Add the SCSS file to blocks.scss or template-parts.scss (depending on what it is) in the WordPress plugin and run SASS to compile those. Alternatively you can set up file watchers in PhpStorm to automatically compile all the SASS on save.

cd packages/comet-plugin/src

sass bundle.scss:bundle.css

```bash:no-line-numbers
sass editor.scss:editor.css

cd packages/comet-plugin/src

sass bundle.css:bundle.css

sass editor.scss:editor.css

If you add a custom front-end JavaScript file, add it to rollup.index.js in the Core package and run Rollup to update the bundle. (You can set up a file watcher for this too.)

npm run build

Generate documentation

Once you have added fields and docblock comments to a component, generate the JSON definition file and Tycho Template syntax XML definition file:

php scripts/generate-json-defs.php --component Example

php scripts/generate-json-defs.php --component Example

Prepare for browser testing

1. Generate the boilerplate code for a browser example page and Storybook story:

   WSL (Bash)PowerShell

   WSL (Bash)

   php scripts/generate-stories.php --component Example
   

   PowerShell

   php scripts/generate-stories.php --component Example
   

2. Update the generated file in the __tests__ folder to have suitable demo content and handle $_REQUEST parameters if the basic handling generated by the script is not sufficient.

3. Update the Storybook file in the __tests__ file to ensure suitable examples are shown.

View in Storybook

Ensure your local web server is running, and optionally launch Storybook (npm run storybook from the project root) to view the new component in the browser.

Further reading

• See the PHP Architecture section for details on the abstract classes you can use as a base for your component, the traits you can use to handle attributes that are used by multiple components in a consistent way, and some data types you can use for attributes.
• See the Basic JavaScript page for details on how to use vanilla JavaScript to add simple client-side interactivity to your components.
• See the JavaScript Advanced - Vue.js page for details on how to selectively use Vue.js for a component for more advanced client-side interactivity and reactivity.