ftek-plugin

WordPress monoplugin for ftek.se.

Dependencies

• PHP (^7.4.x)
• WordPress (^6.0.0)

Contributing

VS Code

This project is set up for development with the editor/IDE VS Code. It is strongly recommended that you use this editor.

If you encoder unexpected TypeScript errors in Visual Studio Code, make sure to use the workspace version of TypeScript.

Devcontainer

The project includes a devcontainer configuration which contains all tools needed for development. To use this you need to install Docker (either CLI or Docker Desktop), and the remote development extension pack after which you can simply select "Clone Repository in Container Volume..." from the Remote Explorer tab.

After starting the devcontainer, WordPress will be accessable at http://localhost:8888 on your local machine. After installing composer and npm dependencies and building javascript files (see Getting Started) you may log in to WordPress and activate your plugin. To log in, visit http://localhost:8888/wp-login.php and entering the default credentials:

• Username: admin
• Password: password

To view Apache2 log records run

sudo cat /proc/1/fd/1

Getting started

Before continuing you must install npm and Composer dependencies:

npm install
composer install

During development, the following command will automatically rebuild code as source files are changed.

npm run start

You should check for (stylistic) errors in your code by running

npm run lint

Format the code base by running

npm run format

Create a production build by running

npm run build

Lint and format your code before commiting any changes.

Generate autoload files

To import PHP classes, we use the autoload file generated by Composer. After creating a new file containing a class you would like to import, regenerate the autoload file by running

composer dump-autoload

Internationalization

Run the command

npm run i18n

to scan the source code for translatable strings (which are stored in a POT file inside the languages folder) and update existing translations (PO files also stored inside languages) from the POT file. To edit an existing localization, edit the corresponding PO file. To create a new localization, copy the POT file to a new PO file inside languages. Assuming the POT file is named my-text-domain.pot, name the PO file my-text-domain-{locale}.po, for example my-text-domain-en_US.po. Lists of locale codes available in WordPress can be found online.

Note on CSS modules

If you decide to use CSS/SASS modules (*.module.scss) be careful to make sure that updating the plugin doesn't break your styles. If you for example use a CSS module to style a block and later update the plugin so that the module hashes changes old block styles will break. This is because Gutenberg saves the CSS class along with the fully rendered block to the WordPress database, so when the block is shown to the user it will expect CSS classes with the same names as when the block was saved to still exist.

CSS modules can safetly be used in cases where the CSS class names are always kept up to date, like the settings page.

Releases

GitHub Actions is configured to automatically create a new release when a new tag is pushed. Some useful commands are

git tag                 # Lists existing tags
git tag -a vx.x.x       # Creates a new tag for the specified version number
git push --follow-tags  # Pushes commits and tags to the remote