Normal view

There are new articles available, click to refresh the page.
Before yesterdayMain stream

WordPress 6.7 Brings New Power and Flexibility

12 November 2024 at 18:53

Welcome to the latest in WordPress innovation with the release of WordPress 6.7! This update brings a wave of new features, design flexibility, and performance enhancements to elevate your WordPress experience, whether you’re building your first site or fine-tuning a complex project.

From the introduction of the Twenty Twenty-Five theme to powerful new editing tools and developer capabilities, WordPress 6.7 empowers you to create a site that’s dynamic, engaging, and uniquely yours.

As always, WordPress.com sites are updated automatically, so you may already see these new features live. Read on to discover what’s new and how these updates make it easier than ever to build, design, and manage a standout site on WordPress.com.

Table of contents

  1. The basics
  2. Twenty Twenty-Five theme release
  3. Expanded block customization options
  4. Streamlined creation with Zoom Out
  5. Simplified Query Loop block
  6. Improved font management tools
  7. Customizable Data Views
  8. Developer features
    1. Template Registration API
    2. Data Views API
    3. Block Bindings improvements
  9. And more

The basics

WordPress 6.7 brings a host of new features, design tools, and bug fixes to enhance your website creation experience. WordPress.com updates sites automatically, so there’s nothing you need to do before you can enjoy these benefits.

As a WordPress.com user, you may have already enjoyed early access to some of these improvements, reflecting our commitment to keeping you equipped with the most up-to-date features. If you experience any issues, our Happiness Engineers are here to help at wordpress.com/help.

Let’s look at some new enhancements that can help take your site to the next level.

Twenty Twenty-Five theme release

As part of the annual tradition, WordPress 6.7 introduces a new default, block theme: Twenty Twenty-Five

Twenty Twenty-Five is designed for bloggers of all scales—from hobbyist writers to major news sites—capturing a balance between simplicity and versatility. It allows you to intuitively create a site that feels truly personal while offering the flexibility for complex designs. With a diverse array of patterns and templates for everything from landing pages to photo blogs, the theme is tailored to enable seamless storytelling for any purpose. Natural, universal imagery and thoughtfully chosen typography bring warmth and a timeless aesthetic that resonates on a global scale.

Built to support multiple languages and visual styles, Twenty Twenty-Five includes a curated selection of color palettes and font pairings, ensuring both accessibility and elegance in design. Whether you lean toward a minimalist personal blog, a striking photo gallery, or a content-rich magazine layout, the theme’s templates and design tools empower you to build a site that is uniquely yours

Screen shot of variation one of the new Twenty Twenty-Five theme released with WordPress 6.7
Screen shot of variation three of the new Twenty Twenty-Five theme released with WordPress 6.7
Screen shot of variation two of the new Twenty Twenty-Five theme released with WordPress 6.7

Expanded block customization options

WordPress 6.7 also introduces even more styling flexibility, adding additional options for borders, backgrounds, shadows, and spacing across numerous blocks. These updates allow you to create custom designs without extra code. Notably, the Group block now supports shadow effects and the Content block allows for a background image, while blocks like Paragraph, Heading, and Buttons offer additional options for borders, color, and padding.

Streamlined creation with Zoom Out

The new Zoom Out feature offers a fresh way to view and design your content at a high level. By toggling to this zoomed-out perspective, you can easily style entire sections or adjust the arrangement of blocks across a page, all without getting caught up in the details of individual blocks.

With Zoom Out, you can make broader edits using patterns, giving you control over top-level containers and block groups. Click or drag-and-drop to add patterns and use the arrows to the left to rearrange them. When you’re ready to dive back in, simply double-click the content area or click the Zoom Out icon to return to the standard editor view. This feature is a game-changer for efficient layout creation, whether you’re building pages or fine-tuning templates.

Simplified Query Loop block

The Query Loop block, known for its power and complexity, has been refined to make it more user-friendly. A new toggle allows you to choose between “Default” and “Custom” modes, simplifying the creation of content-rich sections on your site. In Default mode, the block automatically inherits settings from your template, so posts display instantly without extra configuration. This means you can drop in the Query Loop block and see your content right away, saving setup time. For more specific use cases, switch to Custom mode for precise control over what content is displayed.

Additional refinements include a cleaner layout of the Settings Sidebar on the right, making it simple to adjust display options in one place.

Key features and updates to take note of:

  • Quick preview when adding the block from the inserter
  • Display controls moved from the toolbar to the sidebar
  • New post format filter for customized content display (on select themes)
Screen shot of updated Query Loop settings

Improved font management tools

The latest updates bring powerful new options to font management for block themes, making it easier to customize typography across your site. In the Global Styles section, you can now create, edit, and delete custom font size presets. These presets let you define reusable font sizes site-wide, with options to customize names, base sizes, and fluid scaling, which automatically adjusts font size based on screen dimensions.

Additionally, fonts are now grouped by source (theme or Google Fonts), giving you a clear view of where each font originates. A convenient “Select All” option lets you quickly activate or deactivate fonts as needed, with active fonts visibly highlighted for easy management.

