The Test Team helps manage testing and triage across the WordPress ecosystem. They focus on user testing of the editing experience and WordPress dashboard, replicating and documenting bug reports, and supporting a culture of review and triage across the project.
Please drop by any time in SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. with questions or to help out.
This post is a summary of the All Things Media exploration for the FSE Outreach Program. Coming out of a pause from 5.9, it was so encouraging and wonderful to see the wider community help out with this exploration in the following ways:
@aurooba for running a live stream of the exploration and sharing feedback.
Shout out to the following folks as first-time contributors to a call for testing: @patrick-b, @ndiego, @beckej, @lidialab. Get excited – you now have a testing contributor badge on your WordPress profile!
High-level summary
While normally, there are some overall sentiments to share, this exploration was so wide ranging it’s hard to pull out a few quotes to ground the following feedback in. Instead, here are some patterns seen across the varying areas below that help bring together the feedback more cohesively:
Emphases on making attribution easy while also allowing for the ability to filterFilterFilters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. out images that require it, as few seem keen to use images that would.
Inconsistency with tooling, whether using duotone to select a custom color or trying to crop an image in a gallery blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience..
Desire for more expansive options, including featured images and adding YouTube videos as a background.
Simplifying layout controls and increase in patterns to make it easier to place your content exactly as you’d like in a HeaderHeaderThe header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. or as a full width visual.
In each section, the items are divided when appropriate into previously reported vs new categories in order to better understand what was underscored as part of this exploration compared to what was found.
Confirmed bugs
Listed below are confirmed bugs that break expected functionality or the experience of different features.
The default dimension is highlighted as 100% but in-fact if clicking on 100% again usually modifies the image size on the editor. It is a bit confusing.
Throughout each of these feature requests, there’s a clear desire for better and more consistent tooling, from background support in Group blocks to having a focal point picker for a featured imageFeatured imageA featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.. It’s obvious there’s a dance to get right in adding more features while also creating a more consistent and intuitive experience in handling media in the Site Editor.
Where one can define specifics on upload. Is it a bmp or other none web format have it be converted to a jpg. Have larger images downscaled to a kind of max image size. Etc.
Having a way to include Featured images in a variety of blocks, such as Cover, would be amazing. This is in scope for 6.0, but it’s the biggest thing I would like to see regarding media and would enable a lot of interesting patterns.
However, I would like to see a range of filters available to users. If this is too much for coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress., perhaps a standard filter-registration system for developers might be in order.
As seen in other calls for testing, the experience of easily manipulating a Header proved difficult, whether trying to add a background image, trying to get alignments exactly right with your Site Logo, or in using various aspects of duotone. Tied to this, confusion continues around Layout controls with simple tasks like making a Cover block full width proving to be frustrating and further underscoring the need to simplify these concepts.
Simplify layout controls with multiple examples around how the complexity of Layout controls causing confusing experiences with alignment options feeling like they are missing or not working.
Implement “Site Brand” patterns as a way to help resolve issues with layout and row block configuration since it can be tricky to get things to line up as you want.
I went down a weird rabbit hole where I couldn’t figure out why we had the header block and the header template parts. I mean, what if I wanted to have two different headers with wildly different information in them? Whenever I changed the main header block (anything living inside it), it changed it in all the header template parts, and I found that very confusing and frustrating. I ended up removing the header block inside the header templates and keeping things just in groups. That made way more sense to me.
I had trouble making my cover image full width. It’s still a bit odd to me that some controls only show up in certain situations, and in this case, because my cover was part of a group, I couldn’t make the cover full width. I’ve been teaching people to use that list view to try to get around that.
This is tricky and I bet is the hardest step. “Header” is not clearly defined. I bet most folks would go into the Site Editor and try to add a background image to the Header template part block. Also most block-themes have a Group block wrapping the inner content of the Header part, and Group blocks also do not support image backgrounds (yet). So you have to modify the content in your Header by placing it inside of a Cover block and then add a background image to the Cover block. This takes a LOT of in depth knowledge of the Site Editor to accomplish.
Say I’m editing the padding dimension, then goes to modify the duotone, the entire right sidebarSidebarA sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. goes to the top(back to media settings) and opens all the closed settings, which affects the user workflow. This also happens when changing the ‘alignment’ to ‘none’ or ‘full width’.
We chatted about this on the hallway hangout for this exploration (starting at 16:00 and again around 26:58) with thoughts on how to learn from tools like Pressbooks, how to make attributions more magical by reusing theme styles when adding them, and how to encourage best practices for folks. In general, folks were not keen to use images that required attribution as one can see in the quotes below.
This question evoked a strong negative reaction for me. I don’t know it means that attribution info wouldn’t be removable? Would it be watermarked on the image? Are we talking about metadata. Either way, if you can’t remove attribution from an image visually, I would never use such an image or images from such a resource.
As long as we gave end users a few options, I really like the idea of making it easy for others to utilize the open-licensed images, and help guide them to do best practices.
It’d be great to have a way from the media library or block settings to append any attribution required AND define where that displayed in templates. I’d like to display the attribution before post comments and after post content.
General insights/questionson other photo libraries
We chatted about this on the hallway hangout for this exploration (starting around 24:41) mainly discussing how important it is that an open sourceOpen SourceOpen Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. solution rivals a paid one. Generally speaking, folks mentioned the following external image libraries outside of Openverse: Unsplash, Rawpixel, Pexels. Some questions remain as you can see in the quote below:
How might this work for other media types, such as audio and video? Would we want to hotlink it/embed from the source? What’s the risk if the media later is no longer hosted there? But also: hosting many audio and video files within most hosting environments is not ideal. If we make it easier to move mixed media from Openverse to the Media Library, what are the trade-offs?
A longstanding conversation in the WordPress project is around having better media management from folders to better filtering and more. This desire held up with a discussion around whether Openverse might be able to solve some of these issues as a media hub. Here’s a video from @paaljoachim expanding on the idea:
This has been a longstanding request in the WordPress community, but better media management in the Media Library (i.e. folders) would be extremely helpful, especially for site with 100s of images.
Folks were kind enough to record videos of themselves walking through the experience that I wanted to reshare below as it’s neat to see folks in a great bandwidth medium share their thoughts:
ExcerptExcerptAn excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. from @aurooba stream.
Taping an image to bring up the inline toolbar results in a selection box around the image and the cut-copy-paste toolbar popping up. Depending on where you tap, the image toolbar can be unusably obscured. Tapping through to the buttons doesn’t always work. Editing posts that contain images is very frustrating on iOSiOSThe operating system used on iPhones and iPads. devices. I often accidentally insert individual images into posts instead of galleries thanks to the media modal defaulting to individual insertion. Removing twenty images from content while dealing with the inline image bar is joyless.
These screenshots show an attempt at deleting an inserted screenshot from content via backspace. A screencast would demonstrate this better, but here’s a captioned gallery.
Cursor is to the right of the image. Tap delete.
Instead of deleting the image, backspace causes the cursor to jump around a bit and then usually land on the next line.
This happens more often than not.
Version: Current iOSiOSThe operating system used on iPhones and iPads.betaBetaA pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process..
Video uploads often get stuck. This gallery shows a session where I could not cancel a stuck upload.
This video seems to have finished uploading, but the uploading indicator has remained stuck for 10 minutes or so.
Buttons are blocked during the stuck upload.
Tapping Uploading… offers to cancel, but Yes is a noop. Tapping Yes does not cancel the upload. So, I force quit the WP app and start the app up again.
The app starts up with this warning. After tapping OK to dismiss. I’m presented with what looks like a successful upload. Perhaps the video uploaded after all. I preview to verify the video is intact.
Preview presents this. Heck with it, I’ll publish and hope for the best.
I made several attempts to upload a video and had to bail to desktop to finish my post. The journey begins with an attempt to upload a 61 second video to a wordpress.comWordPress.comAn online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ hosted site.
The upload fails. I’m somewhat near the edge of my wifi range, so I move closer in and tap the retry overlay.
I tap retry upload and wait for the upload to complete. It also fails. So, I tap retry upload again and lock the phone because I have other stuff to do.
I come back later to this screen.
I backspace over that placeholder image and retry the upload once again. This time the upload hangs. I watch it for about ten minutes and then tap “Uploading…”. This dialog pops up.
Tapping Yes does not cancel the download. After a few more cancel attempts, I restart the app and come back to what looks like an uploaded, playable video. Playback stops one second in, however.
I was unable to backspace over that video, so I quite my edit session, deleted the draft, and published the video from a desktop.
My journey starts in Press This on a wordpress.comWordPress.comAn online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ site. I want to upload an image and a video. I upload both seemingly successfully, but only the image inserts. I go back into the media modal, and see this…
Despite only one upload attempt, there are three videos. Tap them each in turn.
I didn’t see this error during upload and insertion.
HTTPHTTPHTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. error
HTTP error
Notice also that the progress indicator is stuck and that scroll bleedScroll bleedSometimes when scrolling a modal such as the media modal on touch devices, the scrolling bleeds through to the page beneath the modal. Instead of scrolling the modal, the page beneath scrolls. Sometimes the scrolling nests and sometimes the page beneath grabs scrolling all for itself. Android doesn't usually have this problem, but iOS triggers it often.https://make.wordpress.org/test/tag/scroll-bleed/ is evident.
This thread discusses featured imageFeatured imageA featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.flowFlowFlow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
through the media modal. There are some requests that the filterFilterFilters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. in the media modal remember the “uploaded to this post” filter setting independently for the featured image flow. Here’s an attempt at capturing this flow.
This is an old post. I’ve uploaded lots of images since this was published. A featured image is not set. Why do I want to set one now? A common scenario is that you have switched to a theme that requires featured images. Click Set featured image.
By default, all media is shown. I usually want to set the featured image to an image already on the post. To find the images for this post in the all media view, I’d have to scroll pretty far back, scanning small thumbnails as I go. Luckily, there’s an uploaded to this post filter. Click Images.
Click Uploaded to this post.
There are the images I want.
“Uploaded to this post” requires that the image be attached to a post. Images uploaded through the media modal from the editor are attached to the post, but images uploaded directly to the media library are not attached and don’t get attached later when added to a post. We could use APIAPIAn API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. for pulling images out of post content, like we do with some other media types.
Tap the 3rd image. I want to make sure I’m not selecting something already cropped, which is hard to determine from the modal. I know after some trial and error that the first image is already cropped.
You must be logged in to post a comment.