Posted on

A Throwback to the Past: Retro Winamp Block

In mid-November, I happened upon a block plugin called Retro Winamp Block. As many of our readers know, I am always on the lookout for those WordPress extensions that remind me of the era when I first started using computers and exploring the web.

The plugin seemed to fit the bill. It had “retro” in the title, so it had already piqued my interest without even installing it. It had been years since I used Winamp. The media player was first released in 1997 for Microsoft Windows and grew in popularity through the early 2000s. By the time I arrived on the scene, it had already built a massive user base. It was the best option available for creating music playlists at the time, and it was skinnable.

Winamp was popular back when the world wide web felt more alive. I still look upon it as the golden era of user creation and the blossoming of fandom. Where else could you find a collection of Brad Pitt skins for your computer’s media player? Or, One Piece? Even Super Mario?

I did not hesitate to install this throwback plugin. Unfortunately, it errored out whenever I attempted to add an audio file. So, I set it aside with a note to look at it down the road.

A few weeks later, I read WordPress lead developer Helen Hou-Sandí’s goodbye announcement to 10up, the company she had been with for a decade. With the help of Mel Choyce, co-workers Jeff Paul, Darin Kotter, and Tung Du created the Retro Winamp Block in her honor.

I checked back in on the plugin. There was an update, and the change log noted a fix for the error I had encountered. In minutes, I was able to once again experience the glory of one of the first media players I had used on my old Gateway laptop.

Retro Winamp Block, an old-style media player, in the WordPress editor.
Retro Winamp Block in the editor.

Retro Winamp Block has does not have many options. Actually, it only has one customization that users will be interested in: the player skin. They can enter any URL for it, and over 83,000 are available via the Winamp Skin Museum.

Screenshot of the Winamp Skin Museum, showing dozens of fan-skinned media players.
Winamp Skin Museum.

The museum is hosted by Webamp, a project that implements an HTML5 and JavaScript of the old Winamp 2.9. 10up used it for its own Retro Winamp Block plugin.

Since installing the latest version 1.0.1 of the plugin, I have only hit one issue. The live preview in the editor is partially broken. The player floats in the same spot instead of scrolling with the page..

If I had one wish for this plugin, it would be to see the addition of Milkdrop, the popular Winamp visualizer add-on.

Webamp version of Winamp media player with the Milkdrop visualizer add-on next to it.
Winamp with Milkdrop add-on.

Mostly, I simply enjoyed this jaunt down memory lane. I even went as far as installing the latest Winamp on my computer. The original player still has a thriving community if its forums are any indication. The UI is practically unusable on my laptop, so I dropped it after listening to an old Ashlee Simpson album.

While I enjoyed the nostalgia of the old player, I want to see modern-day implementations of these types of features for WordPress. Instead of a throwback to Winamp, where is the skinnable audio block?

I put together a quick pattern to test out some ideas (code on Gist):

Audio block pattern with a cover background of the night sky. Social links are below the audio player.
Cover + Audio + Social block pattern.

The background is by Jeff Golenski from WordPress Photos (this directory is already coming in handy). A few adjustments later, I had a custom-styled audio layout. However, I could not modify the audio player itself. It is just the browser default. There is no equalizer, track info, or visual flair. Just a clean, boring player that longs for someone to sprinkle a little pizazz on it.

Posted on

10up Releases the Publisher Media Kit WordPress Plugin

Earlier today, version 1.0 of 10up’s Publisher Media Kit went live in the WordPress plugin directory. It is a preconfigured set of blocks and patterns for jump-starting a media kit page for small and medium-sized publications.

When I first noticed the plugin, my mind immediately jumped to press kits and branding pages for businesses. Not enough companies within the WordPress space have such pages, and it can often be hard for journalists and other writers to find information. While this plugin is geared toward publications, small businesses can still get some use out of the plugin with a few changes.

Given that WP Tavern just launched its new design yesterday, this might be an opportunity for us to lead the way. The plugin does give me a few ideas on what we could do with a similar page here on the site.

Publisher Media Kit has been tested with Twenty Twenty-One, Newspack, and several Newspack child themes. I did run it through most of those to check for compatibility, and the plugin worked admirably. However, I primarily tested it with Twenty Twenty-Two, the upcoming default WordPress theme. Aside from a few layout alignment quirks, it worked well.

The plugin automatically creates a new “Media Kit” draft page on the website once it is activated. The content is a set of pre-defined sections built from eight patterns and an accompanying Tabs block.

Media kit page that opens with a hero/intro section, followed by audience profiles and statistics.
Partial screenshot of Media Kit page.

This allows users to quickly fill in their own content and make customizations. Once done, it is just a matter of hitting the publish button.

However, end-users can take things into their own hands by using the various patterns on any post or page of their site. The cover, stats, and questions/contact patterns work well as general-use patterns.

Three column grid of block patterns for the Publisher Media Kit plugin in the WordPress pattern explorer.
The plugin’s custom block patterns.

Note: I deleted a couple of the patterns from the screenshot above. For some reason, they were rendered invalid in the patterns explorer but worked fine when inserted into the content canvas.

I would love to see a standalone version of the Tabs block included with the plugin. It is showcased in the rates and digital ad specs patterns, but it is so easy to create new tabbed content that I cannot help but want to use it with other projects.

In the WordPress block editor, the Publisher Media Kit plugin's tabs block shows an ad rate table.
Tabs block in the editor.

It could become a popular tabs solution with a few design options like colors, borders, and typography. It is minimal at the moment, but its user experience would make for an ideal foundation for a single-block plugin.

One of my favorite things about the block system is that it makes plugins like Publisher Media Kit feasible. In the past, it was virtually impossible to ship a content-focused plugin and expect it to work with most themes, at least not without a lot of custom design work. That meant that solid solutions would often stay in-house with agencies with no ideal way of shipping them.

The standardization of blocks has bridged much of that gap. As the system continues evolving, especially with more design options, I expect to see similar plugins in the future.

Posted on

Frontity Inks Partnership with 10up

photo credit: Matt Moloney

Frontity has launched a partnership program to support the maintenance of its open source framework for building React-based WordPress sites. 10up, a large agency that provides headless solutions to enterprise customers, is the first partner to join in support of the project.

“Since we launched Frontity Framework last year, dozens of WordPress publishers have asked our team about consulting services and for help on their migration to Frontity,” Frontity communications director Reyes Martínez said. “It was great to see an increasing interest in using Frontity at an enterprise-level but, unfortunately, we didn’t have an efficient way to help them all and fulfill the custom requirements these projects usually need.”

This partnership allows Frontity to funnel requests for consulting to 10up and other future agency partners. Reyes said the partnership does not have a monetary aspect but rather 10up is supporting the project by maintaining and extending the framework through contributions.

Prior to this arrangement, the agency had already contributed to the core framework, most notably by developing the Link Component and Auto-Prefetching features. 10up also created the ElasticPress package, which improves search for sites using Elasticsearch.

“Frontity provides an easy to use package management interface that enables us to quickly extend the platform — similar to how plugins work in the WordPress ecosystem,” 10up VP of Engineering Taylor Lovett said, explaining why the company formalized a partnership with the framework’s creators. “It includes features that typically require custom engineering, such as Google Analytics integration, routing, and integration with plugins (like SEO tools).”

Earlier this year Frontity raised €1M in funding in a round led by K Fund, with Automattic covering 22%. This funding keeps the maintainers free to focus on the open source project. Frontity recently ranked #9 on Runa Capital’s Open Source Startup (ROSS) Index, which ranked the top 20 startups by Github star growth for Q3 2020.

The project’s partnership program is an interesting and somewhat uncommon approach to sustaining the framework’s growth. It redirects a steady stream of leads for custom work to partners, helping potential users find expertise, while ensuring the project is well maintained. As the WordPress ecosystem demonstrates increasing interest in building React-powered websites, Frontity is turning the growing demand for custom work into an opportunity to bolster the open source project and ensure the framework’s future.

