This is a WordPress child theme of Argent used to showcase how to convert a Classic WordPress theme into a Hybrid theme.
A hybrid theme blends elements of block-based themes, such as theme.json for style definitions and block editor customization, while retaining traditional PHP template files. It leverages the block editor for managing content but not for constructing the theme itself. Essentially, a hybrid theme enhances a classic theme with additional Site Editing capabilities.
A hybrid theme enables clients with a Classic theme to embrace modern WordPress features by utilizing the block editor for content creation. This not only boosts flexibility but also helps future-proof the project, avoiding legacy issues.
By integrating block editor support into existing projects, the theme remains compatible with both the block editor and traditional tools like the classic editor, custom meta fields (ACF, CMB2, etc.), and popular page builders such as Elementor, WPBakery, and Beaver Builder.
Below are some of the challenges encountered while developing this child theme and the solutions used to address them.
The Argent theme sets the html element's font-size to 62.5% to simplify working with relative font sizes, making 1rem equal to 10px instead of the default 16px. This allows developers to calculate rem units without complex math (e.g., 13px = 1.3rem).
However, the WordPress block editor doesn't allow resetting the root font-size value and sticks with the browser default of 16px (where 1rem = 16px). To address this, we could adjust the html element's font-size in the child theme, but this would require recalculating all rem values in the parent stylesheet.
A better alternative is to use pixel values in the theme.json file. While not ideal, this ensures the theme.json styles more closely align with the parent theme without recalculating all relative units. As clients transition to a block theme, it's recommended to stop using the html font-size hack and return to using rem units in theme.json.
To use a custom web font in theme.json, you'll need to download the font files and place them in the theme folder. In this child theme, the fonts are stored in /assets/fonts/. The recommended format is .woff2, but Google Fonts doesn't offer a straightforward way to download this format directly.
A simple way to download Google Fonts in .woff2 format is by getting the embed code from Google. Paste the font family URL into your browser, which will display the font’s stylesheet. Look for the download URL under the @font-face rule in the src property.
For example, if the Google embed URL for the Cabin font is https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap, pasting this in the browser shows a stylesheet containing @font-face rules for each font variant:
@font-face {
font-family: 'Cabin';
font-style: italic;
font-weight: 400 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cabin/v27/u-4g0qWljRw-Pd815fNqc8T_wAFcX-c37OnhHXisAZFxqZQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}In this example, the download URL is https://fonts.gstatic.com/s/cabin/v27/u-4g0qWljRw-Pd815fNqc8T_wAFcX-c37OnhHXisAZFxqZQ.woff2.
This child theme provides a Blocks Page template (/page-templates/blocks.php), designed to offer editors a blank, full-width canvas to fully utilize the Block Editor's features.
The appearance of this template may vary depending on the theme and could require specific markup and additional styling to ensure compatibility with the parent theme.
- Converting a Classic theme to a Block theme
- theme.json in Classic themes
- Using theme.json with classic themes
- Block Editor Handbook: Global Settings & Styles (theme.json)
- Theme Handbook: Global Settings and Styles (theme.json)
- Theme.json Version 3 Reference
- Theme Support
- 15 ways to curate the WordPress editing experience
- Using Block Template Parts in Classic Themes