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:
- @atachibana and @mimi-tops launched a Japanese translation of the call for testing.
- @piermario shared an Italian translation of the call for testing.
- @courane01 ran a lovely group testing session with GoDaddy and reported back the findings.
- @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 filterFilter Filters 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 blockBlock Block 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 HeaderHeader The 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.
Previously reported:
- Gallery block refactor: rotating image forces all images in row to the same aspect ratio.
- Duplicated navigation blocks and template parts can not be edited without also changing the original.
- Duotone doesn’t work with a fixed background.
- Double scrollbar in the Site Editor leading to a splitting in the editor and extra gray space.
- Custom Image sizes are not responsive in the editor resulting in a strange experience when adding images since they are added at 100% but selecting 100% causes the image to change size.
New issues:
- Cropping tools are broken in the site editor.
- Image Block: Border settings don’t work when cropping/rotating.
- Deleting value of dimensions resets to px.
- Site Editor: multi selecting blocks causes the editor to jump to the top creating a jarring experience.
- Inconsistent undo/redo behavior with navigation block in the Site Editor.
- Site Editor: undo/redo causes editor to jump.
- Cover block: text over image align center center doesn’t work (fixed)
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.
@alanjacobmathew in this comment.
Feature Requests
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 image A 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.
Previously reported:
- Auto-select the alphabetical choice in forward-slash inserter command so that when using the slash inserter the image comes up before imgur embed as a more common use case.
- Gallery block refactor: Replacing a captioned image with one without caption retains the caption.
- Add Youtube or similar video service using an embed URL in the background of the Cover block. This would make it much easier to have a video in the background of a header.
- Resize controls for embeds to make them easier to customize and to bring parity with other image blocks.
- Add background support to Group block.
- Make Featured Image size controls available in Site Editor.
- Rethink featured image in the context of full site editing to unlock more advanced and interesting patterns, amongst other things.
- Add capability to set default format for image sub-sizes.
- Allow borders on image, group, cover blocks.
- Try having captions as an inner block of an Image block for greater control.
New:
- Add ability to turn off double confirmation multi-entity saving screen.
- Update preview icons in Media Library.
- Ability to add multiple background images to any block to allow for a creative lift.
- Add opacity controls to all image blocks.
- Consider adding a focal point picker to the Post Featured Image Block so one could set where a featured image is focused.
- Explore ways of showing where template parts are used in other templates to better understand how changes might impact the wider site.
- Provide a way to turn off Openverse integration when the time comes.
- Add helper text to Cover Block’s min height field.
- Integrate media related patterns into the Media Library.
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.
@paaljoachim in this comment
A uniform way to import images from external sources. There’s some inconsistency here that can be very confusing.
@trynet in this comment.
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.
@ndiego in this comment.
However, I would like to see a range of filters available to users. If this is too much for coreCore Core 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.
@greenshady in this WP Tavern post.
General Usability Feedback
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.
Previously reported:
- General difficulty around adding a background image to one’s header and the level of insight into FSE that’s required to do so.
- Image cropping in gallery block doesn’t work well due to the small space to make changes.
- General desire for an improve UX of image crop/edit tools to streamline the ability to do things like just rotate an image without needing to first select the option to crop.
- 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.
- When duplicating a Navigation or Template Part block, it’s not clear why changing one changes the other, making the experience feel broken and convoluted.
New:
- Block settings jump to top when adjusting duotone and alignment the first time disrupting one’s workflow.
- Percentage option for various block settings are confusing to use and reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces.
https://reactjs.org in unexpected ways, opening the decision around whether to include them by default for users. - Make top level duotone color selection more intuitive and consistent.
- Make it easier to turn duotone on/off in order to quickly see at a glance how duotone is impacting an image.
- Improve duotone popover experience to keep the popover open.
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.
@aurooba in this comment.
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.
@beckej in this comment.
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.
@ndiego in this comment.
Say I’m editing the padding dimension, then goes to modify the duotone, the entire right sidebarSidebar A 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’.
@alanjacobmathew in this comment.
If I insert 2 headers, applying changes to one affects both the header. Don’t know why it is happening.
@alanjacobmathew in this comment.
Thoughts on attribution
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.
- When exploring integration to WordPress, enable the ability to filter by license and usage.
- Review Pressbooks approach to built in attribution in the media library.
- Allow a way to determine how attribution are displayed in templates.
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.
@aurooba in this comment.
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.
@beckej in this comment.
I understand why this would be necessary in some circumstances, but I personally would not use such an image on my site.
@ndiego in this comment.
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.
@courane01 in this comment.
General insights/questions on 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 Source Open 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?
@courane01 in this comment.
Desire for improved media management
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.
@ndiego in this comment.
Watch feedback videos
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: