Commit Graph

46 Commits

Author SHA1 Message Date
Andrea Fercia 6a9bcaeaa9 Accessibility: Improve accessibility of all the media views form controls.
- changes the media views form controls to have explicitly associated labels with for/id attributes
- adds a few missing labels / aria-labels
- improves a few existing labels / aria-labels
- improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes
- improves the image custom size input fields and their labelling
- adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies
- swaps the columns source order in the image details template, to make visual and DOM order match
- swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match
- gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right
- merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload")
- makes the "upload-ui" consistent across the media views
- hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner
- adds comments to all the media templates to clarify their usage
- slightly increases vertical spacing between form fields in the media sidebar
- removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4
- removes some CSS still targeting Internet Explorer 7 and 8

Fixes #47141.
Fixes #47122.

Built from https://develop.svn.wordpress.org/trunk@45499


git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 20:45:02 +00:00
Weston Ruter 955d5b0ab1 Widgets: Prevent MediaElement.js player from overflowing sidebar in Audio widget.
Props bradyvercher.
See #39686.
Fixes #42244.

Built from https://develop.svn.wordpress.org/trunk@41886


git-svn-id: http://core.svn.wordpress.org/trunk@41720 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-10-16 23:02:47 +00:00
Mel Choyce f44ed386c1 Media: Fix an issue where audio players overflow playlist containers.
Props celloexpressions.
Fixes #41844.

Built from https://develop.svn.wordpress.org/trunk@41838


git-svn-id: http://core.svn.wordpress.org/trunk@41672 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-10-12 03:55:46 +00:00
Andrea Fercia d8ea080526 Accessibility: Change all the `#f00` and `red` to the official WordPress accent red.
WordPress should exclusively use colors from the official colors palette, see
https://make.wordpress.org/design/handbook/design-guide/foundations/colors/
Partially addresses accessibility color contrast ratio issues.

See #35622.

Built from https://develop.svn.wordpress.org/trunk@41711


git-svn-id: http://core.svn.wordpress.org/trunk@41545 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-10-03 16:03:32 +00:00
Weston Ruter 7af3b92736 Media: Upgrade MediaElement.js from 2.22.0 to 4.2.3.
Props rafa8626, grosbouff, westonruter, azaozz, Plastikschnitzer for testing.
See #39686.

Built from https://develop.svn.wordpress.org/trunk@41198


git-svn-id: http://core.svn.wordpress.org/trunk@41038 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-08-01 04:43:51 +00:00
Andrea Fercia 691d649329 Media: Remove the custom styling for the MediaElementJS controls offscreen text.
This offscreen text is not meant to be revealed on focus and just acts as fallback
for assistive technologies that don't support `aria-label` and `role="slider"`.
Also, revealing it on focus has proven over time to be very fragile and to cause
unexpected layout issues.

See #30281.
Fixes #40707.

Built from https://develop.svn.wordpress.org/trunk@40642


git-svn-id: http://core.svn.wordpress.org/trunk@40503 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-05-11 22:29:42 +00:00
Andrea Fercia d33301821b Buttons: Improve the `.button-link` CSS class for link-like buttons.
Updates `.button-link` adding color and underline to make link-like buttons look
like links by default. Introduces `.button-link-delete` as a modifier, stackable
CSS class for red button-links.

Props Cheffheid, afercia.

See #34242.
Fixes #35126.

Built from https://develop.svn.wordpress.org/trunk@40052


git-svn-id: http://core.svn.wordpress.org/trunk@39989 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-02-09 16:47:44 +00:00
Andrea Fercia a71f14b8d9 Accessibility: Reduce the WordPress shades of grey, Episode 3.
Also, removes some no more used CSS.

See #35783.
Built from https://develop.svn.wordpress.org/trunk@36904


git-svn-id: http://core.svn.wordpress.org/trunk@36872 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-03-09 19:51:26 +00:00
Helen Hou-Sandí 28c77bec72 RIP `#21759b`, the old WordPress Blue.
The final lingering instances were all for hidden accessibility helper text.

fixes #34388.

Built from https://develop.svn.wordpress.org/trunk@35340