“Some companies are aware of the advantages of a decoupled React front-end and contact us because they are interesting in using Frontity, but don’t have the team or the internal resources to build or migrate a project from scratch,” Reyes said. “Others that have the resources and already tried (or know) Frontity, contact us because they still want a freelancer or agency to help with the development, design or maintenance of the project.”

Frontity is in conversation with some agencies from the WordPress VIP Agency Partner Program and other hosting companies but could not share more details at this time. The basic qualifications for partners include previous experience with enterprise customers in the WordPress space, expertise with headless WordPress and React frontends, and willingness to actively contribute to the Frontity framework.

Posted on

10up Releases Autoshare for Twitter WordPress Plugin

On Tuesday, 10up released its Autoshare for Twitter plugin. The plugin is designed to automatically tweet blog posts as they are published. By default, it will send the post title, featured image, and link to Twitter. Users can also add a custom message. The plugin is available in the WordPress plugin directory.

If you threw a rock into a crowd of WordPress plugins, you would likely smack a social-networking extension. The WordPress plugin market is crowded with similar plugins, so it would make sense if this one flew under the radar. Plus, powerhouse plugins like Jetpack provide similar functionality, such as the Jetpack Publicize feature. Yet, with the prevalence of similar plugins, Autoshare for Twitter is worth checking out.

Many similar plugins work with multiple social networks, but 10up’s plugin is designed specifically for sharing via Twitter. For users who only need a solution for that specific social network, it is a solid solution for version 1.0.

10up originally built the plugin to provide the company’s clients more control and customization than they found in existing solutions. “Recognizing its widespread potential, we decided to follow our own best practices for managing open-source software by releasing it as a free plugin on the official WordPress plugin repository,” wrote Jeff Paul, Associate Director of Open Source Initiatives at 10up.

The plugin works with both the block and classic editors. When in use with the block editor, it is added as part of the pre-publish check system as shown in the following screenshot:

Screenshot of the Autoshare for Twitter pre-publish check.
Pre-publish check for tweeting a post.

The custom message box tracks the number of characters so that users do not go over Twitter’s character count. The plugin also displays a message in the Status & Visibility panel to let users know if a post was shared on Twitter.

Overall, the plugin does its job well (sorry to folks who were bombarded with some test tweets earlier). It would be nice to see similar one-off solutions that are specific to other social networks. I often find myself in need of such plugins without dealing with a full array of social networking options.

The plugin is also available on GitHub for others to contribute. Currently, there are several open issues that would improve how the plugin works.

Setup Is Not User-Friendly

Screenshot of the settings screen for the Autoshare for Twitter plugin.
Settings page for Twitter credentials.

The biggest downside to the plugin is there are no links, no admin help tab, and no instructions on how to set up the Twitter Credentials on the plugin’s setting screen. The page simply has some text fields for things like an API Key, API Secret, and so on. These are not user-friendly terms, and will likely be confusing for many. Not to mention, similar plugins can connect users at the click of a button. For a plugin that does nearly everything else right, this is a missing piece of what would be a near-perfect release.

The plugin is ideal for power users or developers who want to set up Twitter sharing for a client. In the current version of the plugin, users need to set up a Twitter Developer account and create a Twitter App. This generates the API keys and necessary tokens for using the plugin.

The plugin does have an open ticket on GitHub for a better onboarding process, which could solve this issue. Therefore, the team is aware of and actively working on making this smoother in a future version.

Posted on

Inserting Special Characters Into the Block Editor

For users of the Classic WordPress editor who often needed to insert special characters into their posts, life was once simple. Click the “Ω” button in the editor to open a modal with a list of characters not found on a standard keyboard. The user then only needed to click on the character they wanted to insert and go about the business of writing their post.

