Tag: wordpress

Posted on

WordPress 5.8 Media Library Changes You Should Know About

Category Image 080

It is hard not to look through a list of upcoming WordPress 5.8 changes and not find at least a little something to whet your appetite. With so many enhancements headed our way, even we have not been able to keep up with them all here at WP Tavern. The next release will bring a few much-needed media-related upgrades.

Users should enjoy WebP image format support and a copy-to-clipboard button on the media upload screen. Developers have a new hook for filtering the image output format, and the platform is dropping infinite scrolling.

WordPress 5.8 is scheduled to ship on July 20, so these changes will be landing in less than a week. If you have not already done so, give WordPress 5.8 Release Candidate 3 a test run and report any issues.

Infinite Scroll Replaced With Ajax Button

Media Library screen (first) and overlay (second) with “load more” buttons.

The upcoming core release will drop infinite scrolling for media in favor of an Ajax-powered “Load more” button. The admin screen and editor’s media overlay will cap the initial and subsequent “pages” to 40 media items each.

This change is a part of an effort from the WordPress accessibility team to improve the experience for end-users. Team member and core contributor Andrea Fercia noted two a11y problems with infinite scrolling. The first is that it is impossible or nearly for keyboard users to reach content appended to the screen. Second, there is no audible feedback or instructions about how infinite scrolling works for screen readers.

He also noted usability and performance issues. Infinite scroll can break the browser’s history, and there is no JavaScript fallback. And loading hundreds or more large-sized images increases the memory footprint.

While the media library is getting the Ajax treatment in WordPress 5.8, we should expect similar updates for other areas in the future, including:

  • Add Themes Screen
  • Customizer > Add Menu Items
  • Editor > Link > Search

Copy URL From Add New Media Screen

Screenshot of the Add New Media screen after an image has been uploaded. It now shows a "Copy URL to clipboard" button.
Copy URL to clipboard button on the Add New Media screen.

This change is an enhancement that rids the platform of a small but noticeable nuisance that has plagued it for years. When uploading an image from the Media > Add New screen in the WordPress admin, there was no way to grab its URL without clicking over to the edit screen.

WordPress 5.8 introduces a “Copy URL to clipboard” button that appears after the image has been uploaded. No need to leave the page and track down the URL. The change also makes the user experience consistent with the Media Library screen and overlay in the post editor.

More often than not, browsing Trac means seeing many of the same names. This time around, it seems that a regular user wanted a feature. They created an account — perhaps for this purpose alone –, wrote a support forum post, was directed to Trac, and created their first ticket. It took eight months to work its way into WordPress, but it is one of those success stories of an average user making things happen by just providing feedback. Thanks for the contribution, @anotia.

WebP Image Format Support

WordPress is allowing a new image format. And, no, it is not SVG (technically not an image). There are still security hurdles to jump for that to ever happen. However, it now supports WebP, which carries with it the promise of better performance for those who use it.

As Sarah Gooding reported for WP Tavern last month:

This modern image file format was created by Google in September 2010, and is now supported by 95% of the web browsers in use worldwide. It has distinct advantages over more commonly used formats, providing both lossless and lossy compression that is 26% smaller in size compared to PNGs and 25-34% smaller than comparable JPEG images.

In the report, she noted that only 1.6% (currently at 1.8%) of the top 10 million websites used the WebP format. With WordPress now adding support, that percentage is likely to rise in the coming years.

Developers: Image Editor Output Format Hook

For developers who want to transform images with one mime type to another, 5.8 introduces the image_editor_output_format filter hook. Plugin authors can convert all newly uploaded images or only overwrite specific formats.

The following example converts JPG images to the new WebP format:

add_filter( 'image_editor_output_format', function( $formats ) {
        $formats['image/jpeg'] = 'image/webp';

        return $formats;
} );

The output format will be applied to all image sub-sizes as they are created. However, this will only work for WebP images if the webserver supports it.

Posted on

Be: The Fastest and Easiest Way to Build Your Portfolio Site

Category Image 091

The website for your design business should not only explain who you are and what you do, but show off the impressive body of work you’ve created. It’s the strongest tool in your sales and marketing arsenal. 

But as a web designer, you know how long it can take to build a really great website for a client. If you’re ready to start attracting awesome leads and adding new clients to your business now, you might not want to spend that much time building your portfolio site. 

The good news is that you don’t have to. 

BeTheme’s new Muffin Builder is like upgrading from a Ford to a Ferrari. You’ll be shocked at how quickly you get your website to the finish line — and with superior results, no less. 

Let’s take a closer look:

New Muffin Builder features that’ll knock your socks off

Time is money when you’re a web designer. So, it’s important to build a portfolio site and get it online as soon as possible. 

Here are 6 features from the new Muffin Builder (and BeTheme) that will enable you to quickly and painlessly create something you’re proud of and that will undoubtedly impress prospective clients:

Feature #1: A professional-looking portfolio site already built for you