Customizable Data Views

Data Views, a powerful tool for managing pages, patterns, and templates in the Site Editor, now features several enhancements to simplify navigation:

  • Grid Layout Preview Size: Choose the view that works best for you.
  • Customizable Columns: Reorder columns based on your preference.
  • Bulk Actions on Grid Layout: Select multiple items and take action quickly.

These refinements make it easier than ever to organize your site, whether you’re handling a few pages or hundreds.

Developer features

WordPress 6.7 introduces several enhancements for developers, making it easier to create unique site experiences.

Template Registration API

This release allows developers to register custom block templates directly within plugins, simplifying the process of creating and managing front-end template outputs. The Template Registration API enables developers to define default content for custom post types, taxonomies, and virtual pages—all built on the block system, so both themes and users can customize templates to their needs.

Data Views API

Developers can now use a new API to register and unregister Data Views actions, offering more flexibility in managing project-specific actions. Learn how to use Data Views in your own plugins and for adding images to the Media Library. This update is part of ongoing work in Gutenberg’s Phase 3 and the Admin Redesign project, providing expanded tools for custom workflows.

Block Bindings improvements

Building on Block Bindings introduced in previous releases, this update adds a user interface for admins and editors to connect block attributes with custom field data directly in a block.

And more

There are too many great updates to cover them all here, but here are a few smaller yet valuable enhancements worth noting:

  • Block inserter: The block inserter now stays open while you interact with the editor canvas, making it easier to navigate your content as you add blocks.
  • Editor topbar: The action icons in the top right corner have been reordered for improved accessibility.
  • Pre-publish check buttons: The second Publish (or Save) button has been repositioned within the pre-publish panel, so you won’t need to move your mouse after clicking the initial Publish (or Save).

WordPress 6.7 brings hundreds of improvements, developer features, and bug fixes. The above highlights are only a taste of what’s available. If you’d like to dive deeper, the official WordPress 6.7 Field Guide has all the technical details.

Click below if you’re a developer and want to leverage the benefits of hosting your sites with WordPress.com:

💾

💾

5 Powerful Gutenberg Blocks for Developers to Create Custom Layouts

31 October 2024 at 11:00

In the world of web development, creating custom layouts often feels like a balancing act between functionality and design. But with Gutenberg, WordPress’s powerful block editor, developers now have the tools to craft complex, unique layouts—all without the need for third-party page builders. Whether you’re building a site from scratch or looking to enhance an existing one, Gutenberg offers a streamlined, flexible approach to layout design.

In this post, we dive into five specific Gutenberg blocks that stand out for their versatility and power. 

  • Group Block: Allows you to group multiple elements and apply consistent styling across them.
  • Columns Block: Enables developers to create multi-column layouts that are fully responsive across all devices.
  • Cover Block: Combines visuals with layered content, like text and buttons, to create immersive, standout sections.
  • Spacer Block: Provides an easy way to manage consistent spacing throughout a layout without adjusting individual block settings.
  • Query Loop Block: Dynamically displays lists of posts or other content, offering flexible filtering and layout options.

These blocks are essential tools for developers who want to create custom layouts that are both visually stunning and fully functional. Keep reading to explore how each block works, see examples of them in action, and learn about potential use cases that can elevate your next project.

Unlock Custom Layouts with the Group Block

When it comes to crafting custom layouts in WordPress, the Group block is one of the most versatile tools in your arsenal. This block allows you to combine multiple elements—such as text, images, and buttons—into a single, cohesive section. By grouping elements together and utilizing the Group block variations, you gain greater control over their positioning, styling, and responsiveness.

Why the Group Block is Powerful

The strength of the Group block lies in its ability to simplify your design process. Instead of having to adjust settings on each element individually, the Group block allows you to apply consistent styling to an entire section. This not only saves time but also ensures that your layouts are cohesive and visually appealing across different devices. It’s also the primary block used for creating fixed elements, such as a sticky header or sidebar.

How to Work with the Group Block

In the screen recording below, you’ll see how the Group block enhances the process of building a hero section by combining elements like images, text, and buttons into one cohesive section. Notice how easily you can adjust the spacing, colors, and alignment, streamlining your design workflow.

Putting the Group Block into Action

The Group block excels at creating reusable modular sections, such as a call-to-action or feature area, that can be deployed consistently across multiple pages. This block is also essential for organizing complex content arrangements into a single, unified section that can be easily updated site-wide. Whether you’re crafting a sticky header or organizing a product showcase, the Group block gives you precise control over how these elements are positioned and styled.

Design with Flexibility Using the Columns Block

The Columns block offers flexibility in organizing content side-by-side, allowing developers to create multi-column layouts that can accommodate grids, comparison sections, or any layout where parallel information is key.

Why Developers Love the Columns Block

The true power of the Columns block lies in its versatility for designing structured layouts. Its flexibility allows you to customize the number of columns, their width, and spacing, from simple two-column layouts to more complex grids. The Columns block is also fully responsive, ensuring layouts automatically adjust across different screen sizes, providing developers with seamless control over visually balanced designs.