For users who made the move to the block editor and were accustomed to inserting special characters at the click of a button, life became more complicated. The answer to their woes was to first insert a Classic block and use its special character inserter, which kind of defeats the purpose of using the new and shiny block editor. Another option was to use the special character app/program packaged with their computer, which assumes all users know the keyboard shortcut for it or how to run the program.

By many accounts, this would be considered a standard feature for any text editor. When WordPress is at a stage of trying to sell a new editor, it should be prepared to include features that users of the old editor consider standard. The lack of a special-character inserter could have been written off as an oversight if people were not asking for it.

People were asking for it.

Fortunately, the requests caught the attention of the 10up team. In September this year, they released the first version of their Insert Special Characters plugin. It has since gone through a couple of updates and works well across browsers.

The plugin is simple and does its job much better than the previous Classic editor inserter. Instead of just handling the basics, the team went above and beyond what was necessary to launch the plugin.

The plugin adds a new sub-menu item to the text toolbar titled “Ω Special Characters.”

Screenshot of the special characters rich text menu item.
“Special Characters” rich text menu item.

After clicking the link to insert a special character, a modal box appears on the screen. The box provides hundreds of special characters to choose from. It sorts them under Miscellaneous, Math, Latin, and Arrow categories while providing a search filter to narrow down the list. The box can also be reached by typing ctrl/cmd + o on the keyboard.

Screenshot of the special characters insertion modal.
Special characters insertion modal box.

Like many modals, the box pops up in a weird position from time to time, depending on where the insertion point is on the screen. Outside of that, I found no major problems with the plugin.

The plugin also provides a hook for other developers to manipulate the tabs and available characters in the modal.

This does beg the question of whether the feature should be implemented in the core block editor now. If the core team puts it in at this point, one would hope they would make it competitive with the plugin. Anything less would be a letdown.

Posted on

10up Releases GitHub Actions for Simplifying WordPress Plugin Deployment

10up announced the public availability of two GitHub Actions geared toward WordPress plugin developers yesterday. The first Action allows developers to deploy plugin updates directly to the WordPress.org plugin directory by tagging a release on GitHub. The second Action handles readme file and asset updates.

On November 14, GitHub announced the public launch of their GitHub Actions feature. GitHub Actions are a way for developers to automate workflows from their Git repositories. Actions can also be shared with others, reused across projects, and forked like any other public repository.

Currently, there are over 1,300 GitHub Actions with more being added every day. At least nine of the current Actions are related to WordPress, including an Action to deploy WordPress by rtCamp, but there will certainly be more to come in the future.

With GitHub Actions out of beta, it opens the door for companies like 10up to share their custom workflows and for others to build upon them. It will also be interesting to see what Actions other developers within the WordPress ecosystem release.

The 10up team initially launched their custom Actions for WordPress in March 2019, which was during GitHub Actions beta period. “Everybody has been very positive,” said Helen Hou-Sandí, director of open source initiatives at 10up and WordPress lead developer. “We’ve had a number of people report bugs, request enhancements, and contribute code and documentation. That’s been a really great measure of adoption and attention for me — having people give thoughtful critical feedback and help us improve this tool for everybody.”

Hou-Sandí is interested in seeing other ideas for adding workflows or potentially new Actions from the community. “An example of something we’ve just started doing without writing a whole new Action is generating hook documentation and deploying that to GitHub Pages, which eliminates the need to generate locally, commit manually, and decide on where to host things,” she said.

“Development was actually smoother than I anticipated,” said Hou-Sandí of creating and testing the team’s GitHub Actions. “Maybe because I spent a fairly long time planning and obsessing over potential issues and chose to use Bash.” For testing, she was able to use an inactive plugin repo on WordPress.org. “I’m sure I could have come up with a method to test completely locally, but being able to use actual environments without repercussions was helpful.”

The 10up team has already been deploying plugin updates with the Actions. Hou-Sandí said that she does not think about this in terms of saving time, even though the team is already tagging releases via GitHub.

