Modern WordPress
- Fabian Kägy, a frequent Syntax listener, noticed WordPress discussions increasing.
- WordPress has significantly evolved in the past five years.
- It powers 43% of the top 1000 websites.
- Since version 5.0 (Dec 2018), the admin editing experience is a major part of the web, running React 18 in concurrent mode.
Evolution of WordPress Theme Building
- WordPress theme development has shifted significantly, moving away from hardcoded PHP templates.
- The block-based editor, similar to Builder.io, allows components to be treated as individual, rearrangeable blocks.
- This offers greater flexibility, as content and layout are no longer tied to static templates.
- This block-based approach allows for more dynamic and customizable website construction.
Theme JSON for WordPress
- Use a theme.json file in WordPress to manage design styles.
- Define a global color palette in the settings section and use the style section for default values.
- Override the global palette on a per-block basis to offer specific color choices for different blocks.
- Predefine colors for elements like headings, allowing editors to change them while staying within the defined options.
- This approach combines global style control with flexibility for individual block customization.
Headless WordPress Use Cases
- Some developers use headless WordPress for large projects.
- It's valuable to understand when a headless approach is beneficial versus using standard WordPress.
- Headless WordPress becomes more advantageous when content needs to be displayed across multiple platforms (like websites and mobile apps).
- For projects solely focused on website development with visual editing needs, traditional WordPress might be more suitable.
- Headless shines when data representation varies across different scenarios.
WordPress Workflow
- Use separate development, staging, and production environments.
- Migrate code deployments through these environments.
- Migrate the database down from production for real-world data testing.
- Handle data entry on the production side or a separate domain before launch.
- Use CLI scripts for database migrations and replacements if needed.
Block-Based Themes in WordPress
- WordPress now defaults to block-based themes for new site installations.
- These themes utilize blocks for all site elements, including navigation.
- Although built with blocks, elements like navigation can be edited separately and reused across the site with different styling.
- This allows for consistent design and efficient content management.
WordPress Theme Types
- WordPress themes now come in two types: classic and block-based.
- Classic themes use blocks only in post content areas, while other areas are templated.
- Block-based themes use blocks for everything, including navigation.
- The default WordPress installation now uses a block-based theme.
- The Full Site Editing feature enables building entire sites with blocks.
WordPress Performance
- Ensure a decent hosting environment for optimal server response times.
- Adhere to core web vitals by correctly sizing images.
- Minimize unused CSS and JavaScript.
- Avoid plugins that include a large number of unnecessary jQuery plugins.
- Utilize a block-based approach to load only necessary elements on each page.
ACF Blocks vs. Native Blocks
- ACF blocks, while familiar to those used to older WordPress, don't offer the same experience as native blocks.
- They use a fields-based approach, placing input fields in a sidebar, separate from the content preview.
- Native blocks allow direct editing within the styled content area, creating a more seamless experience.
- ACF blocks don't fully resemble the front-end, while native blocks do, improving the editing process.
Modern WordPress Development
- For developers comfortable with JavaScript and build systems, building with blocks in WordPress opens doors to using modern JavaScript and React.
- This approach reduces the need for extensive PHP knowledge while enabling creation of high-performing websites with good developer experience.
- Leverage modern tooling, GitHub actions, and a contemporary development stack within the WordPress ecosystem.
- This modern approach might surprise those with outdated perceptions of WordPress development.