For today’s dev chat let’s focus on issues…

For today’s dev chat, let’s focus on issues being reported in betaBeta A 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., user testing, and what we need to work on in relation to these to get to the next beta. For reference, the first round of user testing on the media library grid view is up on Make UI.

#4-0, #agenda

Dev chat summary for July 16, 9, and 2

We haven’t posted weekly summaries in a bit, so here’s a summary of the last three dev chats.

  • BetaBeta A 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. 1: Shipped last Thursday, July 10. Feedback has been good so far.
  • Beta 2: Planned for tonight, July 17. @azaozz updated TinyMCE prior to release. Pending a couple of changes (or not) that @nacin is looking at: #22023 + #5809 and cookies tied to sessions (#20276).
  • Testing: Especially want feedback on the following things: pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party modals on many screens + accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) devices, wpviews, customizerCustomizer 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. panels, media grid, install language flow.
  • Tickets: Generally under control, but still need more area-specific triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors..

In general, 4.0 is shaping up with two distinct groups of focuses: editing + platform & writing + global.

Area specific updates:

  • Media Grid: Progress update from June 27. Reviews have been good but some help was needed on architectural reviews/revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.CSSCSS Cascading Style Sheets., keyboard accessibility. Attachment details will be tightened up (#28844).
  • Plugins: Progress update posted from June 28. Some APIAPI An 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. changes will take place so we can improve the Install Plugins page with groups of featured plugins. Need i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. attention on the plugin install page, but generally in good shape.
  • Customizer: we have panels now, some decisions need to be made about close vs. cancel language and possibly moving to a close icon + AYS
  • i18n: Progress update from July 2. Need help to complete things.
  • oEmbed: placeholders were added for when embeds are needed but not available—when the adminadmin (and super admin) is SSLSSL Secure Sockets Layer. Provides a secure means of sending data over the internet. Used for authenticated and private actions. and a user pastes non-SSL embed URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org, we try to get the SSL, if that fails, we try the non-SSL, if successful, we show the placeholder—the url in the post_content stays as pasted.
  • Other updates: Feedback will be posted about URL encoding with media_sideload_image(). Still looking at sessions; possible a schema change or two in there.

As always, daily bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. scrubs happen at 15:00 UTC.

#4-0, #summary

For today’s dev chat let’s check in on…

For today’s dev chat, let’s check in on how we’re feeling about a betaBeta A 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. 2, any blockers we might be seeing, and then do a scrub on tickets, particularly focusing on things that can be committed or punted. Please add any other agenda items in the comments.

#4-0, #agenda

@lancewillett and I will hold a Bundled Theme…

@lancewillett and I will hold a Bundled Theme Office Hour tomorrow, July 11, 2014 1700UTC in #wordpress-themes to clean out all tickets in the 4.0 milestone, starting with enhancements.

Everyone interested is invited to join us! Please feel free to test/review patches prior to tomorrow’s office hours, comment on the tickets etc., everything helps.

#4-0, #bundled-theme, #%f0%9f%91%bb

Proposed agenda for today’s dev chat We’re targeting…

Proposed agenda for today’s dev chat. We’re targeting the late evening Eastern US time for betaBeta A 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. 1.

  • What should people be testing in beta 1?
  • CustomizerCustomizer 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. tickets: #27666, #27993, #28605
  • Need to clear enhancements and feature requests before beta 1.

#4-0, #agenda

Customizer Improvements in 4.0

Building on the addition of Widgets to the CustomizerCustomizer 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. in 3.9, and alongside my GSoC Menu Customizer project, @westonruter, @ocean90 and I have been working on a series of Customizer improvements for 4.0. In this post, I’ll summarize the changes and proposed changes that we’d like to get in before betaBeta A 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.. Anything with an asterisk (*) still needs to be committed but has a patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing.. Keep in mind that everything here is liable to change before 4.0 is released.

We currently have eight enhancements and feature requests that need to be completed before beta, but half of them are already marked for commit and all have patches. If you’re interested in helping out with these changes, we could still use help reviewing and testing many of them (especially for UIUI User interface/UXUX User experience). Huge thanks to everyone who’s helped out so far this cycle.

Terminology Notes

We recently renamed the Appearance tracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. component to Customize. I’d like to clarify a few things regarding terminology used to describe the Customizer:

  • We’re shifting toward using “Customizer” rather than “Theme Customizer”, as it isn’t necessarily theme-specific (though most of its uses currently are).
  • “Customize” is the action, “Customizer” is the thing. Most UI elements use “Customize” or “customizing”, but most documentation should probably use “Customizer”. If you’re questioning which to use, consider whether you’re looking for a noun or a verb and pick accordingly. Feel free to conjugate the verb form (eg. “customizing”).
  • “Customize” could refer to anything. That’s the point; it could be used to customize any part of a site. The Customizer can be used for anything, and we’d like to encourage more experimentation with different uses of the Customizer.

UI Changes

In 4.0, most of the Customizer UI changes are for the Customizer itself; the user experience inside the Customizer. I’m expecting a focus on the experience of accessing and navigating through the Customizer in future releases. In 4.0:

  • WidgetWidget 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. areas are all grouped into a “Widgets” context, implemented via the new “Panels” APIAPI An 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.. Panels are a way to group Customizer sections, just like sections are a way to group controls. Panels slide over to the side, rather than expanding down, and contain vertically-expanding sub-sections. This could use some more work on the UI/UX side, see #27406 for details.
  • Only show “You are previewing / [theme name]” and the theme details & screenshot section when the Customizer is previewing an inactive theme. Otherwise, show “You are customizing / [site title]”, with a short description of the customizer. This matches panel headings, which are displayed as “You are customizing / [panel title]”, with the panel description as that heading section’s contents. #28550.
  • Replace Customizer close button with an “X” icon. This fits better with the arrow icon used to exit panels and makes the Customizer controls feel more like a modal/panel that is contextual to the front-end of the site, rather than a confusing mix between the adminadmin (and super admin) and the front-end. We’d also replace the mess of buttons in the theme-install previewer (which looks like the Customizer) with icons and move them around. #28655.
  • Prevent loss of unsaved changes in the Customizer by warning users with an AYS if they try to close the customizer and there are unsaved changes. #25439.
  • Always return to the screen that the Customizer was opened from in the admin, like on the front-end. Look for more work here in the future. #25457.
  • All coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. customizer controls now support descriptions (#27981), complementing the ability to add descriptions to sections and panels. We could potentially add descriptions to some core controls if they seem needed, might want to do a UI/UX audit of the core Customizer controls and/or user testing.

Here’s a screencast demonstrating some of these UI changes:

API Additions & Improvements

Customizer Panels

The Customizer now includes a new way to group options together: panels. Just like a section is a container for controls, a panel is a container for sections. This was implemented in #27406. The Panels API is easy-to-use and works almost identically to the existing customizer section API. Add a panel with the following, within the customize_register action:

$wp_customize->add_panel( 'panel_id', array(
	'priority'       => 10,
	'capability'     => 'edit_theme_options',
	'theme_supports' => '',
	'title'          => '',
	'description'    => '',
) );

As always, only use the arguments where you aren’t using the default values. Note that the panel will not be displayed unless sections are assigned to it. To add a section to a panel, just use the panel id for the new panel argument:

$wp_customize->add_section( 'section_id', array(
	'priority'       => 10,
	'capability'     => 'edit_theme_options',
	'theme_supports' => '',
	'title'          => '',
	'description'    => '',
	'panel'  => 'panel_id',
) );

You may notice that $wp_customize->add_panel and $wp_customize->add_section have the same arguments (other than panel, of course). This is because panels are a special type of section; technically speaking, WP_Customize_Panel extends WP_Customize_Section. Your sections are backwards-compatible: you can add the panel argument to existing sections without issues. However, you do need to check for the existence of WP_Customize_Manager->add_panel() if you’re maintaining pre-4.0 compatibility. As with Customizer Sections, you can access and modify Panels via:

  • $wp_customize->get_panel( $id );
  • $wp_customize->remove_panel( $id );

New Built-in Customizer Controls

WordPress core now provides support for a much wider array of Customizer controls. Implemented in #28477, these changes eliminate the need to create custom controls for most common use cases. The textarea type is now supported in core. For any type of input that uses an input element, you can simply specify the type attribute using the type parameter of $wp_customize->add_control().
Here’s an example:

$wp_customize->add_control( 'setting_id', array(
	'type'     => 'url',
	'priority' => 10,
	'section'  => 'title_tagline',
	'label'    => 'URL Field',
) );

Which results in the following markup in the Customizer:

<li id="customize-control-setting_id" class="customize-control customize-control-url">
	<label>
		<span class="customize-control-title">URL Field</span>
		<input type="url" value="" data-customize-setting-link="setting_id">
	</label>
</li>

This is pretty powerful, as you can now use the built-in WP_Customize_Control for most common use-cases rather than creating a custom control. But what about input types like number and range that require additional attributes like min, max, and step?

New Built-in Customizer Control Parameters

First of all, all of the built-in Customizer controls (including the custom controls such as WP_Customizer_Color_Control) now support descriptions, just like Customizer sections have descriptions (see #27981). This was much-needed and allows for inline help text at the control level.

More interestingly, to complement the new support for arbitrary input types, a new input_attrs parameter allows you to add attributes to the input element (also implemented in #28477). This extends beyond just using min, max, and step for number and range, to the ability to add custom classes, placeholders, the pattern attribute, and anything else you need to the input element. Here’s an example:

$wp_customize->add_control( 'setting_id', array(
	'type'        => 'range',
	'priority'    => 10,
	'section'     => 'title_tagline',
	'label'       => 'Range',
	'description' => 'This is the range control description.',
	'input_attrs' => array(
		'min'   => 0,
		'max'   => 10,
		'step'  => 2,
		'class' => 'test-class test',
		'style' => 'color: #0a0',
	),
) );

Which results in the following markup in the Customizer:

<li id="customize-control-setting_id" class="customize-control customize-control-range">
	<label>
		<span class="customize-control-title">Range</span>
		<strong><span class="description customize-control-description">This is the range control description.</span></strong>
		<input type="range" min="0" max="10" step="2" class="test-class test" style="color: #0a0;" value="" data-customize-setting-link="setting_id">
	</label>
</li>

Which displays as follows (in Chrome 35):

customizer-4.0-range-control

The ability to add classes is particularly useful if you need to target specific controls with CSSCSS Cascading Style Sheets. or JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors., but you don’t need any special markup. I’m using this in the Menu Customizer for the Menu Name field, which is just an ordinary text control with a special setting type.

Contextual Controls

Customizer controls can now be displayed or hidden based on the Customizer’s preview context. For example, options that are only relevant to the front page can be shown only when the user is previewing their front page in the Customizer (see #27993). This is already implemented in core for Widgets; Widgets have always been contextually faded and shown/hidden based on their visibility in the preview, but this functionality is now built off of the core active_callback API in both PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher and JS. There are three different ways to specify whether a given control should only be displayed in a certain context. The first, and most straightforward, is to use the active_callback argument in $wp_customize->add_control().

$wp_customize->add_control( 'front_page_greeting', array(
	'label'           => __( 'Greeting' ),
	'section'         => 'title_tagline',
	'active_callback' => 'is_front_page',
) );

Note that you may use either built-in conditional functions or a custom function. If you have a custom control (via a subclass of WP_Customize_Control) and a custom callback function, you can skip the active_callback argument and override the active_callback method instead:

class WP_Greeting_Control extends WP_Customize_Control {
	// ...

	function active_callback() {
		return is_front_page();
	}
}

Finally, the customize_control_active 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. will override all of the other active callback options and may be a better solution in certain cases (note that this particular example will be avoidable with future work on expanding the Customizer’s JS API, and does not hide the title_tagline section, only the controls in it):

function title_tagline_control_filter( $active, $control ) {
	if ( 'title_tagline' === $control->section ) {
		$active = is_front_page();
	}
	return $active;
}
add_filter( 'customize_control_active', 'title_tagline_control_filter', 10, 2 );

In addition to the PHP API for contextual controls, you can override the control-visibility-toggle function on the JS side. By default, controls will slideUp and slideDown as they become visible or hidden when the Customizer preview is navigated. If you’re familiar with the Customizer control JS API (see wp-admin/js/customize-controls.js, and wp.customize.Control), the Widgets implementation of a custom toggle function is a good example:

api.Widgets.WidgetControl = api.Control.extend({
// ...
	/**
	* Update widget control to indicate whether it is currently rendered.
	*
	* Overrides api.Control.toggle()
	*
	* @param {Boolean} active
	*/
	toggle: function ( active ) {
		this.container.toggleClass( 'widget-rendered', active );
	},
// ...
) };

/**
 * Extends wp.customize.controlConstructor with control constructor for widget_form.
 */
$.extend( api.controlConstructor, {
	widget_form: api.Widgets.WidgetControl,
} );

Changes to the customize_update_ and customize_preview_ Actions

You probably already know that the Customizer supports both option and theme_mod types for settings. But did you know that you can register arbitrary types? Since this is generally undocumented, I’ll show how it works (this has been in place since 3.4):

$wp_customize->add_setting( 'setting_id', array(
	'type'                 => 'custom_type',
	'capability'           => 'edit_theme_options',
	'theme_supports'       => '',
	'default'              => '',
	'transport'            => 'refresh',
	'sanitize_callback'    => '',
	'sanitize_js_callback' => '',
) );

There are a few actions that you can use to handle saving and previewing of custom types (option and theme_mod are handled automatically). Namely, customize_update_$type and customize_preview_$type are useful here. Previously, the value of the setting was passed to these actions, but there was no context. In 4.0, via #27979, the WP_Customize_Setting instance is passed to these actions, allowing more advanced saving and previewing operations. Here’s an example from my Menu Customizer project:

function menu_customizer_update_menu_name( $value, $setting ) {
...
	// Update the menu name with the new $value.
	wp_update_nav_menu_object( $setting->menu_id, array( 'menu-name' => trim( esc_html( $value ) ) ) );
}
add_action( 'customize_update_menu_name', 'menu_customizer_update_menu_name' );

This part of the Customizer API is a bit too complex to fully explain here, as most of it already existed, but suffice it to say that the addition of the setting instance to these actions greatly expands the possibilities of working with custom setting types in the Customizer.

New “customize” MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. Capability

The Customizer has been essentially decoupled from edit_theme_options in favor of a customize meta capability (mapped to edit_theme_options by default), which is assigned only to administrators by default. This allows for wider use of the Customizer’s extensive capability-access options, which are built into panels, sections, and settings. Additionally, this makes it possible to allow non-administrators to use the customizer for, for example, customizing posts. This change is an important step toward expanding the scope of the Customizer beyond themes. See #28605.

function allow_users_who_can_edit_posts_to_customize( $caps, $cap, $user_id ) {
        $required_cap = 'edit_posts';
        if ( 'customize' === $cap && user_can( $user_id, $required_cap ) ) {
                $caps = array( $required_cap );
        }
        return $caps;
}
add_filter( 'map_meta_cap', 'allow_users_who_can_edit_posts_to_customize', 10, 3 );

Customizer Conditional Function

The new is_customize_preview() conditional function can be used to check whether the front-end is being displayed in the Customizer. The naming derives from the fact that the term “preview” applies to both theme previews and previewing changes before saving them. See #23509 for some sample use-cases from WordPress.comWordPress.com An 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/.

Future Work

Most of the changes in 4.0 focus on the Customizer’s PHP API and the user experience within the Customizer. In the next few releases, we’ll probably shift focus to building out the Customizer JS API (#28709) and work on the user experience of accessing and navigating through the customizer (potentially with something like #28602 and related), as well as improving the experience on mobile (#28784). The Customizer can be very slow currently but we’re exploring ways to improve performance; for example, controls could be dynamically loaded on an as-needed basis once a more complete JS API is in place (#28580). We’ll work on improving custom background images and potentially add menus and/or theme-switching to the Customizer eventually. We’ll also want to address what to do with screens that the Customizer effectively replaces (headers and backgrounds, maybe eventually widgets, menus, and themes).  Check out the future release Customize component tickets for more ideas.

Thanks again to everyone who’s helped out with the Customizer in 4.0. If any of the outstanding items here pique your interest, feel free to jump in on trac!

 

Update: all UI changes have been committed. Additional work to improve focus styling will happen during beta, see #28267.

Update 2: everything here is in WordPress 4.0 beta 1, with the exception of the customize capability. The capability will most likely be implemented as a meta capability, not a primitive one, see #28605 for details.

Update 3: customize meta capability is now in trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision., will be in 4.0 beta 2. Added usage example.

#4-0, #api, #customize, #dev-notes

Internationalization project updates

Here’s where we are on the five goals for internationalization outlined previously:

1. The first step installing WordPress should be to choose a language. The rest of the install process would then be in that language.

First pass done in #28577. There is a list of things to do in the ticketticket Created for both bug reports and feature development on the bug tracker., which includes:

  • Improved error handling when the APIAPI An 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. or filesystem isn’t accessible. Working on this.
  • Bring this to setup-config.php. Working on this.
  • Place browser-based language suggestions at the top. Working on this.
  • Use better markup rather than simple select/option HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers., currently being worked on by @jorbin.

2. You should be able to choose/switch a language from the general settings screen, after which the language pack should be downloaded.

This simply requires replacing mu_dropdown_languages() with a new method that handles uninstalled languages gracefully. This is easy to implement and relies on much of the same code as the install process, so it’s simply on hold until that’s done. I’ve also worked out a UXUX User experience flow with @sonjanyc.

3. You should be able to search from the dashboard for plugins and themes that are available in your language.

This is handled on the WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ side. The updated plugins screen will need to pass a new argument 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. by language, and then remove that argument if the user requests showing plugins in any language. We’ll need to hack in readme/description translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. support but that’s a small API change and otherwise WordPress.org work, not coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. work.

4. All localized packages should be able to be automatically generated and made available immediately as part of the core release process.

A script for this is written. While it needs more work, it was used as a test to build 3.9.1 packages, which are doubling as 4.0-alpha testing packages. This does not require changes in core.

5. Localized packages should only be used for initial downloads from WordPress.org. Instead, language packs should be transparently used for updates.

This is ready. A flag needs to simply be flipped in the API.

Ongoing problems to solve:

  • I have a proposal to type up for how to handle readmes, license files, etc., in both core and plugins. Requires no core changes.
  • No one has picked up the plan to limit the code modifications still done in some locales. This may end up being a July project for me.
  • The relevant APIs we need in core were deployedDeploy Launching code from a local development environment to the production web server, so that it's available to visitors. to WordPress.org. Also, the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party and theme directories are fully internationalized; we need to get those strings to translators and shoehorn them onto existing international sites.

#4-0, #i18n

Proposed agenda for today * A look at…

Proposed agenda for today:

  • A look at the assignments from last week – next steps, any stucks, any needs. (@azaozz,
  • #27423: Improve Media Modal UIUI User interface at small-screen sizes
  • #14759: Improve the way oEmbed deals with caching (@markjaquith)
  • #20564: Framework for storing revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. of Post MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. (@adamsilverstein)
  • How are we feeling about betaBeta A 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.?

Please add any items you have in the comments below.

#4-0, #agenda

Media Grid Update

Media Grid started as a standalone plugin by Shaun Andrews, which was a reimagining of the UIUI User interface as an alternative to the traditional post list view in the Media Library. The argument was that images are the ubiquitous media type in most users’ libraries, so we should provide an interface to browse media visually.

I joined the project in late April, attempting to integrate existing Media modal code. This work was merged into the standalone pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, and into trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.(see #24716) in early June. In the process, I created documentation for the Media code, which is the most comprehensive resource for untangling the Backbone wires in media.

Questions were raised about what problem the grid was solving, so in order to get a more hands-on understanding of user engagement with the Media Library, Jerry Bates performed user interviews. These confirmed our assumption that images are the pervasive media type, but also surfaced the fact that users identify media in different ways – some by the thumbnail, some by what post a media item is uploaded to, some by title.

After a good amount of UXUX User experience/UI chatter in weekly meetings, we decided we could serve users better by making a few changes to the original implementation merged into trunk. We’ve landed on mock-ups for a quick pivot, which I’m working on implementing . I’ll be dropping diffs for y’all JavascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. Jedis to peruse on #24716, feedback welcome and appreciated. I hope to have merge-ables by Monday morning, and then to progress to user testing.

#4-0, #media

Summary of 6 25 dev chat IRC log…

Summary of 6/25 dev chat (IRC log):

General

  • BetaBeta A 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. 1 is being pushed back to July 9 from July 2, with each successive beta and RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 1 also pushing back a week. The schedule has been updated.
  • oEmbed (@azaozz), i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. / language packs (@nacin), media grid (@ericlewis), and pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party installer (@tellyworth) should each have an update post published here before the weekend, outlining what has been done thus far, next steps, points needing discussion, and relevant tickets.
  • Each of the above should have a new patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. ready by Monday. Across the board, it would be nice to see more work-in-progress patches — props @ericandrewlewis for recent patches on the media grid ticketticket Created for both bug reports and feature development on the bug tracker.
  • Daily scrubs in #wordpress-dev happening at 15:00 UTC.
  • @johnbillion would like to help coordinate people who are given time by their employers to work on WP; Make/CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. post forthcoming.

oEmbed

  • Recent updates to oEmbed: previews in the editor, media modal, added a bunch of providers
  • Todos: SSLSSL Secure Sockets Layer. Provides a secure means of sending data over the internet. Used for authenticated and private actions., script sandboxing, caching improvements, UIUI User interface/UXUX User experience tweaks
  • Two thirds of our supported providers don’t support SSL: #28507
  • @sams suggested SSL should be a requirement for oEmbed providers going forward (have since revised to an important consideration for the time being).
  • Insecure iframes and/or insecure contained content will be blocked by newer Chrome and Firefox.
  • Two options: placeholder or a nonced, authed, proxied iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser..
  • For Monday: Placeholder fallback for SSL adminadmin (and super admin) and non-SSL oEmbeds.

i18n

  • Haven’t seen any movement since last week, a lot is listed out on ticket: https://core.trac.wordpress.org/ticket/28577#comment:8
  • For Monday: Patch showing where we are now.

Media Grid

  • A quick phase 2 of the media grid is going forward
  • Media Grid needs a fair amount of work, not user testable yet.
  • Reminder: watch out for strings like “Edit Media” (#) won’t work well for long translations, i.e. ru_RU.
  • @ericandrewlewis asked for feedback on the JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. application structural decisions around Media Grid. This is likely worth a separate discussion.
  • For Monday: A user-testable patch.

Plugin Installer

  • Screenshots for possibly comparable things.
  • @tellyworth is working on plugin-install.php and @stephdau is working on the details modal / page.
  • Next: Need to discuss what kind of data is most helpful to display for users when they are trying to figure out which plugin it is they want.
  • For Monday: @tellyworth and @stephdau will post patches in progress.

Other

With thanks (again) to @designsimply for note collation.

#4-0, #summary