Meet WDS BT, a stylish block theme drawing inspiration from the Powder Theme. With a modern design, user-friendly interface, and smooth integration with the WordPress block editor, WDS BT delivers a clean and responsive layout. It's important to note that this theme is intentionally designed as a base theme, not a parent theme. This distinction offers users a customizable foundation to build upon. Elevate your website with WDS BT, where design effortlessly meets functionality, providing the ideal canvas for your creative expression.
- Set up a local WordPress development environment, we recommend using Local.
- Ensure you are using WordPress 6.4+.
- Clone / download this repository into the
/wp-content/themes/directory of your new WordPress instance. - In the WordPress admin, use the Appearance > Themes screen to activate the theme.
From the command line, change directories to your new theme directory:
cd /wp-content/themes/your-themeInstall theme dependencies and trigger an initial build.
Note: You will need to have Composer 2 and NPM 10 installed first.
npm i && composer iFrom the command line, type any of the following to perform an action:
| Command | Action |
|---|---|
npm run start |
Builds assets and starts Live Reload server |
npm run build |
Builds production-ready assets for a deployment |
npm run lint |
Check all CSS, JS, MD, and PHP files for errors |
npm run format |
Fix all CSS, JS, MD, and PHP formatting errors automatically |
npm run report |
Gives detailed information on coding standards violations in PHP code |
-
Open the
inc/hooks/register-block-styles.phpfile in your theme directory. -
Add a new block style entry with the following mandatory properties:
-
Name: The identifier used to compute a CSS class for the style.
-
Label: A human-readable label for the style.
Example:
'block_name' => array( 'name' => __( 'label', 'wdsbt' ), ),
-
-
Navigate to the
assets/scss/blocks/coredirectory within your theme. -
Create an SCSS file with the exact filename as the block name you want to customize. This file will house your custom styles for that specific core block.
-
Files within the
assets/scss/blocks/coredirectory are automatically enqueued, simplifying the integration of your custom styles into the WordPress block editor. -
After adding your custom SCSS file, run the following command to compile and apply your changes:
npm run build
-
In the
assets/js/variationsdirectory within your theme, create a new JavaScript file. This file will contain the definition of your block variation. -
Import the newly created file into the
assets/js/variations/index.jsfile. This step ensures that your variation is included in the build process. -
Use the
wp.blocks.registerBlockVariation()function to officially register your block variation. This function takes the name of the original block and an object defining the variation.Example:
// In your variations JavaScript file wp.blocks.registerBlockVariation('core/paragraph', { name: 'custom-variation', title: __('Custom Variation', 'wdsbt'), attributes: { /* Define your custom attributes here */ }, // Add more variation settings as needed });
Original Block Name: Provide the name of the original block for which you are creating the variation. Variation Object: Define the properties of your block variation, including the name, title, attributes, and any additional settings.
NOTE: To find the correct block name, open the block editor, launch the browser console and type
wp.blocks.getBlockTypes(). You will see the complete list of block names (from core or third-party).
This SCSS file assets/scss/abstracts/_responsive-mixins.scss provides mixins for creating responsive media queries with both minimum and maximum width conditions. The file promotes modular and maintainable styling by allowing the easy application of responsive styles based on screen width.
To use the responsive mixin, include it in your SCSS code and customize it according to your project's breakpoints. Here's an example:
// Usage examples
.my-element {
width: 100%;
// Apply styles when the screen width is 600px or more
@include responsive-min(600px) {
/* Your responsive styles for min-width: 600px */
}
// Apply styles when the screen width is up to 600px
@include responsive-max(600px) {
/* Your responsive styles for max-width: 600px */
}
// Apply styles when the screen width is between 600px and 1200px
@include responsive-min(600px) and (max-width: 1200px) {
/* Your responsive styles for a range of widths */
}
}- Open Terminal.
- Specify a new remote upstream repository that will be synced with the fork.
git remote add upstream https://github.com/bgardner/wdsbt
- Change the current working directory to your local project.
- Fetch the branches and their respective commits from the upstream repository. Commits to
mainwill be stored in the local branchupstream/main. - Check out the fork's local default branch
main. - Merge the changes from the upstream default branch - in this case,
upstream/main- into your local default branch.
git fetch upstream
git checkout main
git merge upstream/main
- Download the theme test data from https://github.com/WebDevStudios/wds-bt/blob/main/wdsunittestdata.wordpress.xml
- Import test data into your WordPress install by going to Tools => Import => WordPress
- Select the XML file from your computer
- Click on “Upload file and import”.
- Under “Import Attachments,” check the “Download and import file attachments” box and click submit.
Note: You may have to repeat the Import step until you see “All Done” to obtain the full list of Posts and Media.
Your contributions and support tickets are welcome. Please see our contributing guidelines before submitting a pull request.
WDS BT is free software, and is released under the terms of the GNU General Public License version 2 or any later version. See LICENSE.md for complete license.