10Up Introduces A New Front-End WordPress Component Library
A typical WordPress theme consists of the same basic components put together in novel ways. Almost every WordPress site has a logo, navigation components, blog posts, blog indexes, and so on. Many theme developers create their own spins on each of these components or adapt existing front-end frameworks to work with WordPress.
Rebuilding or repurposing is often not the best approach though. Building common components in-house duplicates effort that could better be spent building truly original custom functionality and providing added value to clients.
The WordPress Component Library, created by WordPress development agency 10up, is a collection of front-end components designed to be used in WordPress themes. Each component in the library provides commonly needed functionality that developers and designers can integrate into their own projects.
The Library is divided into UI, Content, and Navigation components. A standout member of the Navigation collection is an elegant lightweight responsive navigation menu implemented almost entirely in CSS (SCSS) and a small JavaScript component. After experiencing any number of glitchy “responsive” menu bars, I’m happy to see the release of an off-the-shelf component that just works.
Each component in the library includes minimal styling, so developers can build unique themes to suit specific projects. A key benefit of using a components library of this sort is that future maintenance is made substantially easier: developers can get up to speed on a site’s code base more quickly if it’s built from well-understood parts.
One of the outstanding features of the WordPress Component Library is that it’s built from the ground up to conform to the Web Content Accessibility Guidelines 2.0. Each component is designed to provide an accessible experience to users and work well with keyboard navigation and assistive devices.
Everyone wants to provide accessible websites, but complying with accessibility best practices can be time consuming. Many developers don’t have a well-developed understanding of accessibility issues. And when under time or budgetary constraints, accessibility issues fall by the wayside.
The WordPress Component Library gives theme developers a quick and easy way to build accessible WordPress-based websites using of-the-shelf components.
Much of the buzz around WordPress is focused on the new REST APIs, which give developers the ability to build WordPress themes and front-end integrations in any number of languages, but particularly in JavaScript. Any increase to the flexibility of WordPress is welcome. There are millions of developers who know JavaScript and don’t know — or want to learn — PHP. The REST APIs will invigorate an ecosystem that has become somewhat stuck in its ways.
But it shouldn’t be forgotten that WordPress is — at heart — a PHP application and WordPress professionals all over the world are intimately familiar with PHP and WordPress. Tools like the WordPress Component Library may not generate headlines, but they do provide useful tools that have the potential to improve the workflows of WordPress developers and help them build better sites.