git-svn-id: http://core.svn.wordpress.org/trunk@35306 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-10-21 18:36:28 +00:00
Sergey Biryukov bffe6a63ba Make curly quotes in playlist item title translatable.
fixes #33391.
Built from https://develop.svn.wordpress.org/trunk@33844


git-svn-id: http://core.svn.wordpress.org/trunk@33812 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-09-01 13:50:21 +00:00
Scott Taylor b19bb99853 Playlists, for `.wp-playlist-item-title` elements: move the curly quotes to CSS pseudo-element `content`, making them easier to override or remove.
Fixes #33391.

Built from https://develop.svn.wordpress.org/trunk@33643


git-svn-id: http://core.svn.wordpress.org/trunk@33610 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-08-19 05:51:25 +00:00
Scott Taylor 72bf48f0b9 In Media microtemplates after [32467], use `<button>` instead of `<a>` for several more non-links.
Props afercia.
Fixes #26550.

Built from https://develop.svn.wordpress.org/trunk@32952


git-svn-id: http://core.svn.wordpress.org/trunk@32923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-06-26 05:01:24 +00:00
Helen Hou-Sandí bfda508c18 Update more instances of default admin blues and grays.
props hugobaeta.
fixes #31234.

Built from https://develop.svn.wordpress.org/trunk@32051


git-svn-id: http://core.svn.wordpress.org/trunk@32030 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-05 21:20:27 +00:00
Scott Taylor e4952687f6 Audio previews need top margin on Edit Media screen.
Fixes #31524.

Built from https://develop.svn.wordpress.org/trunk@31634


git-svn-id: http://core.svn.wordpress.org/trunk@31615 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-03-05 22:45:26 +00:00
Scott Taylor f492a8f7dc In response to regressions on .com, fix MEjs styles for screen reader text and overflow on the volume slider.
Props obenland.
See #30281.

Built from https://develop.svn.wordpress.org/trunk@30907


git-svn-id: http://core.svn.wordpress.org/trunk@30897 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-12-16 15:13:24 +00:00
Scott Taylor 3d8e31fb82 Don't hardcode `height` for videos - this was a workaround for MediaElement internals causing problems. Responsive videos now work properly and don't cause extra whitespace.
Fixes MediaElement by hand in the interim: https://github.com/johndyer/mediaelement/pull/1337
Video playlists were completely broken by this.

Fixes #30078.


Built from https://develop.svn.wordpress.org/trunk@30082


git-svn-id: http://core.svn.wordpress.org/trunk@30082 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-10-29 00:47:24 +00:00
Scott Taylor 067feb9691 Remember when we added the `style` attribute to playlists? Fix `dark`.
Props karpstrucking.
Fixes #29530.

Built from https://develop.svn.wordpress.org/trunk@29814


git-svn-id: http://core.svn.wordpress.org/trunk@29580 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-10-02 05:28:16 +00:00
Scott Taylor 149346ff6e MCE View sandboxes:
* Use a `MutationObserver` to listen to the `body` class of the parent editor frame.
* In `wpview_media_sandbox_styles()`, only return the MEjs stylesheets.
* In `wp_ajax_parse_media_shortcode()` and `wp_ajax_parse_embed()`, return an object instead of an HTML blob to allow passing `body` and `head` separately	

Props avryl, azaozz.
Fixes #29048.

Built from https://develop.svn.wordpress.org/trunk@29615


git-svn-id: http://core.svn.wordpress.org/trunk@29389 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-26 04:46:15 +00:00
Scott Taylor d6213d64a5 After [29543], the iframe sandboxes for media need to load Open Sans. Playlists look aggressively bad without it. Adds font styles for the body.
See #29048.

Built from https://develop.svn.wordpress.org/trunk@29564


git-svn-id: http://core.svn.wordpress.org/trunk@29338 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-21 03:36:16 +00:00
Scott Taylor 28c22db07d Video:
* Don't set height on responsive `<div>` when generating markup
* Move some CSS rules from the style tag to `.wp-video`
* Use Video Details view event delegation instead of click events delegated from `<body>`
* Fix some CSS rule collision in the grid modal

See #29110.

Built from https://develop.svn.wordpress.org/trunk@29456


