The Cello Expressions Sheet Music Library has opened with a table view listing all sheet music in the library since its beginnings in 2012. As the library has grown past 100 pieces (currently around 120 pieces), this format has gradually become less effective. New pieces jump to the top of the list as older pieces become lost in a sea of information.
When the sheet music library was reconstructed in early 2015, the new data structure opened up new possibilities. But the tools to unlock more unique layouts were rough at best. I studied options to curate dynamic content in other contexts. Ultimately, I decided to wait for the right balance of core WordPress tools and custom plugin enhancements, to keep the library functionality independent of a specific WordPress theme. In the meantime, I focused on adding music to the library.
Tooling Development
WordPress released its block editor in late 2018. It was a first step toward a vision that could support dynamic content blocks natively. But it was far from complete or polished. Missing tight integration with core WordPress features like audio playlists, it was immediately clear that it would be years before the Sheet Music Library plugin could support the block editor, let alone leverage its potential power.
While the block editor still lacks fundamental elements of backwards compatibility (including native audio playlists), improvements over the past five years have finally made it more viable. On the single-piece (WordPress custom post type object) level, the block editor offers advanced layout and content types that bring depth to piece descriptions. This flexibility comes at the cost of complexity. However, a single piece can be published through the block editor with an equivalent effort to the old experience. Most of the plugin’s custom interface for assigning piece metadata remains the same.
WordPress’ larger innovation comes through the expansion of blocks outside of the content editor. New tools can build page templates and entire sites through blocks in an interactive, editable interface. In reality, the vast majority of sites remain on their current “classic” themes and have no reason to suffer through the clunky world of block themes. The building blocks behind “block themes” do revitalize the notion of curated dynamic content pages. Paired with the deep content structure that I already had, a new home page approach was within reach.
Sheet Music Library Content Structure
The Sheet Music Library WordPress Plugin relies on native WordPress post type and taxonomy tools at its core. With a big content library like the Cello Expressions Sheet Music Library, the custom taxonomies are critical for grouping content. Those taxonomies enable deep cross-navigation through subsets of pieces. For example, pieces written for Cello Trio display their orchestration with a link back to all pieces for Cello Trio in the library.
These taxonomies can be used beyond the single post and cross-navigation layers to showcase several categories of music on the home page. The layers of organization embedded into the site are brought to life through a hierarchical display. The flat table/list view of all pieces can stay for reverse-chronological reference. But it is no longer the best way to initially present the variety and depth of content in the library.
Remaining Challenges
WordPress blocks have improved enough to support block-based sheet music and a new home page design. The process is far from smooth. In fact, two of the major pain points are represented within the three oldest issues on the block editor’s code repository:
- #805 – Add Block: Playlist would finally bring playlists into the block editor. Until then, we have a block pattern with an empty placeholder that inserts a playlist container nested into a “classic editor” block.
- #1651 – Add Block: Curated Dynamic Content would allow query loop blocks to include specific (curated, or “featured”) posts. In the meantime, a “Collections” taxonomy in the plugin allows filtering by term.
Beyond those specific issues, block themes remain barely usable for most people. They are no longer “beta” in WordPress 6.2, but can’t compete with the integrated design quality of traditional themes (yet). Twenty Fifteen features generally good layout and typography, so I will continue to use it for my Sheet Music Library indefinitely. The homepage gets some extra CSS in the customizer to remove the sidebar.
Plugin version 2.0 includes all of the building blocks required to create completely custom music library designs through the block editor. I anticipate rebuilding the rest of the library to use blocks eventually. But likely not for another eight years or so.
The New Design
The final execution of the new design almost seems like an afterthought following the technical solutions that enabled it. Realistically, though, this is not the final design but the beginning of a new framework through which the design will evolve. The content is dynamic and will move around as I publish new arrangements. Its display can also be restructured at will, whenever it makes sense.
Initially, I organized the new home page into a series of “cards” similar to the current Cello Expressions home page. Each card features about five pieces, displaying the title, a simplified audio player, the composer, and the orchestration. The cards add the hierarchy that was missing before, hopefully drawing visitors into parts of the library that they previously glossed over. Taxonomy link lists that otherwise live in the sidebar are interspersed in curated list and button groupings. There are even a few drawings bringing the Cello Expressions logo design language into the library.
The particular card selections are optimized to cover as much of the library as possible with minimal duplication. The most dynamic part of the page is the “featured” section, front and center, which randomly selects five of around a dozen featured pieces on each page load. Overall, the home page displays up to 60 pieces, or half of the current library. The specific count and layout can easily evolve as the library continues to grow.