“What it’s really done for us is, along with well-documented release processes, made it so that anybody can jump in and get a plugin updated or released without worrying about modifying commit permissions or their personal knowledge of SVN,” she said. “This makes it much easier to get releases out especially when it’s an urgent bugfix.”

Deploying and Updating WordPress Plugins

Both of the GitHub Actions created by 10up help ease the pain of deploying plugin updates to the official WordPress plugin directory. They are designed to streamline plugin release management and simplify the process of getting code out to end-users.

WordPress plugin authors must use Subversion (SVN) to commit and tag plugin releases in the directory. Often, this is an issue because Git is the most-used version control system. Some developers have no experience with SVN, and the number of developers unfamiliar with it will likely only grow as Git continues to gain popularity. Even with those who do understand SVN, switching between version control systems can hinder workflows, particularly with larger teams.

With so many WordPress plugin developers using Git, it makes sense to use tools that are a part of their daily workflow rather than jumping into a system only used during releases. That is where both of these GitHub Actions developed by 10up can help.

Adding Actions to a repository is a fairly straightforward process. All repositories have a new “Actions” tab. Developers can create new workflows directly from the Actions page for their repository. When adding a new workflow, it is simply a matter of copying and pasting a particular Action’s code snippet.

Screenshot of adding a GitHub Action workflow.
Adding a custom GitHub workflow.

The WordPress Plugin Deploy Action is for deploying plugin updates directly to the WordPress plugin directory. When developers tag a release on GitHub, it will automatically commit the update to the WordPress.org SVN repository. The Action respects .distignore and .gitattributes for ignoring files that should not be distributed to users. It also allows developers to add their plugin assets to a .wordpress-org folder, which will be committed to the top-level assets directory.

WordPress.org Plugin Readme/Assets Update is a separate Action that allows developers to commit changes to their plugin’s readme or assets. It is useful when plugin authors need to update their plugin’s Tested up to version number or update screenshots, banners, and icons. This Action watches for changes on a specified branch.

Both Actions require developers to set up secret values for their WordPress SVN username and password. Secrets are encrypted data that can be set via a repository’s “Settings > Secrets” screen. The SVN username and password are required so that GitHub can deploy commits to WordPress.org.

Posted on

10up Releases New Plugin That Shows How to Extend Gutenberg’s Document Panel Using SlotFill and Filters

If you’ve been looking for a way to add slots and controls to the Document panel in WordPress’ content editor, check out a new plugin released by 10up called Gutenberg SlotFill and Filter Demos.

SlotFill and Filters is a new take on the classic filters, actions, and hooks system in WordPress. Slot and Fill are React components that enable developers to inject items into predefined spaces in the new editor.

“SlotFill is a pattern for component extensibility, where a single Slot may be occupied by an indeterminate number of Fills elsewhere in the application,” Ryan Welcher said.

An Example of SlotFill in Action

In the demo screenshot above, 10up was able to stick to the Classic UI conventions in the mobile app while displaying the same information in the Document panel of the new editor.

SlotFill initially started as a GitHub repo where Welcher collected his findings. The repo eventually turned into a library of examples and explanations for SlotFill and JavaScript based filters.

In January, Welcher submitted a pull request to the Gutenberg repo asking for SlotFill to be added to the document sidebar. His request received positive feedback and not only has SlotFill’s documentation been added to the WordPress Core Gutenberg Handbook, but the functionality is available in Gutenberg 6.1 and will be available in WordPress 5.3.

To learn more about SlotFill, check out Welcher’s release post or the Gutenberg SlotFill and Filter Demos plugin. Welcher is also doing a session at the JavaScript For WordPress Conference, on July 11-13, 2019, where he’ll showcase basic and real-world examples of SlotFill in use.

Posted on

In Case You Missed It – Issue 27

In Case You Missed It Featured Image
photo credit: Night Moves – (license)

There’s a lot of great WordPress content published in the community but not all of it is featured on the Tavern. This post is an assortment of items related to WordPress that caught my eye but didn’t make it into a full post.

