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 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
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
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
* 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
The CSS property `background-attachment: fixed` is disabled in some mobile browsers for performance reasons. So here, the fix increases the breakpoint where the `background-attachment: fixed` is applied to the front page images. Doing this removes the fixed backgrounds and the issue from all smaller screens, but the downside is that it also removes the fixed backgrounds from smaller laptops. It's also possible future devices could fall into this breakpoint, but this seems to be the most practical solution.
Props laurelfulford.
Fixes#38395.
Built from https://develop.svn.wordpress.org/trunk@39176
git-svn-id: http://core.svn.wordpress.org/trunk@39116 1a063a9b-81f0-0310-95a4-ce76da25c4cd
The combination of font-size and weight for post navigation made lower case "i"s illegible in some cases. Using `15px` seemed to be the best choice all around. Also adjusts the spacing around the arrows a bit, since they touch the text on small screen sizes.
Props laurelfulford.
Fixes#38670.
Built from https://develop.svn.wordpress.org/trunk@39152
git-svn-id: http://core.svn.wordpress.org/trunk@39092 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This also reduces the number of browsers detected and patched with this fix. Most modern browsers have patched this common bug, where an anchor link does not move focus when clicked. Twenty Seventeen will only worry about older versions of Internet Explorer in this regard.
Props afercia, sami.keijonen.
See #38604.
Built from https://develop.svn.wordpress.org/trunk@39135
git-svn-id: http://core.svn.wordpress.org/trunk@39075 1a063a9b-81f0-0310-95a4-ce76da25c4cd
In -r39124, some additional issues were introduced:
* The 'overflow: hidden' on the `.site-header;` was added to prevent a side-scrolling issue, but it ended up cutting off the menu. It looks like the cause of the side-scroll was related to how the scroll down icon was rotated, so it's addressed by rotating the icon and not the `<a>`.
* Also, `min-height` doesn't play well with `display: table;` in Firefox. So it's addressed with just `height`.
Props laurelfulford, sami.keijonen.
See #38543.
Built from https://develop.svn.wordpress.org/trunk@39129
git-svn-id: http://core.svn.wordpress.org/trunk@39069 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Makes sure the page layout setting also applies to pages, and is not completely hidden from them when a sidebar widget is present. Pages do not have a sidebar, so that was incorrect.
* Updates description in Customizer for brevity and accuracy.
* Applies setting to archive pages as well.
* Updates CSS to reflect changes.
Props celloexpressions, laurelfulford.
Fixes#38538.
Built from https://develop.svn.wordpress.org/trunk@39078
git-svn-id: http://core.svn.wordpress.org/trunk@39020 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Hides page numbers visually at smaller screen sizes.
* Reduced padding around `.wrap` class on smaller screens.
* Fixed issue with the page numbers not displaying the underline on `:hover`. This has been updated in the custom colors files, too.
Props laurelfulford, caspie.
Fixes#38394.
Built from https://develop.svn.wordpress.org/trunk@38996
git-svn-id: http://core.svn.wordpress.org/trunk@38938 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Rename customizer JS files to customize-preview.js and customize-controls.js to align with the core file naming and make it clearer where each file runs.
* Only show the colorscheme_hue control when there's a custom color scheme.
* Update preview JS handling for revised front page section handling, see below.
* Remove all references to "Theme Customizer" in code comments. It hasn't been called that since before 4.0.
* Clarify the purpose of the JS files by updated the code comments in the file headers.
* Improve code readability.
* Make the arbitrary number of front page sections filterable, for UI registration and output.
* Rename twentyseventeen_sanitize_layout to twentyseventeen_sanitize_page_layout to be clearer about what it sanitizes in case child themes or plugins consider reusing it.
* Rename page_options setting/control to page_layout as that's more reflective of what that option does; and again, helps for potential extensions.
* Make the page layout option contextual to pages and the sidebar being inactive, as the option only applies when there is no sidebar (per its description).
* Condense options into a single section.
* Add selective refresh for front page sections.
* Locate active_callback functions within customizer.php so that they're easier to find when editing customizer registrations, similarly to sanitize callbacks.
* Adjust the styling for placeholders for panels that aren't active.
* Ensure that the new visible edit shortcuts don't have any issues.
Props celloexpressions.
Fixes#38426.
Built from https://develop.svn.wordpress.org/trunk@38986
git-svn-id: http://core.svn.wordpress.org/trunk@38929 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This adds the ability for themes to add support for videos in custom headers
by passing `'video' => true` as an argument when adding theme support for
custom headers.
Custom video headers are managed through the “Header Visuals” (i.e. “Header Image”)
panel in the Customizer where you can select a video from the media library or set a
URL to an external video (YouTube for now) for use in custom headers.
This introduces several new functions:
`has_header_video()` – Check whether a header video is set or not.
`get_header_video_url()` – Retrieve header video URL for custom header.
`the_header_video_url()` – Display header video URL.
`get_header_video_settings()` – Retrieve header video settings.
`has_custom_header()` – Check whether a custom header is set or not.
`get_custom_header_markup()` – Retrieve the markup for a custom header.
`the_custom_header_markup()` – Print the markup for a custom header.
And a new file, `wp-includes/js/wp-custom-header.js` that handles loading videos
in custom headers.
This also enables video headers in the Twenty Seventeen and Twenty Fourteen themes.
Props davidakennedy, celloexpressions, bradyvercher, laurelfulford, joemcgill.
Fixes#38172.
Built from https://develop.svn.wordpress.org/trunk@38985
git-svn-id: http://core.svn.wordpress.org/trunk@38928 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Removes the left padding on the first cell in a row, and the right padding on the last cell in each row - the padding is still there between cells, so the contents don't meet.
* Does the opposite for RTL, and fixes some spacing issues.
* Updates the editor styles to match.
Props laurelfulford, snacking.
Fixes#38447.
Built from https://develop.svn.wordpress.org/trunk@38963
git-svn-id: http://core.svn.wordpress.org/trunk@38906 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Fixes the display issues with the header. The header doesn't look exactly like it does in newer browsers, but it's closer.
* Gets the font sizes a bit more consistent with how it looks like other browsers.
* IE8 doesn't support SVGs, so it's using the fallback styles for some of the icons. The fallbacks are limited to the absolutely necessary icons - so there is one for the submenu dropdown toggle icon, but not for the little 'hamburger' and X that sit in front of the 'menu' button.
Props laurelfulford.
Fixes#38472.
Built from https://develop.svn.wordpress.org/trunk@38962
git-svn-id: http://core.svn.wordpress.org/trunk@38905 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This brings the custom colors CSS in line with the stylesheet. Some selectors were missing since many changes occurred in `style.css` a few days before the original merge to Core.
Props celloexpressions, laurelfulford.
Fixes#38389.
Built from https://develop.svn.wordpress.org/trunk@38918
git-svn-id: http://core.svn.wordpress.org/trunk@38861 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Currently, it's hard to output an SVG in the comment function without a lot of extra effort. So this adds a simple border to the author avatar and removes previous code related to SVGs and/or Genericons.
Props laurelfulford.
Fixes#38403.
Built from https://develop.svn.wordpress.org/trunk@38865
git-svn-id: http://core.svn.wordpress.org/trunk@38808 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Aaron Campbell
Dominik Schilling
Helen Hou-Sandí
Joe McGill
Weston Ruter
David A. Kennedy
Tammie Lister