There are certain pages and features every portfolio should have: An attractive home page, convincing client testimonials, a selection of works, and so on. 

But just because the structure of your site will mirror other portfolio sites, that doesn’t mean it has to look like everyone else’s. 

As of today, BeTheme has over 600 pre-built sites, with dozens of portfolio site options to choose from: 

While these portfolio sites might be built for different types of creatives, pay attention to the different styles. Whether you want to give your site a futuristic edge or you want to infuse the design with some femininity, you’ll find the perfect portfolio-equipped site for your business here. 

What’s more, each pre-built portfolio site is compatible with Muffin Builder, so you’ll have the added benefit of being able to edit your pre-built site with this powerful website builder. 

Feature #2: Intuitive customization options

Realistically, you could have a new portfolio site designed and loaded into WordPress in under a minute with BeTheme. 

While each site comes with well-chosen imagery and helpful placeholder text, you’ll still need to customize the content and maybe even tweak the design in order to make it your own.

Once you’re inside the new and improved Muffin Builder, you’ll see how easy this is to do.

The first customization feature to take advantage of is the global settings editor, which you’ll find under Betheme > Theme Options in WordPress: 

Quickly update colors, fonts, layouts, and styles and apply them globally to the site from this panel. 

To make changes on a smaller scale, use the Muffin Editor within your Pages. The section toolbar will allow you to make adjustments to each container: 

You have the same level of control over the content within each block. The settings you find here all depend on what kind of content is in the block. For example: 

You have the flexibility to customize your content however you prefer: Use the text editor or take advantage of Muffin Builder’s predefined settings.

Feature #3: Importable and reusable section templates

It’s not just the base of your site that’s already built for you with BeTheme. 

Let’s say you’ve imported a great-looking portfolio pre-built site like Portfolio 2: 

You like the current layout of the About us page on this site, but you want to add a Google reviews section between the “My offer” and “How I work” sections. 

With the Muffin Builder, you can easily import pre-built sections using the icon on the right toolbar or by clicking “Pre-built sections” when you add a new section to the page: 

Chances are good that whatever you envisioned adding to the page can be found there. Like this:

As you can see, it’s all placeholder content. That said, the structure and design are taken care of, so all you need to do is fill in the content. 

Feature #4: Custom layouts and headers

Pre-built sites are a great starting point. In many cases, you can use them right out of the box. 

However, if you want to alter the layout across the site or on a specific page or two, Muffin Builder can help you make those adjustments:

Under the Layouts section in WordPress, set up your custom layout — which includes changing the header, too, if you prefer — and save it.

To apply it to your pages, scroll down below the Muffin Builder on each page and select the layout from the list: 

This way, you’re not just empowered to swap out your content for BeTheme’s placeholder content. With Muffin Builder, you get to customize as much or as little of the pre-built site as you want. 

Feature #5: Backup and restoration

It’s not uncommon to “sleep on it” and decide you liked the way the site looked or the way you wrote something previously. 

Thanks to the Muffin Builder’s revision panel and backups, you can quickly and painlessly roll back your portfolio site.

First, open the revisions panel: 

Then choose the revision (if there’s more than one) you want to restore: 

If you’ve ever stressed about an update you made to your portfolio and wished you could instantly go back to the way it was before, this new Muffin Builder feature is going to be a lifesaver.

Coming soon: The Front-end builder

If you prefer to design from the front-end of the website, a new Muffin Builder feature will be headed your way the Summer of 2021:

There are a number of reasons why many website builder tools (including WordPress’s own Gutenberg) have a front-end editing experience: 

  • It saves you the trouble of having to switch between the editor and website preview to check your work. 
  • Some people prefer to do their editing within the full context of the website as it’s easier to make decisions when looking at the big picture. 
  • It’s more client-friendly than the typical backend editor, so this feature can empower your clients and other non-tech-savvy users to make tweaks to their sites.

If you’ve been looking for a live visual editor to use in WordPress, this new feature is just around the corner!

The fast and easy way to build a portfolio: BeTheme + Muffin Builder

If you’re looking for a fast and easy way to build your digital portfolio, the solution is obvious: 

Start with a beautiful BeTheme pre-built site and then customize it with the intuitive Muffin Builder.

Who knows? This potent combo could end up changing the way you build websites for your clients going forward. 

Learn more about BeTheme, explore the more than 600 pre-built sites available, and check out Muffin Builder’s newest features here.

The post Be: The Fastest and Easiest Way to Build Your Portfolio Site appeared first on Codrops.

Posted on

WordCamp Europe 2021 Gutenberg Demo: “The Block Editor Gets Ready to Become a Site Builder”

Category Image 091

Matt Mullenweg and Matías Ventura joined WordCamp Europe to chat about what’s happening with the Gutenberg project and celebrate the progress contributors have made over the past four years.

