Previously, the theme's CSS feature query for `object-fit` overrode styles it shouldn't have on interior pages.
This moves the feature query farther down in the stylesheet so it takes precedence in the cascade in supported browsers, and applies the appropriate selector for the interior pages. In browsers that don't support feature queries or `object-fit`, the fallback styles are still applied. The problem was that the rules had the same specificity, so this way, the cascade takes over properly. The transforms and position changes for fallbacks are still needed in browsers that don't support `object-fit` and feature queries.
Merge of [39495] to the 4.7 branch.
Props peterwilsoncc, davidakennedy.
See #39073.
Built from https://develop.svn.wordpress.org/branches/4.7@39497
git-svn-id: http://core.svn.wordpress.org/branches/4.7@39437 1a063a9b-81f0-0310-95a4-ce76da25c4cd
The theme uses a hack to help the video header and header image fill the available space. This centers around `max-width: 1000%;`. It causes visual issues (zooming of the header video or image) for all users though.
This fixes that with CSS Features Queries. The hack remains for browsers that don't support Feature Queries and `object-fit`. Browsers that do support both get a better experience with a more reliable styling of the video and image header container.
Props laurelfulford, peterwilsoncc.
Fixes#39035 for the 4.7 branch.
Built from https://develop.svn.wordpress.org/branches/4.7@39485
git-svn-id: http://core.svn.wordpress.org/branches/4.7@39425 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This simplifies the line `$( siteNavigation.closest( '.main-navigation' ), this ).toggleClass( 'toggled-on' );` to `$( siteNavContain ).toggleClass( 'toggled-on' );`, since `this` is the clicked button, so the extra context isn't needed.
Props afercia, laurelfulford.
Fixes#38992 for the 4.7 branch.
Built from https://develop.svn.wordpress.org/branches/4.7@39423
git-svn-id: http://core.svn.wordpress.org/branches/4.7@39363 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This ensures that a standard header is shown on the front page whenever
a header video is set without a header image if the video doesn't load,
e.g., on mobile sizes or if the JS doesn't fire.
This adds a new class, `.has-header-video` that is added whenever the
`wp-custom-header-video-loaded` event is fired, which is then used to style
the custom headers along with `.has-header-image` whenever a header image
is available. This also changes the class name on the custom header media
wrapping `div` from `.custom-header-image` to `.custom-header-media`.
Props laurelfulford, joemcgill.
Fixes#38995 for 4.7.
Built from https://develop.svn.wordpress.org/branches/4.7@39414
git-svn-id: http://core.svn.wordpress.org/branches/4.7@39354 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Show default labels for nav menu item as placeholders in a control's label field instead of showing blank.
* Store empty string as label instead of copying default labels.
* Prevent labels for post type archive items from being dropped in preview.
* Also ensure that the item type label is displayed on nav menu item controls for settings that are loaded from an existing changeset.
Amends [38618].
See #38015.
Fixes#38955 for 4.7 branch.
Built from https://develop.svn.wordpress.org/branches/4.7@39395
git-svn-id: http://core.svn.wordpress.org/branches/4.7@39335 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Featured image support means that attachments can now be imported. Media can be sideloaded from within theme or plugin directories. Like other posts, attachments are auto-drafts until customizer changes are published, and are not duplicated when they already exist in the customized state. Attachment IDs can be used for any number of purposes, much like post IDs. Twenty Seventeen now includes 3 images used as featured images to best showcase the multi-section homepage setup.
As featured image IDs are stored in post meta, it also made sense to add support for page templates. Twenty Seventeen does not include any such templates, but the functionality can be quite important for displaying themes to their best effect.
props westonruter, helen, flixos90.
fixes#38615.
Built from https://develop.svn.wordpress.org/trunk@39346
git-svn-id: http://core.svn.wordpress.org/trunk@39286 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This bug occurred in any language where text wraps character-by-character, since those languages don't delimit words with spaces. In Japanese, Chinese and Korean, etc., it was possible for the label to be displayed vertically.
Props tg29359, afercia, odysseygate.
Fixes#38876.
Built from https://develop.svn.wordpress.org/trunk@39341
git-svn-id: http://core.svn.wordpress.org/trunk@39281 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This makes a few adjustments to CSS to bring them inline with WordPress
CSS coding standards including:
* Font weights should be defined using numeric values
* Do not pad parentheses with spaces
This also fixes a couple of typos to inline comments.
Props netweb for initial patch.
Fixes#38901.
Built from https://develop.svn.wordpress.org/trunk@39340
git-svn-id: http://core.svn.wordpress.org/trunk@39280 1a063a9b-81f0-0310-95a4-ce76da25c4cd
iOS disables this feature under the hood, but it also distorts the images – unlike other mobile devices that don't support it. So this adds a check for both `background-attachment: fixed` support or whether it’s an iOS device - passing it adds the class `background-fixed` which is used to add the proper styles.
It also lowers the media query so the parallax-like style is present on a wider range of screens since this bug can be better targeted and avoided. In this way, screens that aren't the offending devices aren't punished merely based on screen size.
Props joemcgill, laurelfulford, helen.
Fixes#38395.
Built from https://develop.svn.wordpress.org/trunk@39297
git-svn-id: http://core.svn.wordpress.org/trunk@39237 1a063a9b-81f0-0310-95a4-ce76da25c4cd
The `sizes` attribute was calculated incorrectly, resulting in the browser downloading the wrong resource. This filters the attribute to correct that.
Before the filter, the `img` contained:
`sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px"`
And after:
`sizes="100vw"`
Props joemcgill, transl8or.
Fixes#38847.
Built from https://develop.svn.wordpress.org/trunk@39291
git-svn-id: http://core.svn.wordpress.org/trunk@39231 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Following [39272], this uses the `header_video_settings` filter to modify
the default video header control markup and adds theme specific styles
for the play/pause button.
Props melchoyce, laurelfulford, joemcgill, davidakennedy, bradyvercher.
Fixes#38697.
Built from https://develop.svn.wordpress.org/trunk@39273
git-svn-id: http://core.svn.wordpress.org/trunk@39213 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Some widgets that require more configuration are not included, such as RSS and Custom Menu. Tag Cloud is also not included because fresh sites do not have any tags to display.
Also adds a search widget to a Twenty Seventeen footer widget area.
see #38615.
Built from https://develop.svn.wordpress.org/trunk@39261
git-svn-id: http://core.svn.wordpress.org/trunk@39201 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Use `postMessage` transport for header image settings by default when video headers are supported, and thus `the_custom_header_markup()` will necessarily be used (and thus a selective refresh partial will be available).
* Ensure that `the_custom_header_markup()` always outputs a container element in the customizer preview even if the header is empty.
* Ensure that edit shortcut appearing for custom header does not get positioned off-screen.
Props bradyvercher, westonruter.
See #38639.
Fixes#38737.
Built from https://develop.svn.wordpress.org/trunk@39227
git-svn-id: http://core.svn.wordpress.org/trunk@39167 1a063a9b-81f0-0310-95a4-ce76da25c4cd
When a page is scrolled, the top nav menu become fixed. Depending on the page content this caused issue where focused links or buttons may be hidden behind the nav menu.
Props afercia, davidakennedy, Fencer04
Fixes#38476
Built from https://develop.svn.wordpress.org/trunk@39225
git-svn-id: http://core.svn.wordpress.org/trunk@39165 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Toggles `has-header-image` body class in Customizer preview whenever images or videos are added or removed.
* Hides the `.custom-header-image`div in CSS when an image or video haven't been set so preview changes are smoother.
* Also fixes the main issues in #38391 – making the preview match.
Props bradyvercher.
Fixes#38627.
See #38391.
Built from https://develop.svn.wordpress.org/trunk@39220
git-svn-id: http://core.svn.wordpress.org/trunk@39160 1a063a9b-81f0-0310-95a4-ce76da25c4cd
IE9 doesn't understands `vh ` (vertical height) when inside of an `iframe`. Normally IE9 will understand `vh` as the vertical height relative to the viewport, but in an `iframe`, IE9 thinks the vertical height is relative to the size of the whole page. So this fixes that when the site is viewed in the Customizer preview – an `iframe`.
Props laurelfulford.
Fixes#38722.
Built from https://develop.svn.wordpress.org/trunk@39215
git-svn-id: http://core.svn.wordpress.org/trunk@39155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Dion Hulse
Dominik Schilling
Helen Hou-Sandí
Joe McGill
Weston Ruter
David A. Kennedy
Tammie Lister