- uses button elements for the toggles
- uses `aria-expanded` on the toggles to communicate to assistive technologies the panels expanded/collapsed state
- adds the "circular focus" style to the toggles to give users a clear indication of the currently focused element
- standardizes CSS class names to `.toggle-indicator` and `.handlediv` as these names are already used across the admin for similar controls
Props monikarao, xavortm, mihai2u, Kopepasah.
Fixes#37013.
Built from https://develop.svn.wordpress.org/trunk@41621
git-svn-id: http://core.svn.wordpress.org/trunk@41456 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Autosaved changes made on top of `auto-draft` changesets get written on top of the `auto-draft` itself, similar to how autosaves for posts will overwrite post drafts.
* Autosaved changes made to saved changesets (e.g. `draft`, `future`) will be placed into an autosave revision for that changeset and that user.
* Opening the Customizer will now prompt the user to restore their most recent auto-draft changeset; if notification is dismissed or ignored then the auto-draft will be marked as dismissed and will not be prompted to user in a notification again.
* Customizer will no longer automatically supply the `changeset_uuid` param in the `customize.php` URL when branching changesets are not active.
* If user closes Customizer explicitly via clicking on X link, then autosave auto-draft/autosave will be dismissed so as to not be prompted again.
* If there is a changeset already saved as a `draft` or `future` (UI is forthcoming) then this changeset will now be autoloaded for the user to keep making additional changes. This is the linear model for changesets.
* To restore the previous behavior of the Customizer where each session started a new changeset, regardless of whether or not there was an existing changeset saved, there is now a `customize_changeset_branching` hook which can be filtered to return `true`.
* `wp.customize.requestChangesetUpdate()` now supports a second with options including `autosave`, `title`, and `date`.
* The window `blur` event for `customize.php` has been replaced with a `visibilitychange` event to reduce autosave requests when clicking into preview window.
* Adds `autosaved` and `branching` args to `WP_Customize_Manager`.
* The `changeset_uuid` param for `WP_Customize_Manager` is extended to recognize a `false` value which causes the Customizer to defer identifying the UUID until `after_setup_theme` in the new `WP_Customize_Manager::establish_loaded_changeset()` method.
* A new `customize_autosaved` query parameter can now be supplied which is passed into the `autosaved` arg in `WP_Customize_Manager`; this option is an opt-in to source data from the autosave revision, allowing a user to restore autosaved changes.
Props westonruter, dlh, sayedwp, JoshuaWold, melchoyce.
See #39896.
Built from https://develop.svn.wordpress.org/trunk@41597
git-svn-id: http://core.svn.wordpress.org/trunk@41430 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Galleries are managed in the widget in the same way they are managed in the post editor, both using the media manager.
* Gallery widget is merged from the Core Media Widgets v0.2.0 feature plugin and it extends `WP_Widget_Media` in the same way as is done for image, audio, and video widgets.
* Model syncing logic is updated to support booleans and arrays (of integers).
* Placeholder areas in media widgets are now clickable shortcuts for selecting media.
* Image widget placeholder is updated to match gallery widget where clicking preview is shortcut for editing media.
Props westonruter, joemcgill, timmydcrawford, m1tk00, obenland, melchoyce.
See #32417.
Fixes#41914.
Built from https://develop.svn.wordpress.org/trunk@41590
git-svn-id: http://core.svn.wordpress.org/trunk@41423 1a063a9b-81f0-0310-95a4-ce76da25c4cd
- properly labels all the code editor areas (Theme/Plugin, Custom HTML widget, Additional CSS), whether CodeMirror is enabled or disabled
- adds `role="textbox"` and `aria-multiline="true"` to the CodeMirror editing area to allow assistive technologies properly identify it as a textarea
- standardizes the "keyboard trap" help text across the admin and keeps it as a list for better readability
- use the Help text elements as target for `aria-describedby`, to make screen readers read out the help text when focusing the editors
- fixes the `aria-expanded` attribute usage in the Customizer "Additional CSS" help toggle
- moves focus to the CodeMirror editing area when clicking on the associated label
- in the Plugin editor screen: changes a `<big>` element to `<h2>` for better semantics and consistency with the Theme editor screen
- also, removes a few textdomain leftovers, see `better-code-editing` and `default`
Props westonruter, melchoyce, afercia.
Fixes#41872.
Built from https://develop.svn.wordpress.org/trunk@41586
git-svn-id: http://core.svn.wordpress.org/trunk@41419 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Adds `WP_Customize_Code_Editor_Control` and `wp.customize.CodeEditorControl()`.
* Control respects user preference for syntax highlighting, showing a textarea when user opts out.
* Code editor control takes the ad hoc code for Additional CSS and makes it reusable and extensible, for Additional CSS in core and plugins to use (such as Jetpack).
* Replace `settings` arg in `wp_enqueue_code_editor()` with separate args for `codemirror`, `csslint`, `jshint`, and `htmlhint`.
* Prefix `codemirror` script and style handles with `wp-` to prevent collisions, as also the object is exported as `wp.CodeMirror` in JS.
* Reduce indent size in Customizer code editor instances and Custom HTML widget to use tab size of 2 instead of 4 to save on space.
See #12423, #38707, #35395.
Fixes#41897.
Built from https://develop.svn.wordpress.org/trunk@41558
git-svn-id: http://core.svn.wordpress.org/trunk@41391 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Adds a `notifications` property to instances of `wp.customize.Panel` and `wp.customize.Section`.
* Adds a `setupNotifications()` method to `Panel`, `Section`, and `Control`.
* Adds a `getNotificationsContainerElement()` method to the `Panel` and `Section` classes, like `Control` has.
* Replace hard-coded notification in header media section with a notification.
* Limit rendering notifications to panels and sections that are expanded, and to controls that have an expanded section.
See #34893, #35210, #38778.
Fixes#38794.
Built from https://develop.svn.wordpress.org/trunk@41390
git-svn-id: http://core.svn.wordpress.org/trunk@41223 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Show global error notiafication when saving is blocked due to client-side setting invalidity.
* Refactor `wp.customize.Notifications#render()` to ensure a notification re-renders if its `message` or data changes but its `code` does not.
Props MatheusGimenez, sixhours, westonruter, karmatosed, aocean90, zoonini, michelleweber, melchoyce.
See #35210.
Fixes#21492.
Built from https://develop.svn.wordpress.org/trunk@41389
git-svn-id: http://core.svn.wordpress.org/trunk@41222 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Code editor is integrated into the Theme/Plugin Editor, Additional CSS in Customizer, and Custom HTML widget. Code editor is not yet integrated into the post editor, and it may not be until accessibility concerns are addressed.
* The CodeMirror component in the Custom HTML widget is integrated in a similar way to TinyMCE being integrated into the Text widget, adopting the same approach for integrating dynamic JavaScript-initialized fields.
* Linting is performed for JS, CSS, HTML, and JSON via JSHint, CSSLint, HTMLHint, and JSONLint respectively. Linting is not yet supported for PHP.
* When user lacks `unfiltered_html` the capability, the Custom HTML widget will report any Kses-invalid elements and attributes as errors via a custom Kses rule for HTMLHint.
* When linting errors are detected, the user will be prevented from saving the code until the errors are fixed, reducing instances of broken websites.
* The placeholder value is removed from Custom CSS in favor of a fleshed-out section description which now auto-expands when the CSS field is empty. See #39892.
* The CodeMirror library is included as `wp.CodeMirror` to prevent conflicts with any existing `CodeMirror` global.
* An `wp.codeEditor.initialize()` API in JS is provided to convert a `textarea` into CodeMirror, with a `wp_enqueue_code_editor()` function in PHP to manage enqueueing the assets and settings needed to edit a given type of code.
* A user preference is added to manage whether or not "syntax highlighting" is enabled. The feature is opt-out, being enabled by default.
* Allowed file extensions in the theme and plugin editors have been updated to include formats which CodeMirror has modes for: `conf`, `css`, `diff`, `patch`, `html`, `htm`, `http`, `js`, `json`, `jsx`, `less`, `md`, `php`, `phtml`, `php3`, `php4`, `php5`, `php7`, `phps`, `scss`, `sass`, `sh`, `bash`, `sql`, `svg`, `xml`, `yml`, `yaml`, `txt`.
Props westonruter, georgestephanis, obenland, melchoyce, pixolin, mizejewski, michelleweber, afercia, grahamarmfield, samikeijonen, rianrietveld, iseulde.
See #38707.
Fixes#12423, #39892.
Built from https://develop.svn.wordpress.org/trunk@41376
git-svn-id: http://core.svn.wordpress.org/trunk@41209 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Displays an error notification in the global area when a save attempt is rejected due to invalid settings. An error notification is also displayed when saving fails due to a network error or server error.
* Introduces `wp.customize.Notifications` subclass of `wp.customize.Values` to contain instances of `wp.customize.Notification` and manage their rendering into a container.
* Exposes the global notification area as `wp.customize.notifications` collection instance.
* Updates the `notifications` object on `Control` to use `Notifications` rather than `Values` and to re-use the rendering logic from the former. The old `Control#renderNotifications` method is deprecated.
* Allows notifications to be dismissed by instantiating them with a `dismissible` property.
* Allows `wp.customize.Notification` to be extended with custom templates and `render` functions.
* Triggers a `removed` event on `wp.customize.Values` instances _after_ a value has been removed from the collection.
Props delawski, westonruter, karmatosed, celloexpressions, Fab1en, melchoyce, Kelderic, afercia, adamsilverstein.
See #34893, #39896.
Fixes#35210, #31582, #37727, #37269.
Built from https://develop.svn.wordpress.org/trunk@41374
git-svn-id: http://core.svn.wordpress.org/trunk@41207 1a063a9b-81f0-0310-95a4-ce76da25c4cd
The Plugin details modal custom implementation in the Plugins page conflicts with
other Thickbox instances added by plugins. Thickbox shows its age and has been
modified over time to suit core needs. However, WordPress should do its best to
not create conflicts with the native Thickbox styles and functionalities. Plugin
authors should be able to use `add_thickbox()` in any admin page as documented,
without having to worry about potential errors.
- fixes a JavaScript error when closing a native Thickbox modal in the Plugins page
- avoids to override the native Thickbox modal styles
- uses a CSS class to target the Plugin details modal and remove a pile of overqualified CSS selectors
Fixes#41417.
Built from https://develop.svn.wordpress.org/trunk@41356
git-svn-id: http://core.svn.wordpress.org/trunk@41189 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Mark a widget as dirty when a field input triggers a `change` or `input` event; clear dirty state when widget is successfully saved.
* Disable Save button and re-label "Saved" when widget not dirty.
* Show AYS dialog when leaving widgets admin screen with unsaved changes.
* When widgets are dirty, expand all unsaved widgets at AYS check and focus on first one.
* Change "Close" link to "Done"; hide link when widget is dirty and reveal when saved.
* The "Done" link persistently appears in the Customizer even after making a change (when the widget is dirty) because changes are autosaved into the changeset.
* Prevent saving widget when form fails `checkValidity`.
* Fix frequency of triggering of `change` event on the rich Text widget's `textarea` limited now to when there are actual changes.
* Add a class of `widget-dirty` to widget containers when the widget has unsaved changes.
Props westonruter, timmydcrawford, melchoyce.
Fixes#41610, #23120.
Built from https://develop.svn.wordpress.org/trunk@41352
git-svn-id: http://core.svn.wordpress.org/trunk@41185 1a063a9b-81f0-0310-95a4-ce76da25c4cd
- Refactors the UI controls around the Iris color picker to output valid and semantic markup
- Simplifies the way elements visibility gets toggled
- Properly associates the visually hidden label with the color input field
- Makes the toggle button a real button
- Adds `aria-expanded` to the toggle button
- Keeps focus on the toggle button instead of moving it to the color input field
- Adds `aria-label` attributes to give better context to some controls
- Removes a redundant title attribute
- Keeps the toggle button text to "Select Color" instead of changing it to "Current Color" when a color is selected
- Slightly improves the responsive view
- CSS clean-up
Fixes#39662.
Built from https://develop.svn.wordpress.org/trunk@41329
git-svn-id: http://core.svn.wordpress.org/trunk@41160 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Fixes a visual glitch visible on Ubuntu. WordPress uses system fonts and they have
different metrics across operating systems. Uses screen-reader-text as a more
solid way to visually hide text.
Props punit5658, afercia.
Fixes#41497.
Built from https://develop.svn.wordpress.org/trunk@41227
git-svn-id: http://core.svn.wordpress.org/trunk@41067 1a063a9b-81f0-0310-95a4-ce76da25c4cd
There are now 3 places where we call out to the REST API from within wp-admin. This commit introduces a small library to allow overriding these calls, centralize nonce-passing logic, and eliminate the need to pass a full REST URL down to client code (this last feature is not yet used and will be explored in a separate ticket).
Fixes#40919.
Built from https://develop.svn.wordpress.org/trunk@41206
git-svn-id: http://core.svn.wordpress.org/trunk@41046 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Often times, it can be confusing to set a custom permalink structure. One has to double-check the documentation, make
sure to correctly insert the structure tag, and hope not to break their site.
With this addition, the available structure tags are being displayed as a list of easily clickable buttons that can be
used to insert tags to the custom structure input field and to remove them again.
Props kpdesign, swissspidy, joedolson, afercia.
Fixes#29872.
Built from https://develop.svn.wordpress.org/trunk@41182
git-svn-id: http://core.svn.wordpress.org/trunk@41022 1a063a9b-81f0-0310-95a4-ce76da25c4cd
The Text widget in legacy mode omits TinyMCE and retains old behavior for matching pre-existing Text widgets. Usage pointers added to default visual mode appear when attempting to paste HTML code into the Visual tab and when clicking on the Text tab, informing users of the new Custom HTML widget.
Props westonruter, melchoyce, gitlost for testing, obenland for testing, dougal for testing, afercia for testing.
See #35243.
Fixes#40951.
Built from https://develop.svn.wordpress.org/trunk@41050
git-svn-id: http://core.svn.wordpress.org/trunk@40900 1a063a9b-81f0-0310-95a4-ce76da25c4cd
When closing the theme preview, restore the previously selected tab. Avoid an issue where duplicate entries in the history prevented navigation. When re-opening the preview, remove bound event handlers before re-adding them.
Props afercia.
Fixes#36613.
Built from https://develop.svn.wordpress.org/trunk@40824
git-svn-id: http://core.svn.wordpress.org/trunk@40681 1a063a9b-81f0-0310-95a4-ce76da25c4cd
- Close the form after obtaining a valid location.
- Fix focusing the toggle button after closing the form.
- Fix aria attribute values.
- Fix positions in IE11.
- Some JS and CSS cleanup.
Props afercia, coreymckrill.
Fixes#40735.
Built from https://develop.svn.wordpress.org/trunk@40789
git-svn-id: http://core.svn.wordpress.org/trunk@40647 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Add a 'delete' link next to the update button on the term edit screen so you can delete a term while you are reviewing it's details.
Props cklosows, bradt, ocean90, johnbillion, DrewAPicture, ryan, MatheusGimenez, maguiar.
Fixes#9777.
Built from https://develop.svn.wordpress.org/trunk@40655
git-svn-id: http://core.svn.wordpress.org/trunk@40518 1a063a9b-81f0-0310-95a4-ce76da25c4cd
These controls toggle the visibility of the update progress: they perform an action
therefore they should be buttons. Also:
- uses `aria-expanded` to communicate the toggle button state
- removes some inline JavaScript
- when clicking the toggle buttons, the progress details get moved with JavaScript after the button: this helps users of assistive technologies in finding them and makes the UI a bit more intuitive
Props Cheffheid, afercia.
See #26504.
Fixes#40453.
Built from https://develop.svn.wordpress.org/trunk@40646
git-svn-id: http://core.svn.wordpress.org/trunk@40507 1a063a9b-81f0-0310-95a4-ce76da25c4cd
The last time a new widget was introduced, Vuvuzelas were a thing, Angry Birds started taking over phones, and WordPress stopped shipping with Kubrick. Seven years and 17 releases without new widgets have been enough, time to spice up your sidebar!
Props westonruter, melchoyce, obenland, timmydcrawford, adamsilverstein, gonom9, wonderboymusic, Fab1en, DrewAPicture, sirbrillig, joen, matias, samikeijonen, afercia, celloexpressions, designsimply, michelleweber, ranh, kjellr, karmatosed.
Fixes#32417, #39993, #39994, #39995.
Built from https://develop.svn.wordpress.org/trunk@40640
git-svn-id: http://core.svn.wordpress.org/trunk@40501 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Valid code is important not just to formally meet the specification, but also to
ensure user agents, including assistive technologies, can accurately interpret
and parse content. When HTML elements are not used in the recommended way,
user agents may render them in unexpected ways. It can also become a problem for
compatibility with older or even future browsers, devices, or other software.
See W3C WCAG 4.1.1.
Props takayukister, aryamaaru.
Fixes#34881.
Built from https://develop.svn.wordpress.org/trunk@40572
git-svn-id: http://core.svn.wordpress.org/trunk@40442 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Links used as UI controls that behave like buttons, should be buttons.
- changes the widgets "toggle", "Delete", and "Close" links to buttons
- uses `aria-expanded` to announce the state of the toggle buttons
- increases a bit the clickable area of the toggle
- ensures the "circular focus" doesn't get cut-off in some browsers by centering the toggle arrows
- uses a `<span>` element with an `aria-hidden` attribute to hide CSS generated font icons from assistive technologies
- standardizes on `.toggle-indicator:before` rather than `:after`
- changes two `#f00` reds in `#dc3232`, see #35622Fixes#31476.
Built from https://develop.svn.wordpress.org/trunk@40480
git-svn-id: http://core.svn.wordpress.org/trunk@40356 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This extends the existing behavior which only showed a message only when there were no widget areas rendered in the preview. The number of non-rendered widget areas is indicated. Also removes needles deletion of `wp.customize.Widgets.data.l10n` property which hindered plugins.
See #33567, #33052.
Fixes#39087.
Built from https://develop.svn.wordpress.org/trunk@40312
git-svn-id: http://core.svn.wordpress.org/trunk@40219 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Add QUnit tests for the parsing of custom namespace routes. Add a custom schema fixture based on the `wp-js-widgets` plugin. Test that the client can parse the widget namespace in the schema and correctly construct the expected group of models and collections. Also includes a small unrelated QUnit fix to ensure nav-menu test passes when it is loaded without its tests executing as well as a small jshint fix, adding a missing semicolon since [40107].
Props jnylen0.
Fixes#39561.
Built from https://develop.svn.wordpress.org/trunk@40109
git-svn-id: http://core.svn.wordpress.org/trunk@40046 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Enable history support for the new theme screen, including navigating theme details and closing the details modal. Theme selection is now also bookmark-able, so linking to a URL like `/wp-admin/theme-install.php?theme=twentyseventeen` correctly opens the theme preview.
Props dd32.
Fixes#36613.
Built from https://develop.svn.wordpress.org/trunk@40107
git-svn-id: http://core.svn.wordpress.org/trunk@40044 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Fix a JavaScript error when the media edit screen is loaded directly via a url such as `/wp-admin/post.php?post={post_id}&action=edit&image-editor`. Add a check in `imgLoaded` for `this.hold.sizer` which is set up during initialization and required for the cropping tool. Call `init` if this is undefined.
Props NoseGraze.
Fixes#38138.
Built from https://develop.svn.wordpress.org/trunk@40020
git-svn-id: http://core.svn.wordpress.org/trunk@39957 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Fire a `menu-item-added` event after a menu item is added to the DOM. Fire a `menu-removing-item` event before a menu item is removed from the DOM. Enables hooking into and responding to menu changes.
Props welcher, adamsilverstein.
Fixes#31218.
Built from https://develop.svn.wordpress.org/trunk@39928
git-svn-id: http://core.svn.wordpress.org/trunk@39865 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Also fix logic for `focus-control-for-setting` handler to focus on the first control (lowest `priority` value) associated with a given setting instead of the last control encountered when iterating over all controls, as this ensures the first control in a `nav_menu` section is focused rather than the last one.
Props westonruter, sirbrillig.
See #27403.
Fixes#39101.
Built from https://develop.svn.wordpress.org/trunk@39622
git-svn-id: http://core.svn.wordpress.org/trunk@39562 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Currently, the "Collapse menu" item is not focusable and keyboard users can't collapse/expand the admin menu. This aims to fix it so that screen readers no longer announce it as a clickable but it remains unfocusable and thus unusable. So it's now a button.
Quoting joedolson at WordCamp Chicago 2014:
"If it's supposed to act like a button, it should be a button."
Also includes a grunt:precommit run that picked up some postcss changes to src/wp-includes/css/customize-preview.css
Fixes#29958.
Props ajercia, ipm-frommen for an iterative patch, valendesigns for an iterative patch, GaryJ for feedback, joedolson for feedback, helen for feedback
Built from https://develop.svn.wordpress.org/trunk@39141
git-svn-id: http://core.svn.wordpress.org/trunk@39081 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This is a great goal for core, and is close, but it is not in shape to be shipped for 4.7 and there is not enough time left in the development cycle to alter and polish sufficiently. There are bugs, but more than that, there are more fundamental questions around the use of existing UI, general UX, and how findable themes are (not) on the .org side.
see #37661.
Built from https://develop.svn.wordpress.org/trunk@39140
git-svn-id: http://core.svn.wordpress.org/trunk@39080 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Andrea Fercia
Pascal Birchler
Weston Ruter
Sergey Biryukov
Andrew Ozz
Adam Silverstein
Scott Taylor
James Nylen
Peter Wilson
Dominik Schilling
Konstantin Obenland
Aaron Campbell
John Blackbourn
Dion Hulse
Aaron Jorbin
Helen Hou-Sandí