fidzu : wordpress

As part of an ongoing initiative to convert the plugin's existing shortcodes to blocks, WooCommerce core developers are testing a new block-based cart and checkout experience. This major architectural change has also been redesigned to improve conversion rates for stores.

An initial preview release of the blocks can be tested using the WooCommerce Blocks feature plugin version 2.6.0, which was released yesterday. WooCommerce designer Gary Murray shared screenshots of the new design inside the editor, where store owners can now manipulate a live preview of the cart. It automatically loads demo products in the preview and users can switch between the full cart and the empty cart states.

Cart block

So far, the block settings for the full cart include the option to hide/show the shipping calculator and hide shipping costs until an address is entered. The empty state allows users to do things like change the size of the empty cart icon or replace it with a custom image, edit the "continue shopping" text, and add more blocks.

Store owners can also preview the entire checkout form in the editor, allowing them to immediately see how any settings changes affect the checkout process.

"In some areas we have made incremental improvements (like the cart) while the checkout sees much bigger changes," Murray said. "Alongside these design changes we have also started the initial 'migration' of core cart and checkout settings to block settings and have also included a few new features within the block settings to give merchants more 'direct' control of their stores checkout experience."

One of the major benefits of the new blocks is that it instantly gives store owners more customization options. This is much more user-friendly than the prospect of having to customize specific theme templates for the cart and checkout pages. This implementation of blocks in WooCommerce is another reminder of the magic of blocks to put more power in the hands of users.

The blocks currently support only the following payment methods: Stripe Payment Request (ApplePay, ChromePay), Stripe CC payment method, PayPal Standard, or Cheque. They also do not yet support third-party plugins that integrate with regular cart and checkout shortcodes. The WooCommerce core team is working on making these blocks more extensible but developers should still consider them as being in the experimental stage for now. Check out the initial preview announcement for more information on how to test the new cart and checkout blocks.

28 May 2020 9:47pm GMT

GretaThemes launched its eStar theme yesterday. The team's goal was to build a lightweight theme that focused on the block editor. However, it works alongside other page builders such as Elementor, Beaver Builder, and more.

GretaThemes is a project of eLightUp, which is the same company behind the popular Meta Box framework, WP Auto Listings, and FitWP. The site's focus is on selling WordPress themes, many of which are pro versions of its free theme offerings. For now, eStar is merely a free theme with no direct commercial upsells.

eStar is promoted as a multipurpose theme that is suitable for various types of sites. In my tests, I found it to be best designed for businesses that need a clean and professional look. However, with enough tweaks via its numerous customizer options, end-users can get a lot of mileage out of this theme.

With gzipping enabled, the theme's scripts and styles add less than 10 kb of data to the page load. That is reasonably lightweight and should result in a speedy website, assuming nothing else causes issues.

The theme recommends and integrates with the Meta Box and eRocket plugins, both of which are available for free in the WordPress plugin directory. The Meta Box integration will add extra per-post settings, which are primarily related to the layout on the front end. These can be configured globally in the customizer. The plugin integration merely provides the ability to do so on the per-post level. The eRocket plugin adds a contact info and recent posts widget along with social sharing buttons. The eStar theme has additional styles for making these fit into the design on the front end.

eStar ticks many of the boxes that would make it a great go-to option for people who need a reliable theme that supports the block editor. It does not push any artistic boundaries. It is not the type of theme that has an incredible wow factor. It is simply a solid offering that gives users a lot of freedom to take an almost boring default configuration and turn it into something special with a mix of font and color options.

Check out the eStar theme demo for a picture of what the theme looks like.

Build Landing Pages Like a Pro

eStar theme landing page.

The GretaThemes team has designed eStar to get out of the way for users who want to build full pages with either the block editor or a third-party page builder. It offers several post and page templates as a starting point:

• Blank Canvas: Displays only the post content.
• Narrow Content: Shows the header, footer, and post content, which is in a narrow column in the center of the page.
• Full Width: Shows the header, footer, and post content, which stretches across the page.
• Wide Content: Shows the header, footer, and post content, which stretches across the page.

No, there is no typo or copy/paste mistake for those final two templates in the preceding list. There seems to be no difference between the Full Width and Wide Content templates. I am unsure why both are included, except to wonder if one or the other is there for backward compatibility with other themes.

