v4.0.0 Release - Hybrid wd_s

wd_s Hybrid Theme Release

We are delighted to introduce wd_s (wdunderscores) version 4.0.0, marking a significant milestone in WordPress theme development. In this release, wd_s transforms into a powerful hybrid theme, equipped with the Site Editor and pre-styled core blocks via theme.json, enhancing your creative possibilities. Here's what you can expect:

Exciting New Features and Enhancements:

• Hybrid Theme: wd_s has evolved into a hybrid theme, combining the best of both worlds. It now seamlessly integrates with the Site Editor, offering an intuitive and user-friendly way to customize your site. Say goodbye to the limitations of a Parent Theme and unlock new possibilities. (#1097)
• ACF Block Scaffolding: Creating dynamic content with Advanced Custom Fields is now a breeze, thanks to the introduction of scaffolding code for ACF blocks via the CLI. Tailor your content to perfection. (#1094)
• Core Blocks Pre-styled: We've pre-styled the core blocks using the theme.json configuration, offering you a head start in crafting beautiful, consistent designs for your site. (#1097)
• Optimized Codebase: As part of our commitment to user experience, we've conducted a thorough cleanup and folder restructure. Your theme organization is now more efficient and user-friendly. (#1072, #1062)
• WP CLI Integration: Streamline your command-line operations with ease. wd_s now seamlessly integrates with WP CLI, making development tasks faster and more efficient. (#1006)
• WDS Blocks Category: To improve your block management, we've added a dedicated "WDS Blocks" category. Finding the right blocks for your site has never been easier. (#1022)
• Improved WP Method: We've enhanced reliability by updating the dirname call to a WordPress method. Your theme functions more smoothly than ever before. (#1019)
• Changelog and Package Updates: Stay informed with updated changelog entries, and benefit from improved package files, ensuring a seamless and reliable theme development experience. (#1015, #1014, 77435d5, 82cde06, c1406ab)

With wd_s version 4.0.0, you not only have a hybrid theme at your disposal, but you also enjoy a smoother and more productive WordPress theme development experience. Explore the new features, embrace the pre-styled core blocks, and make the most of the Site Editor.

PHP 8.0 and Node 16 Compatibility, Theme.json Integration, and Enhanced Customization

wd_s Transition Release

We are excited to announce the latest release of wd_s, packed with exciting updates and improvements. This release focuses on ensuring compatibility with the latest technologies and leveraging new features to enhance your theme customization experience. Here's what you can expect:

PHP 8.0 Compatibility:

We have updated our theme to be fully compatible with PHP 8.0, taking advantage of the latest features and improvements offered by this version. This ensures better performance, security, and compatibility with modern hosting environments.

Node 16 Compatibility:

In addition to PHP 8.0 compatibility, we have also made our theme compatible with Node.js 16 and tested up to Node 19. This allows developers to use the latest version of Node.js and leverage its enhanced performance, security, and new features when working with our theme.

Leveraging theme.json:

We have implemented support for the new theme.json file introduced in WordPress. This powerful feature allows you to centralize and manage theme configuration settings, styles, and block editor settings. By leveraging theme.json, you can customize and fine-tune your theme with ease, reducing the need for custom code and enhancing the flexibility and maintainability of your website.

Enhancements and Improvements:

Updated Dependencies:

We have updated all theme dependencies to their latest versions, ensuring compatibility and security.

Performance Optimization:

We have conducted extensive performance optimizations, resulting in faster page loading times and improved overall performance.

Accessibility Improvements:

Various accessibility enhancements have been implemented, making wd_s more inclusive and user-friendly for all visitors.

Design Enhancements:

We have refined and updated various design elements, offering a more modern and visually appealing look.

Bug Fixes:

We have addressed several reported issues and fixed bugs to ensure a smoother user experience.

Folder restructuring; added namespacing

We have updated the function names across the board to be more descriptive of that function's purpose. This allows you to more easily scan the list of files inside a folder and know what you're able to do.

We've moved away from function prefixing (s or wd_s_) as a means to avoid function naming collions and have adopted a more modern approach. You can find more information (Highly recommended reading) about PHP namespaces at Sal Ferrarello's blog here and here.

Coding Standards Reboot

This release includes a complete and total overhaul of WDS Coding Standards. In short, we're just using WordPress Coding Standards.

History

Many years ago, WDS created its own PHP standards on top of WordPress PHP Standards. At that time Gutenberg wasn't even on the radar. We also created our own standards (and ruleset files) for Sass and JavaScript and included them in wd_s. Eventually, we even created Github repos, NPM packages, and even our own "WDS Scripts" package for compiling assets.

Since Gutenberg was released, WordPress now maintains ruleset files in both WordPress Develop and the Gutenberg repos for languages like Sass, JavaScript, and more. There's also @wordpress/scripts for compiling styles, scripts, and assets.

The Problem

Maintaining our own standards and scripts was time consuming and using coding standards as packages sometimes caused issues. What happens if a Project Lead updated the project dependencies? Code editors are barking at Engineers about the entire codebase! Ugh. Projects themselves couldn't easily adjust standards to meet the project's needs either, and finally, the endless debates about them were exhausting.

There is no point in maintaining our own standards, scripts and NPM packages... let's just adopt what WordPress is doing.

The Solution

• Use the exact ruleset files and configs from WordPress
• Sprinkle in a handful of WDS preferences (like array short syntax and Tailwind support)
• Use @wordpress/scripts (as natively as possible) for compiling assets
• Leverage linting via Webpack to provide real-time feedback
• Enforce via the pre-commit hook in Git
• Assert using Buddy at the PR level

The Benefits

• By adopting native @wordpress/scripts and deferring minifying to production builds only, npm run watch compilation times were reduced from ~6-8 seconds down to ~2. 💪🏻 😮
• Prettier and PHPCBF support 🥳
• Hopefully with the pre-commit hook, we'll have less back-and-forth during a Pull Request. Engineers will be forced to check-in properly formatted code. This is good for the bottom line! 💰
• The standards will "live on" for the entire life of the theme 😄
• Project Leads can easily adjust standards from project-to-project 😏
• No more NPM packages, Github repos, or Scripts to maintain 🎈
• WP CLI is included as a Composer dependency now 🚄

Usage

• Clone the main branch of wd_s
• Open wd_s in your code editor as the root
• Type npm i --legacy-peer-deps
• Type npm run watch to kick-off the dev server and Browsersync
• Your code editor and linting plugins should pick up on the rulesets and configs automatically
• Prettier and PHPCBF (if you have those plugins installed in your IDE) should auto-format your code
• Webpack is watching any warnings or errors too, and will report them in the CLI
• Finally, Lefthook will prevent commits until the codebase is "clean"

Bypass Pre-Commit Hook

Not everyone want's to be stopped and forced to format their code prior to a commit. Especially if it's early in your feature, and you're working in a dirty branch prior to opening a pull request.

You can bypass the pre-commit hook by using the --no-verify flag.

git commit -m "fixed the thing" --no-verify

Note: Buddy will still run assertions against your PR, so don't forget to clean things up before opening it!

Props

Thanks to @aubreypwd @jrfoell @richaber @salcode and @coreymcollins for all their testing and support.

Add composer/installers

Adds composer/installers dependency so theme is installed in the correct place when required via composer.

2.0.0

This release marks a huge shift in how WebDevStudios builds websites going forward. Please read https://webdevstudios.com/2020/09/08/gutenberg-first/ for more information behind the "why".

To summarize, we've gutted wd_s and started over from scratch... leveraging a modern tool-chain for building WordPress themes.

Support for:

• Gutenberg
• TailwindCSS
• @wordpress/scripts
• ES6+ based JavaScript
• WDS Coding Standards
• Husky

Check out the README and Wiki for information on getting started.

Props to:

@coreymcollins, @aubreypwd, and @asharirfan.

Also, thank you to everyone who was involved in each and every conversation and demo over the last few weeks.

Note:

WebDevStudios does not support semantic versioning for wd_s. Because this release is a such a drastic departure from 1.0, I felt it necessary to tag and release. WDS will not be tagging and releasing minor updates, we'll just push updates directly to the main branch.