-
Notifications
You must be signed in to change notification settings - Fork 383
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve story page background media with image srcset, reduced image size, and a11y text #3006
Merged
swissspidy
merged 15 commits into
develop
from
add/amp-story-page-background-image-srcset
Aug 20, 2019
Merged
Changes from 8 commits
Commits
Show all changes
15 commits
Select commit
Hold shift + click to select a range
ea3d577
Use img instead of amp-img for amp-story-page background image
westonruter 32831f5
Add media alt/title to amp-story-page background media
westonruter bea38a4
Allow object-position and layout attributes on img elements for Kses
westonruter 28fc9be
Reduce amp_story_page image size height from 1440 to 1280
westonruter ec8226e
Eliminate manual image size selection since srcset now picks the righ…
westonruter 4fc5d7a
Add deprecation for amp-story-page block.
miina a8a5d1b
Switch src attribute's position for causing less changes in templates.
miina 48caf6b
Update templates.
miina 9e96dfe
Rely on srcset to select best image size; only add Story Page as avai…
westonruter b6e60ec
Merge develop & resolve conflicts.
miina 1302353
Bump template version.
miina 0640536
Fix block validation issues in templates
swissspidy 16d5aae
Use XPath for CTA block test
swissspidy ee8393f
Revert "Use XPath for CTA block test"
swissspidy 7745774
Temporarily skip flaky test
swissspidy File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
149 changes: 149 additions & 0 deletions
149
assets/src/stories-editor/blocks/amp-story-page/deprecated.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { InnerBlocks } from '@wordpress/block-editor'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { | ||
| addBackgroundColorToOverlay, | ||
| } from '../../helpers'; | ||
| import { | ||
| IMAGE_BACKGROUND_TYPE, | ||
| VIDEO_BACKGROUND_TYPE, | ||
| } from '../../constants'; | ||
|
|
||
| const blockAttributes = { | ||
| anchor: { | ||
| source: 'attribute', | ||
| selector: 'amp-story-page', | ||
| attribute: 'id', | ||
| }, | ||
| mediaAlt: { | ||
| type: 'string', | ||
| }, | ||
| mediaId: { | ||
| type: 'number', | ||
| }, | ||
| mediaUrl: { | ||
| type: 'string', | ||
| source: 'attribute', | ||
| selector: 'amp-story-grid-layer[template="fill"] > amp-img, amp-story-grid-layer[template="fill"] > amp-video', | ||
| attribute: 'src', | ||
| }, | ||
| mediaType: { | ||
| type: 'string', | ||
| }, | ||
| poster: { | ||
| type: 'string', | ||
| }, | ||
| focalPoint: { | ||
| type: 'object', | ||
| }, | ||
| autoAdvanceAfter: { | ||
| type: 'string', | ||
| }, | ||
| autoAdvanceAfterDuration: { | ||
| type: 'number', | ||
| }, | ||
| autoAdvanceAfterMedia: { | ||
| type: 'string', | ||
| }, | ||
| backgroundColors: { | ||
| default: '[]', | ||
| }, | ||
| overlayOpacity: { | ||
| default: 100, | ||
| }, | ||
| }; | ||
|
|
||
| const SaveV120 = ( { attributes } ) => { | ||
| const { | ||
| anchor, | ||
| focalPoint, | ||
| overlayOpacity, | ||
| mediaUrl, | ||
| mediaType, | ||
| poster, | ||
| autoAdvanceAfter, | ||
| autoAdvanceAfterDuration, | ||
| autoAdvanceAfterMedia, | ||
| } = attributes; | ||
|
|
||
| const backgroundColors = JSON.parse( attributes.backgroundColors ); | ||
|
|
||
| let advanceAfter; | ||
|
|
||
| if ( [ 'auto', 'time' ].includes( autoAdvanceAfter ) && autoAdvanceAfterDuration ) { | ||
| advanceAfter = parseInt( autoAdvanceAfterDuration ) + 's'; | ||
| } else if ( 'media' === autoAdvanceAfter ) { | ||
| advanceAfter = autoAdvanceAfterMedia; | ||
| } | ||
|
|
||
| let overlayStyle = {}; | ||
| if ( 0 < backgroundColors.length ) { | ||
| overlayStyle = addBackgroundColorToOverlay( overlayStyle, backgroundColors ); | ||
| overlayStyle.opacity = overlayOpacity / 100; | ||
| } | ||
|
|
||
| const imgStyle = { | ||
| objectPosition: IMAGE_BACKGROUND_TYPE === mediaType && focalPoint ? `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%` : 'initial', | ||
| }; | ||
|
|
||
| return ( | ||
| <amp-story-page style={ { backgroundColor: '#ffffff' } } id={ anchor } auto-advance-after={ advanceAfter }> | ||
| { | ||
| mediaUrl && ( | ||
| <amp-story-grid-layer template="fill"> | ||
| { IMAGE_BACKGROUND_TYPE === mediaType && ( | ||
| <amp-img layout="fill" src={ mediaUrl } style={ imgStyle } /> | ||
| ) } | ||
| { VIDEO_BACKGROUND_TYPE === mediaType && ( | ||
| <amp-video layout="fill" src={ mediaUrl } poster={ poster } muted autoplay loop /> | ||
| ) } | ||
| </amp-story-grid-layer> | ||
| ) | ||
| } | ||
| <amp-story-grid-layer template="fill" style={ overlayStyle }></amp-story-grid-layer> | ||
| <InnerBlocks.Content /> | ||
| </amp-story-page> | ||
| ); | ||
| }; | ||
|
|
||
| SaveV120.propTypes = { | ||
| attributes: PropTypes.shape( { | ||
| anchor: PropTypes.string, | ||
| backgroundColors: PropTypes.string, | ||
| mediaAlt: PropTypes.string, | ||
| mediaId: PropTypes.number, | ||
| mediaType: PropTypes.string, | ||
| mediaUrl: PropTypes.string, | ||
| focalPoint: PropTypes.shape( { | ||
| x: PropTypes.number.isRequired, | ||
| y: PropTypes.number.isRequired, | ||
| } ), | ||
| overlayOpacity: PropTypes.number, | ||
| poster: PropTypes.string, | ||
| autoAdvanceAfter: PropTypes.string, | ||
| autoAdvanceAfterDuration: PropTypes.number, | ||
| autoAdvanceAfterMedia: PropTypes.string, | ||
| } ).isRequired, | ||
| }; | ||
|
|
||
| export default [ | ||
| { | ||
| attributes: { | ||
| ...blockAttributes, | ||
| deprecated: { | ||
| default: '1.2.0', | ||
| }, | ||
| }, | ||
| save: SaveV120, | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@kienstra This appears no longer to be necessary when the
srcsetis present.Originated in 0bd76bc
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, that makes sense.