“For me, 2020 was the year that really felt like people started to see the vision of Gutenberg from four or five years ago, when it was very abstract and they saw it as kind of like the old WYSIWYG editor with some extra lines on it or something,” Mullenweg said. “The first 17 or 18 years of WordPress democratized people putting text into a box. Now we’re democratizing design, allowing people to control the boxes.”

Ventura commented on how transformative patterns have been for making page design approachable for users.

“Perhaps it was a smaller part of the roadmap initially but it’s becoming a centerpiece – especially because it allows…world class designers to provide a starting point for users and users get to learn design as they are interacting with themes,” Ventura said. He began his WordPress developer journey by “tinkering with themes,” as many others did, and believes that blocks can unlock a similar experimental learning experience.

“I think we are getting into a chapter where people will be able to tinker with things that were sort of hidden for you in WordPress – more advanced things like queries and loops, that we can now expose through blocks,” Ventura said. “They can be stepping stones for people to learn how to work with WordPress.”

Mullenweg commented on how things that previously would have required a fairly experienced WordPress developer to do, like creating a home page with a column that shows five recent posts from a particular category, and another column that shows featured posts in a different category, you can now do with just a few clicks.

“It’s no code – it’s like expanding the layers of accessibility of what people are able to do with WordPress,” Mullenweg said. “That, to me, is very core to our mission.”

Mullenweg and Ventura debuted a new “Gutenberg highlight” video that covers current and new features coming to the block editor, as it “gets ready to become a site builder.” These kinds of marketing videos are so valuable because users don’t always know what is possible, even if the tools are approachable for anyone to use.

The video demonstrates new design features for different blocks, including the transform live previews, dragging media into container blocks, inline cropping without leaving the editor canvas, the template editor, duotone image filters, more customization options for navigation, improvements to the list view browser, and the new global styles design that is coming soon.

Check out the video below and you can also watch Mullenweg and Ventura’s conversation that was recorded during the event.

Posted on

WordPress 5.7 Introduces Drag-and-Drop for Blocks and Patterns, Streamlined Admin Color Palette, and One-Click Migration from HTTP to HTTPS

Category Image 091

WordPress 5.7 “Esperanza” was released today, named for Esperanza Spalding, an American jazz bassist who became an accomplished singer, songwriter, and composer in her early 20’s.

Versions 9.3 – 9.9 of the Gutenberg plugin are rolled into this update, bringing hundreds of enhancements and bug fixes that make working in the block editor more efficient and enjoyable.

One of the highlights is the new drag-and-drop capabilities in the block inserter. Users can now drag blocks and block patterns directly into the post content area, making page building even faster.

Many of the user-facing editor enhancements in this release give the user more control when using existing blocks:

  • Full height alignment: Blocks such as the Cover block now can have an option to expand to fill the entire viewport.
  • Buttons block: The Buttons block now supports vertical alignments, and you can set the width of a button to a preset percentage.
  • Social Icons block: You can now change the size of the icons in the Social Icons block.
  • Font size in more places: You can now change the font size in the List and Code blocks

This release also improves the UI for block variations to include the icon and description for the variation in the block inspector and a new dropdown to allow for switching between variations. Reusable blocks have been updated to be saved at the same time the post is saved. Quite a few more improvements have been added in version 10.1 of the Gutenberg plugin, which is not yet included core. If you use Reusable blocks frequently, you may want to install the plugin to take advantage of the expanded UI.

In addition to all the editor improvements, WordPress 5.7 introduces a streamlined color palette for the admin. It standardizes the palette to seven core colors and a range of 56 shades. One of the benefits is that all the shades meet the requirements for WCAG 2.0 AA recommended contrast ratio against white or black.

New Admin Color Scheme

Theme and plugin developers who want to better match the admin color scheme can easily reference the new standardized shades to make their products more at home in the WordPress admin. WordPress’ existing core classes have also been updated with the new color palette so plugin authors can use them to work within the new standardized palette.

One of the most exciting technical enhancements in 5.7 is a new one-click migration from HTTP to HTTPS. WordPress can now detect if the user’s hosting environment has support for HTTPS and update with the click of a button, handling mixed content rewrites where possible. This feature is available on the Site Health recommendations screen.

WordPress 5.7 continues the ongoing cleanup after the update to jQuery 3.5.1, which will eventually result in the removal of jQuery Migrate plugin. It fixes numerous jQuery deprecations in external libraries, cleaning up many JQMIGRATE warnings.

Developers may also be interested in the new filter-based Robots API included in 5.7. It enables the central management of the content of the robots meta tag injected into the page, and includes a setting to toggle whether search engines are allowed to display large media from the site. By default, a max-image-preview:large robots directive which will be injected into the robots meta tag based on the new setting.

Version 5.7 also includes native support for lazy loading iframes, a follow-up to WordPress’ support for lazy loading for images that came in 5.5. This should improve loading for pages that include embeds and other types of iframes.

Check out the WordPress 5.7 field guide for technical details on everything new in this release. This update is the result of work from 481 volunteer contributors who collaborated on 250 tickets on Trac and more than 950 pull requests on GitHub.