See the Columns Block in Action

This recording showcases the Columns block used to create a three-column layout featuring services or products. Notice how columns with multiple components can be duplicated and edited.

When to Use the Columns Block for Maximum Impact

The Columns block is ideal when content needs to be displayed side by side, such as in service comparisons, product grids, or team member profiles. Combining it with the Group block allows for more complex, unified sections with consistent styling while still leveraging the flexibility of columns.

Create Stunning Visual Impact with the Cover Block

After organizing your content with the Group and Columns blocks, the Cover block steps in to add a bold, immersive visual experience. Whether it’s a full-width section with a background image or a full-screen video, the Cover block helps create standout moments on your page, perfect for grabbing your audience’s attention as they scroll.

Why the Cover Block Stands Out

What sets the Cover block apart is its ability to combine beautiful visuals with layered content like text and buttons. This block allows for a sleek, modern look with customizable overlays, and its parallax effect creates a sense of depth as users scroll. It offers developers a visually striking way to engage visitors and direct attention to key content.

How to Use the Cover Block as a Section Break

The following video demonstrates the Cover block being used to create a dynamic section break with a full-width image, overlay text, and a contrasting color filter. Pay attention to how this visually striking break guides users from one section to the next.

Where the Cover Block Shines

Whether for a hero section, a banner to break up sections, or a feature area to emphasize important content, the Cover block works best where you want to make an impression. It’s ideal for landing pages, events, or promotional areas where a mix of powerful visuals and actionable text is needed to guide visitors toward their next step. 

Create Balance and Breathing Room with the Spacer Block

For developers, clean, balanced layouts are crucial to a great user experience. The Spacer block might seem simple at first glance, but its ability to fine-tune the spacing between elements gives you precise control over your design. Rather than manually adjusting margins or padding across multiple blocks, the Spacer block offers a streamlined approach for maintaining consistency throughout your layout.

Why Developers Choose the Spacer Block

One of the key benefits of the Spacer block is its ability to apply consistent spacing without needing to modify each block’s individual settings. For developers managing complex layouts, this can be a huge time-saver. You can insert Spacer blocks between sections to ensure consistent spacing, avoiding the need to repeatedly jump between block settings. This results in a cleaner workflow and a more polished design.

Simplifying Layout Spacing

This clip highlights how the Spacer block ensures balanced spacing between sections. You’ll see how adding Spacer blocks keeps the layout clean and cohesive without needing to adjust individual padding and margins for each element. Plus, see how changing the height of multiple Spacer blocks is one step when you create a Spacer synced pattern.

Where the Spacer Block Adds Efficiency

The Spacer block shines when you need to maintain uniform spacing throughout a project. You can preset its default dimensions or sync it within design patterns, and any future adjustments can be done in one place, saving you time when managing entire page or site-wide updates. For added flexibility, you can apply custom CSS classes to synced Spacer block patterns, making it simple to adjust spacing for different screen sizes. This not only improves the speed of implementation but also ensures consistency across your layouts, whether for landing pages, posts, or custom templates.

Dynamically Display Content with the Query Loop Block

The Query Loop block allows you to easily pull in lists of posts, pages, or custom post types, dynamically displaying content based on specific parameters such as categories, tags, or author. It’s an essential tool for developers who want to showcase content in customizable layouts without needing to manually curate each section.

Why Developers Rely on the Query Loop Block

The Query Loop block provides developers with powerful filtering and display options that are fully customizable. With complete control over how posts are pulled and arranged, developers can customize the Query Loop block to display filtered content based on categories, tags, or other criteria, allowing for tailored blog grids, portfolios, or archive pages that fit seamlessly into their overall site design.

Creating and Enhancing a Custom Query Loop Layout

This example shows how the Query Loop block is configured to display a custom set of blog posts, filtered by category. Notice the versatility and how integrating blocks together enhances the layout, resulting in a dynamic, visually balanced blog section that updates automatically.

Where the Query Loop Block Shines

On sites with frequently updated content, the Query Loop block provides a dynamic solution for showcasing new material. When integrated with other blocks it helps developers create visually engaging layouts that update automatically while keeping a consistent design structure.

Elevate Your Layouts with These 5 Powerful Blocks

These five versatile Gutenberg blocks—Group, Columns, Cover, Spacer, and Query Loop—can transform your layouts, helping you build dynamic, fully customized designs. Whether you’re creating responsive multi-column sections with the Columns block, adding visually striking breaks with the Cover block, or displaying dynamic content with the Query Loop block, these tools empower you to build and refine layouts with precision and creativity.

Each block offers unique strengths, and when used together, they give developers a powerful toolkit to craft sophisticated designs directly within the WordPress editor. By combining these blocks, you can streamline your workflow, maintain consistency, and create layouts that are both visually appealing and highly functional.

Try It Yourself!

Now it’s your turn. Experiment with these blocks in your next project and explore the different ways they can work together to create custom layouts tailored to your needs. In the comments below, share your unique Gutenberg-powered layouts and show us how you’ve applied these blocks to your projects. We’d love to see what you come up with!

❌
❌