felix-arntz.me

Category: Blocks

  • Storing Confidential Data in WordPress

    Storing Confidential Data in WordPress

    It’s been a while since I have posted on my blog. In fact almost 2 years now. But it’s been even longer since I have significantly touched the foundation of my website; other than the regular updates, adding a small plugin here or there, my website had been using the same infrastructure and theme since 2019. A lot of it even already existed the same way in 2018. My website had gotten really out of date, in terms of both content and technology. Some of the blocks I had implemented years ago were no longer working, so part of me was even afraid to open the block editor.

    A few weeks ago, I finally decided to change that and modernize my website. But it didn’t just came out of nowhere. Specifically, I wanted to update my website to use a block theme. I had been excited about them since they were in the exploration stage already in 2019, pretty much as far back as when I was rebuilding my website, “the old way”. The opportunities for enhancing performance due to the new block theme paradigm seemed extremely promising to me.

    Now that we’ve already had 3 major WordPress releases to establish and refine the new infrastructure, I decided to really give it a try. In this post I’ll share my experiences with you as well as the outcome and how it is impacting performance.

    Read more

  • Using CSS Custom Properties for better UX in Frontend and Gutenberg

    Using CSS Custom Properties for better UX in Frontend and Gutenberg

    If you are a WordPress theme developer, chances are high that you’re working with the Customizer to provide certain design options to your themes’ users – whether it is for colors, fonts, spacing or else. Providing customization opportunities is crucial for a theme’s adoption as you will never be able to please every user with your theme’s out-of-the-box design. As widely known, most WordPress users look for feature-rich solutions when assembling their site. They may find your theme’s base design very appealing, but if they cannot modify it to e.g. use their brand colors, they’ll quickly move on to something else. Long story short: Allowing users to customize your theme is crucial for adoption.

    Now there’s an issue with that though: Most of these design options affect the site’s CSS, and CSS is a largely static resource. Therefore the typical approach to integrate these Customizer controls with the theme’s actual appearance is to copy the pieces of CSS that would be affected by the respective options from the stylesheet into a PHP file, and from there generate that stylesheet on the fly. This results in three major problems:

    1. You are most likely sending a whole bunch of duplicate CSS down the line, negatively affecting performance of the site.
    2. Because you are duplicating CSS, the approach is quite error-prone. For example when modifying CSS later, you need to remember to also make the exact same change in the Customizer CSS, if it applies there too.
    3. This also affects the WYSIWYG experience in the editor, as you also need to manually maintain the CSS for the editor (Gutenberg / classic) in the same way.

    There is a solution to all of these problems though, and its name is “CSS Custom Properties”. In this post we will look at how to use this CSS feature to improve UX for both website visitors and content creators, all at once.

    Read more

  • Native Lazy-Loading for WordPress

    Native Lazy-Loading for WordPress

    A few weeks ago, it was announced that Google Chrome started supporting the new loading attribute, which allows websites to have their images and iframes lazy-loaded without any custom JavaScript. Support for the feature will most likely be extended to further browsers soon, but you can already use it today without any negative impact for browsers where it isn’t supported yet.

    If you have a WordPress site, our team at Google has just released a new plugin “Native Lazyload” which you can install, activate, and your site will support native lazy-loading instantly.

    Read more

  • Customizing Google Analytics Configuration in the Site Kit Plugin

    The Site Kit plugin by Google makes it trivial to integrate your WordPress site with various publisher-facing Google services such as Google Analytics. In addition to exposing key insights from these services directly in your WordPress dashboard, it also automatically places the necessary code snippets on your page to ensure these metrics can be gathered properly.

    In this post we will look at Google Analytics specifically and how you can customize its behavior in the Site Kit plugin. While the default configuration already gives you access to many valuable metrics, Google Analytics becomes really powerful when you have tailored it to your specific use-cases. With Site Kit currently still in Beta, the user-facing configuration options for Google Analytics are minimal. While we are exploring how we can expose more customization opportunities through the plugin’s settings UI, it may be a while until these improvements are included in a new plugin’s release. Since its beta 1.0.4 release though, the plugin includes filters to modify the Google Analytics configuration, so as a developer you can tweak it in almost any way you like already today.

    Read more

  • Exploring Sitewide Gutenberg Usage Today

    Exploring Sitewide Gutenberg Usage Today

    Phase 2 of Gutenberg is all about taking the compelling capabilities of the block editor to the site level. WordPress 5.0 introduced it as the new editor for post content, but that was only the beginning. Blocks are a powerful tool and inspired by the learnings of various other formats of editing that WordPress and other platforms have been using over the years, so it makes sense for them to provide a unified approach to reusable content. The difference between shortcodes and widgets for example has pretty much been non-existent, and it felt weird to create a certain UI component only for one of the two, or having to write some duplicate code to address both layers. With Gutenberg being expanded to become the editor for your entire WordPress site, beyond the post content bubble, this problem will be solved. Furthermore, it will bring the new editor much closer to being able to fully compete with existing layout builders.

    Each of the steps to get there (e.g. migrating widgets, menus, and possibly even other elements fully controlled by the theme today) poses several challenges, so it might still be some time until we get to experience all this functionality in its proper implementation. Therefore, inspired by a conversation with Morten at WordCamp Europe a few weeks ago, I wrote a tiny experimental plugin that allows you to use blocks on a sitewide level and explore what the theming of tomorrow could look like already today.

    Read more