What makes the theme great at building landing pages so great is not its four custom templates. Those are nice additions that provide an open canvas. However, it is the theme's block styling that provides the customizability to build these landing pages. Its block styles will not blow you away with unique design takes. They simply work.

The one thing that would bring this theme to the next level would be the addition of custom patterns. The Patterns API is not available in core WordPress yet, but it will likely land this year. Now is a good time for the team to get on top of this feature, even if it is a part of a commercial offering.

How Does the Theme Handle Blogging?

Single post view with custom options selected.

The theme markets itself as suitable for blogging. However, it falls short of being a great blogging theme with the default configuration. For long-form content, single posts have far too many characters per line for comfortable reading. For short, media-rich blog posts, it would work well.

To get the most out of eStar as a blogger, users will need to make some adjustments. Fortunately, this is one area in which the theme shines. It provides a slew of customizer options that provide enough flexibility to make it work. By heading to the Fonts section in the customizer and bumping up the Font Size in the Body section, it would transform the theme into something suitable for long-form content.

There are some other adjustments worth considering. If you routinely use the same image within post content as you do as a featured image, the theme will show that same image twice on single post views - a common issue in many themes. eStar does provide a customizer option to configure or disable the featured image on single posts. Using the featured image as the header background is also another useful option the theme provides and can make your posts stand out.

I also recommend disabling the sidebar for blog posts if you enjoy wide or full-width media. The theme's design stands out when it can make copious use of the page.

The biggest issue - and would be a deal-breaker for me if I could not code - is the theme adds a custom design to the first paragraph of the post content. The font-size is increased and given a light gray color. It is not easy to read. The theme should leave this bit of customization in the user's hands. WordPress provides block-level customization via the editor if the user needs to do something special with the intro paragraph.

I also recommend switching the archive layout to either grid card or grid, which is used in the theme's demo. The grid card option looks a little better and is a concept likely lifted from Tailwind's component documentation.

Grid Card layout option for archive pages.

Final Thoughts

The theme is not without a few trivial issues. The site title and description feel a little cramped. I would love to see some extra whitespace above and below it. I am also not a fan of the theme's sticky header. It would be great to see an option to disable this.

With the default configuration of the theme, I would recommend it to anyone who needs a solid design for a business website. By throwing in a custom logo and adjusting a couple of colors, the average end-user would have all they need to launch a business site. With the power of the block editor or a third-party page builder, costs to setting up shop would be minimal.

For people who do not mind a little legwork and need something better suited for blogging, the theme can handle it. It will simply take some minor customization to make the text a bit more readable.

Overall, it is nice to see another good option land in the official WordPress theme directory that caters to the block editor. I look forward to seeing what GretaThemes does in the future with its themes and hope to see other theme companies follow suit with block editor support.

28 May 2020 8:47pm GMT

photo credit: Valeriy Poltorak

As developers and internet users become increasingly aware of the CO2 footprint of their data usage, renewed interest in carbon offsetting programs has cropped up in recent years. These programs allow individuals and organizations to "offset" their carbon dioxide emissions by funding environmental endeavors, which range from planting trees to clean energy projects, with lots of variety in between.

Carbon offsetting schemes remain controversial, as they do not actually directly cancel out emissions. The programs allow corporations to appear "environmentally friendly" with their contributions while continuing to burn fossil fuels. Ideally, corporations will work on both reducing their emissions and "neutralizing" the damage done with projects that renew the earth.

For web developers, awareness of your product's CO2 footprint is the first step, and carbon offsetting programs are usually fine-tuned to make this data relatable. This awareness is especially critical if the software you are building is used on millions of devices. Aris Stathopoulos, a WordPress developer known best for authoring the Kirki Customizer Framework, has created a plugin called Carbon Offset that calculates the greenhouse emissions from your website visits and integrates with the Cloverly API for offsets and payments.

"The internet is a huge machine consuming vast amounts of energy," Stathopoulos said. "The whole chain from server farms to ISPs to client devices are usually powered by non-renewable sources of power. What really rang the 'danger' bell in my mind was reading Mozilla's Internet-Health report two years ago.