Carol Gann Awarded the 2019 Kim Parsell Memorial Scholarship

Carol Gann, who is a Meetup coordinator in the WordPress Orlando Community, has been awarded the Kim Parsell Memorial Scholarship. The scholarship is named after Kim Parsell who passed away in 2015 but her impact on the WordPress community is still felt today.

“My proudest contribution to the WordPress open source project is training small business owners and bloggers to be comfortable and conversant with their own WordPress websites. WordPress empowers people. Many end users of WordPress are not technically minded. As a WordPress Meetup co-organizer, I contribute to the coffee help desk, assisting others in finding solutions to their WordPress problems. I also host another help desk opportunity, ‘Coffee With Carol,’ to empower WordPress users,” Gann said.

I can tell from the quote above that Kim and Carol would get along well as Kim was also the type of person who would do what she could to help others.

GravityView Diversity Grant to Attend PressNomics 6

The folks over at GravityView are offering a grant to recognize the challenges certain groups of people face succeeding in technology fields and to promote inclusivity and diversity. The grant includes a ticket to PressNomics 6, a flight to Tuscon, AZ, lodging, transportation via a Lyft gift card, and a one-on-one business consultation with Zak Katz, Co-founder of GravityView. The deadline to apply is 11:59 PM MDT on June 30, 2019.

10up OpenSource Project Scaffolding Suite

10up has released a project scaffolding suite that includes a WordPress starter theme, starter plugin, and NPM package. The purpose of the suite is to streamline repetitive tasks, encourage community contributions, and provide a starting point that includes 10up’s engineering best practices.

End to End Tests Added to Core

Introducing the WordPress e2e tests

WP Tavern Turns 10 Years Old

I was looking back through the Tavern archives and realized that this past January, WP Tavern turned 10 years old. It’s been quite a journey and it’s not over yet. Check out the first post I published on the Tavern announcing its opening.

Matt Mullenweg Announces That Automattic Is Sponsoring Jill Binder’s Work

Diversifying WordPress

John James Jacoby Releases A Plugin That Cryptographically Signs Posts

John James Jacoby has released a small plugin on GitHub that cryptographically signs posts. The plugin splits the content of posts in words and then stenographically inserts zero-width characters between them. These characters then form a unique, invisible pattern that can be used to detect plagiarised content. This plugin sounds like it would pair well with WordProof.

What does DXP Mean?

I asked on Twitter what does DXP or Digital Xperience platform mean? It comes across as fancy marketing lingo. Here are a few of the responses I received.

Matt Mederios – ‘DXP’ or in other words, how we want our customers to experience WordPress in our controlled ecosystem. All your solutions in one place, possibly to the point you don’t recognize it’s WordPress.

Stephen Cronin – DXP is an enterprise thing and has been around for ages in various guises. WordPress is not listed by Gartner, but Drupal and SharePoint are, along with other enterprise CMS’s. If people want to create DXPs out of WordPress, more power to them.

Karim Marucchi – Forget the buzz, large sites are moving past ‘just’ content, no one product (not #AEM not #Sitecore) will ever be perfect for all the existing & new features that are popping up ‘monthly’, so with #OpenSourse we all can make the most open easy/most compatible /cheap framework that will help the #enterprise manage/customize/blend all the ways you need to interact with your clients. And yes, the good Hosts, are staying out of trying to be all things.

Thanks to these three, the meaning of DXP is a bit more clear.

WordCamp EU Organizing Team Issues Apology

There were some things that took place during the WordCamp EU afterparty that didn’t sit well with some people. The WordCamp EU organizing team explained what happened and issued an apology for the mistakes that were made.

Torque Interviews Marcel Bootsman

Doc Pop of Torque caught up with Marcel Bootsman to talk about his walking journey to Berlin. Ironically, the interview occurs as they’re walking around.

That’s it for issue twenty-seven. If you recently discovered a cool resource or post related to WordPress, please share it with us in the comments.