As part of this year’s Customization Focus, @westonruter, @obenland, @adamsilverstein, @timmydcrawford, @gonom9, and I have been working on creating an image widget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. for core Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. This new widget lets you quickly and easily add an image to your site’s widget areas.
You may have previously seen this come up as a media widget on Trac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress., before we decided to split the widget up into individual media-focused widgets. Having single widgets makes them more discoverable, and eases the way forward for similar blocks in the Editor. The image widget is the first in a series of media-focused widgets we’ll be introducing to core.
You can check out the widget on GitHub, install the plugin from WordPress.org, or check out the Trac ticket.
Why make an image widget?
People want to add images to their widget areas. Visit any subject blog (versus network, site) across the internet and you’ll likely find images in the sidebars. People add photos of themselves along with bio blurbs, link to their books, promote upcoming events with graphics, partner with other blogs and exchange ads, and add call-to-actions using images.
The current process for adding an image to your widget areas is quite painful. You need to:
- Upload or select an image in your media library.
- Copy the image URL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org.
- Go to the widgets admin (and super admin) screen, or the widgets panel in the Customizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings..
- Create a new Text widget.
- Add the image to the Text widget using HTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers., which is often a barrier for new or non-technical site maintainers. (See #35243 for work to add a visual mode to Text widget.)
This is a huge barrier to what should be a relatively simple task. This new image widget makes it much easier to add an image to your widget areas by natively integrating with core’s media library.
How is it implemented?
Another unique aspect of how the media widgets work is how instance data is sanitized. Normally widgets write procedural code to sanitize instances via a subclassed WP_Widget::update() method. The media widgets, however, make use of a REST API schema returned from WP_Widget_Media::get_instance_schema() to sanitize instances declaratively. The WP_Widget_Media::update() method iterates over the schema and uses it to sanitize and validate the instance properties. Adding schemas to the base WP_Widget class is also proposed in #35574.
Please test the image widget. For now, you can grab the latest version of the widget on GitHub. You can either check it out locally using Git Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/., or download a zip by clicking “Clone or download” → “Download ZIP.” Alternately, you can download the nightly version of the plugin from the WordPress.org plugin directory.