git-svn-id: http://core.svn.wordpress.org/trunk@29234 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-09 19:39:15 +00:00
Scott Taylor 93fdff3581 Simplify creation of audio, video, and playlist MCE views by placing them in iframe sandboxes.
Wins:
* Eliminates duplication of code between PHP and JS
* Views can load JS without messing with TinyMCE and scope
* MEjs doesn't break when it loads a file plugin-mode. This allows any file type the MEjs supports to play in MCE views.
* YouTube now works as the source for video.
* Users can still style the views, editor stylesheets are included in these sandboxes.
* Audio and Video URLs and `[embed]`s are no longer broken.
* Remove the crazy compat code necessary to determine what file types play in what browser.
* Remove unneeded Underscore templates.
* Remove the compat code for playlists.

See #28905.

Built from https://develop.svn.wordpress.org/trunk@29179


git-svn-id: http://core.svn.wordpress.org/trunk@28963 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-15 22:18:14 +00:00
Scott Taylor 4ad56ce548 Make sure the audio player's time tooltip is visible in the media modal for Audio Details.
Fixes #28453.


Built from https://develop.svn.wordpress.org/trunk@28863


git-svn-id: http://core.svn.wordpress.org/trunk@28663 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-06-26 20:29:14 +00:00
Scott Taylor 17271702ca In the spirit of [27622], add a few CSS rules to ensure that videos will be responsive, regardless of theme.
Props Funkatronic.
Fixes #28414.

Built from https://develop.svn.wordpress.org/trunk@28650


git-svn-id: http://core.svn.wordpress.org/trunk@28468 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-06-02 00:40:15 +00:00
Scott Taylor 60f395e4c2 Update the default (WP-defined) styles for MediaElement players to be more in-line with our flat aesthetic. Use the new official colors.
Props celloexpressions.
Fixes #27516.


Built from https://develop.svn.wordpress.org/trunk@28365


git-svn-id: http://core.svn.wordpress.org/trunk@28193 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-05-11 02:23:14 +00:00
Scott Taylor d06c353995 MediaElement players need `clear: both` to play nice with adjacent floated elements.
Fixes #27385.


Built from https://develop.svn.wordpress.org/trunk@28361


git-svn-id: http://core.svn.wordpress.org/trunk@28189 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-05-11 00:14:14 +00:00
Scott Taylor 6deb34ebb3 Alter the layout of the checkboxes in the modal view for Audio/Video Details to allow translations more room to breathe.
See #27893.


Built from https://develop.svn.wordpress.org/trunk@28184


git-svn-id: http://core.svn.wordpress.org/trunk@28015 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-22 20:29:14 +00:00
Scott Taylor c5c18d3848 Add `calc()` rules for `max-width` of playlist caption.
Props celloexpressions.
See #27923.


Built from https://develop.svn.wordpress.org/trunk@28174


git-svn-id: http://core.svn.wordpress.org/trunk@28005 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-20 05:10:15 +00:00
Scott Taylor 3a903b40af Support RTL properly when displaying playlists.
Props SergeyBiryukov.
See #27924.


Built from https://develop.svn.wordpress.org/trunk@28173


git-svn-id: http://core.svn.wordpress.org/trunk@28004 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-20 04:27:14 +00:00
Scott Taylor ec563e82ed Properly account for text overflow in `.wp-playlist-caption` by adding `display: block`.
Props celloexpressions.
See #27923.


Built from https://develop.svn.wordpress.org/trunk@28172


git-svn-id: http://core.svn.wordpress.org/trunk@28003 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-20 04:25:15 +00:00
Scott Taylor fd65d355a2 Add a compatibility layer in `wp-playlist.js` to avoid VM errors from MediaElement's plugin bridge in the TinyMCE views for playlists by suppressing playback for files whose mime-type is not supported in the user's browser natively.
This is similar to how audio and video shortcodes are handled: file types are whitelisted for native playback.

See #27892.


Built from https://develop.svn.wordpress.org/trunk@28171


git-svn-id: http://core.svn.wordpress.org/trunk@28002 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-20 03:53:15 +00:00
Scott Taylor 42a66ea424 Make playlist tracks keyboard-accessible.
Fixes #27644.


Built from https://develop.svn.wordpress.org/trunk@28023


git-svn-id: http://core.svn.wordpress.org/trunk@27853 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-07 22:28:16 +00:00
Scott Taylor 6ec61c7506 Call MediaElement's shim method for `setSrc()` when dynamically updating the playing source in playlists, which will properly set the source for mobile.
Make the labels for playlist items slightly smaller to account for size on mobile.

Fixes #27625.


Built from https://develop.svn.wordpress.org/trunk@27895


git-svn-id: http://core.svn.wordpress.org/trunk@27726 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 19:04:14 +00:00
Scott Taylor 7aaa878a6f Make `<audio>` elements in playlists responsive.
See #27625.


Built from https://develop.svn.wordpress.org/trunk@27894


git-svn-id: http://core.svn.wordpress.org/trunk@27725 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-04-01 18:47:14 +00:00
Scott Taylor b6ac65f07f Using percentages for playlist font-sizing was ambitious, but fell prey to `editor-style.css` in the admin. We have switched to using pixels. The editor styles were also forcing MediaElement players to inherit `font-family`, which was undesirable. And while we're at it, remove the top and bottom border from the playlist's list of tracks, which adds a dash of lovely to the playlist's default styles.
Props nacin for the addition of `&mdash;` in the playlist track list.
Fixes #27600.


Built from https://develop.svn.wordpress.org/trunk@27865


git-svn-id: http://core.svn.wordpress.org/trunk@27696 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-30 22:12:16 +00:00
Helen Hou-Sandí afbcf169b0 Set baseline colors for the light playlist skin. props kwight. fixes #27562.
Built from https://develop.svn.wordpress.org/trunk@27805


git-svn-id: http://core.svn.wordpress.org/trunk@27639 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-28 03:38:14 +00:00
Scott Taylor 0c34f4f136 Make the CSS selector for current playlist item `<img>` more specific so the width is properly constrained.
Hide the `<audio>` element in the playlist to prevent a flicker when loading - MEjs hides the audio element anyway.

See #27525.


Built from https://develop.svn.wordpress.org/trunk@27742


git-svn-id: http://core.svn.wordpress.org/trunk@27579 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-26 16:51:16 +00:00
Scott Taylor a17dd704c4 Create a new file, `media-audiovideo.js`, to house all of the audio and video JS code in core.
UX Changes:
* Don't add a menu item for "Add Audio|Video Source"
* In the Audio|Video Details modal, add buttons and some suggestive text for adding alternate playback sources
* Don't show "Create Audio|Video Playlist" menu items until the user has uploaded audio or video files

See #27437.


Built from https://develop.svn.wordpress.org/trunk@27608


git-svn-id: http://core.svn.wordpress.org/trunk@27451 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-19 05:31:15 +00:00
Scott Taylor e47bc77616 Load MediaElement's CSS when TinyMCE is loaded via `$mce_css` in `editor_settings()`. Add some baseline styles in `wp-content.css` for audio, video, and embed tags to ensure their `max-width` is `100%`, regardless of whether MEjs is implemented in TinyMCE.
See #27389.


Built from https://develop.svn.wordpress.org/trunk@27534


git-svn-id: http://core.svn.wordpress.org/trunk@27377 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-14 12:34:16 +00:00
Scott Taylor 394feb8f91 Add a class, `wp-playlist-playing`, to the currently loaded track when tracks are displayed. Add some subtle styles for light and dark playlist themes.
See #27321.


Built from https://develop.svn.wordpress.org/trunk@27489


git-svn-id: http://core.svn.wordpress.org/trunk@27333 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-10 00:15:14 +00:00
Scott Taylor f078f3e10e Video editing in the media modal:
* Add a state: `Add Subititles`
* Add `text/vtt` to the list of allowed mime-types, files end in `.vtt`. `.srt` files are served as `text/plain`.
* The content body of a video shortcode should be used for adding `<track>` elements only. This happens dynamically in the modal. If added by hand, they can still be parsed and managed.

See #27016.


Built from https://develop.svn.wordpress.org/trunk@27481


git-svn-id: http://core.svn.wordpress.org/trunk@27325 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-09 10:32:15 +00:00
Scott Taylor 8e2e99fd0c Since audio and video shortcodes don't point at actual attachments, don't persist the library's selection. Move the media instructions in the block that scrolls.
See #27016.


Built from https://develop.svn.wordpress.org/trunk@27480


git-svn-id: http://core.svn.wordpress.org/trunk@27324 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-09 06:24:15 +00:00
Scott Taylor f7af18e1d6 Audio/Video shortcodes in the media modal:
* Make a generic model, `wp.media.model.PostMedia`, which replaces `wp.media.model.PostAudio` and `wp.media.model.PostVideo`
* Make a generic library, `wp.media.controller.MediaLibrary`, which replaces `wp.media.controller.ReplaceVideo` and `wp.media.controller.ReplaceAudio`
* `wp.media.controller.MediaLibrary` is used to create new states that want to load a library filtered by type, making it incredibly simple to add states to frames. See `wp.media.view.MediaFrame.VideoDetails` and `wp.media.view.MediaFrame.AudioDetails`.

UX changes:

* Add the ability to manage HTML5 fallbacks - add additional `<source>`s or remove specific `<source>`s
* In the Video Details state, add the ability to select a poster image

See #27016.


Built from https://develop.svn.wordpress.org/trunk@27478


git-svn-id: http://core.svn.wordpress.org/trunk@27322 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-09 05:25:15 +00:00
Scott Taylor ff8844deae Add TinyMCE placeholders for `audio` and `video` shortcodes.
* Add `wp.media.mixin`.
* Add `wp.media.audio` and `wp.media.video`.
* Add `wp.media.model.PostAudio` and `wp.media.model.PostVideo`
* Add `wp.media.controller.AudioDetails` and `wp.media.controller.VideoDetails`.
* Add `wp.media.controller.ReplaceAudio` and `wp.media.controller.ReplaceVideo`.
* Add `wp.media.view.MediaFrame.AudioDetails` and `wp.media.view.MediaFrame.VideoDetails`.
* Add `wp.media.view.AudioDetails` and `wp.media.view.VideoDetails`.
* Update the `wpgallery` TinyMCE plugin.
* Display audio and video players in the media modal when shortcode is clicked.
* Provide a UI to edit shortcode attributes in the media modal.
* Provide a UI to replace the `src` media file in an `audio` or `video` shortcode.

See #27016.


Built from https://develop.svn.wordpress.org/trunk@27411


git-svn-id: http://core.svn.wordpress.org/trunk@27258 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-05 15:06:14 +00:00
Scott Taylor 943f295d2e Add core support for Playlists and Video Playlists.
* Playlists operate like galleries in the admin. 
* Provide default UI and JS support in themes using MediaElement and Backbone. 
* The shortcodes are clickable, editable, and configurable using the media modal. 
* Playlists support images for each item, whether or not the current theme supports images for `attachment:audio` and `attachment:video`
* Playlists respond to `$content_width` and resize videos accordingly.
* All playlist data is included inline, using a script tag with `type="application/json"`, allowing anyone to unenqueue the WP playlist JS and roll their own.
* Playlist styles are minimal and work out of the box in the last 5 default themes. They inherit and adapt to the current theme's font styles, and their rules are easily overrideable.

See #26631.


Built from https://develop.svn.wordpress.org/trunk@27239


git-svn-id: http://core.svn.wordpress.org/trunk@27096 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-02-24 18:08:16 +00:00
Andrew Nacin 6861353737 Set audio player to width: 100% and avoid breaking the layout in iOS when we fall back to a link.
props markjaquith, davidjlaietta.
fixes #24896.



git-svn-id: http://core.svn.wordpress.org/trunk@24948 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-08-01 14:48:39 +00:00
Dion Hulse 566e3764c3 Move the Mediaelement.js include into the wp-includes/js folder, rather than wp-includes directly. Fixes the mediaplayer in browsers which don't support <audio> directly.
Props DrewAPicture See #23282.


git-svn-id: http://core.svn.wordpress.org/trunk@23732 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-03-16 08:43:19 +00:00