"Since then I've been trying to help make the web a bit more sustainable. Sometimes that means converting a script to vanilla JS, building a theme, or just talking to people about things they can do to make their site more performant and more eco-friendly/sustainable. Carbon Offset is my latest effort on that front."

The first version of the plugin includes a details page with the calculated impact of your site's carbon footprint, displayed next to the weight of the carbon offset. I could see this page evolving to be more visually compelling in the future. The settings page is where users can hook up their sites the Cloverly API.

Cloverly offers offsets on demand, which means that users fund clean energy for one of the projects the company has selected. These include initiatives that do things like capture fugitive gas emissions, improve forest management, and convert methane from manure into renewable energy.

Browsing the WordPress.org plugin repository, it seems the platform only has a handful of plugins designed to raise users' awareness about carbon emissions. The Website Carbon plugin gives users a broad overview of the impact of their site's emissions, including reporting on if the data center the site is hosted in is powered by renewable energy. CO2ok for WooCommerce is another plugin that integrates with a service for purchasing offsets.

Stathopoulos wants to expand his plugin to integrate with additional services so that users have more choices in offsetting their websites' carbon footprints. He has no affiliation with Cloverly. He said the only reason he chose to integrate with it is because they have a great API that is easy to work with. He made his implementation extensible so that adding extra services will be easy when he finds another one with a good API.

Breaking Website Owners Out of Complacency: Awareness Is the First Step Towards Reducing Emissions

"There are sites out there that measure a site's carbon footprint and they give an idea of how much carbon is generated whenever someone visits a webpage," Stathopoulos said. "If you start testing websites you see some good, some bad and some shockingly costly. Take for example w.org: Each visit produces 0.68g of carbon emissions, and that's one of the good sites. NYTimes.com generates 3.2grams of carbon every time someone visits their site."

Stathopoulos wants to use his plugin to raise awareness among WordPress site owners, since the software is so widely used but oftentimes weighed down by third-party extensions.

"With WordPress powering 30%+ of the web, we're talking about millions of daily views," he said. "In the unlikely optimistic scenario that all of them generate no more than 0.5g per page-load, WP sites generate no less than 500 metric tons of carbon/day. This has nothing to do with WordPress. Instead it's about the 5MB image that the user wants on their frontpage, the fancy wiggling JS animation that requires that extra 5kb of JS, developers insisting on using jQuery in their themes and plugins, the unused 300kb of CSS that a site has, the Facebook widget, social sharing buttons than use 100kb of JS, or the horrendous use of images of text instead of plain text.

"It's all data that gets downloaded every single time and each time it does, the server runs a few milliseconds more, the browser takes a few more milliseconds to render. It all adds up to wasted energy, energy that took real resources to generate and in the process of doing that, it generated some more carbon emissions."

It's easy for anyone to get complacent when the data usage seems to run on magic and doesn't immediately impact the site owner. Plugins like Carbon Offset aim to make wasted resources more of a reality. Stathopoulos is currently working to add e-commerce support that will allow customers to offset the carbon footprint of their purchases' delivery, or even allow shop owners to fund the offset instead. He said this will usually amount to a few cents per sale, but it can make a meaningful impact if done on a large scale.

"One of my hopes is that it will help increase sensitivity and awareness," Stathopoulos said. "Hopefully, some people will understand that their website is part of the problem. Hopefully, it will urge them to rethink how they build their sites and want to be part of the solution - ideally by striving to lower the carbon emissions of our websites.

"But since for various reasons that is not always possible, the plugin will show how much our website costs the environment, and some may choose to give something back."

Stathopoulos said that purchasing offsets was "surprisingly cheap." He purchased offsets for 50kg of CO2 for approximately $4, and his website 'burns' 0.2g/visit.

"This means I'm good for the next 2.5 million visits," he said. "If my site was as heavy as the NYTimes, then that would buy me 15k views worth of damage to the environment, which would be a pretty good indication that I have to change some things on my site.

"The cost is not the point. The point is being conscious about what we build, how much damage we do, and helping undo that damage as much as possible. After all, a sustainable website is a lot faster and more performant than a non-sustainable one. Everyone wins."

28 May 2020 1:48am GMT