From b0512309f9cda3d29197d22a18666404cbfe2761 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Wed, 23 May 2018 09:56:58 +0300 Subject: [PATCH 01/13] Restore amp-timeago block. --- blocks/amp-timeago/index.js | 170 ++++++++++++++++++++++++++++++++++++ blocks/index.js | 1 + package-lock.json | 15 ++++ package.json | 1 + 4 files changed, 187 insertions(+) create mode 100644 blocks/amp-timeago/index.js diff --git a/blocks/amp-timeago/index.js b/blocks/amp-timeago/index.js new file mode 100644 index 00000000000..229c1dd73f6 --- /dev/null +++ b/blocks/amp-timeago/index.js @@ -0,0 +1,170 @@ +/* global moment */ + +/** + * Internal block libraries. + */ +const { __ } = wp.i18n; +const { + registerBlockType +} = wp.blocks; +const { + InspectorControls, + BlockAlignmentToolbar, + BlockControls +} = wp.editor; +const { + DateTimePicker, + PanelBody, + TextControl, + SelectControl +} = wp.components; +import timeago from 'timeago.js'; + +/** + * Register block. + */ +export default registerBlockType( + 'amp/amp-timeago', + { + title: __( 'AMP Timeago' ), + category: 'common', + icon: 'backup', + keywords: [ + __( 'Time difference' ), + __( 'Time ago' ), + __( 'Date' ) + ], + + attributes: { + align: { + type: 'string' + }, + cutoff: { + type: 'number' + }, + dateTime: { + type: 'string' + }, + ampLayout: { + type: 'string' + }, + width: { + type: 'number' + }, + height: { + type: 'number' + } + }, + + getEditWrapperProps( attributes ) { + const { align } = attributes; + if ( 'left' === align || 'right' === align || 'center' === align ) { + return { 'data-align': align }; + } + }, + + edit( { attributes, isSelected, setAttributes } ) { + const { align, ampLayout, cutoff, height, width } = attributes; + let timeAgo; + if ( attributes.dateTime ) { + if ( attributes.cutoff && attributes.cutoff < Math.abs( moment( attributes.dateTime ).diff( moment(), 'seconds' ) ) ) { + timeAgo = moment( attributes.dateTime ).format( 'dddd D MMMM HH:mm' ); + } else { + timeAgo = timeago().format( attributes.dateTime ); + } + } else { + timeAgo = timeago().format( new Date() ); + setAttributes( { dateTime: moment( moment(), moment.ISO_8601, true ).format() } ); + } + + const ampLayoutOptions = [ + { value: '', label: 'Responsive' }, // Default for amp-timeago. + { value: 'fixed', label: 'Fixed' }, + { value: 'fixed-height', label: 'Fixed height' } + ]; + + return [ + isSelected && ( + + + ( setAttributes( { dateTime: moment( value, moment.ISO_8601, true ).format() } ) ) } // eslint-disable-line + /> + ( setAttributes( { ampLayout: value } ) ) } + /> + ( setAttributes( { width: value } ) ) } + /> + ( setAttributes( { height: value } ) ) } + /> + ( setAttributes( { cutoff: value } ) ) } + /> + + + ), + + { + setAttributes( { align: nextAlign } ); + } } + controls={ [ 'left', 'center', 'right' ] } + /> + , + + ]; + }, + + save( { attributes } ) { + let timeagoProps = { + layout: 'responsive', + className: 'align' + ( attributes.align || 'none' ), + datetime: attributes.dateTime, + locale: 'en' + }; + if ( attributes.cutoff ) { + timeagoProps.cutoff = attributes.cutoff; + } + if ( attributes.ampLayout ) { + switch ( attributes.ampLayout ) { + case 'fixed-height': + if ( attributes.height ) { + timeagoProps.height = attributes.height; + timeagoProps.layout = attributes.ampLayout; + } + break; + case 'fixed': + if ( attributes.height && attributes.width ) { + timeagoProps.height = attributes.height; + timeagoProps.width = attributes.width; + timeagoProps.layout = attributes.ampLayout; + } + break; + } + } + return ( + { moment( attributes.dateTime ).format( 'dddd D MMMM HH:mm' ) } + ); + } + } +); diff --git a/blocks/index.js b/blocks/index.js index 676aa948d04..bbb0b7e82e1 100644 --- a/blocks/index.js +++ b/blocks/index.js @@ -2,3 +2,4 @@ * Import blocks. */ import './amp-mathml'; +import './amp-timeago'; diff --git a/package-lock.json b/package-lock.json index 21c9a5167ad..36a36f1c392 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,12 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@types/jquery": { + "version": "2.0.49", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-2.0.49.tgz", + "integrity": "sha512-/9xLnYmohN/vD2gDnLS4cym8TUmrJu7DvZa/LELKzZjdPsvWVJiedsdu2SXNtb/DA7FGimqL2g0IoyhbNKLl8g==", + "dev": true + }, "abbrev": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", @@ -5808,6 +5814,15 @@ "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=", "dev": true }, + "timeago.js": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/timeago.js/-/timeago.js-3.0.2.tgz", + "integrity": "sha1-MqZ+fA2IfqQspYjTquJvd95edsw=", + "dev": true, + "requires": { + "@types/jquery": "^2.0.40" + } + }, "timers-browserify": { "version": "2.0.10", "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.10.tgz", diff --git a/package.json b/package.json index 07950afc820..490368861d8 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "grunt-contrib-jshint": "^1.1.0", "grunt-shell": "^2.1.0", "grunt-wp-deploy": "^1.2.1", + "timeago.js": "3.0.2", "webpack": "^3.12.0" }, "main": "blocks/index.js", From e018851d5bf45ea3d5eedf210186e4f4b7284a58 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Wed, 23 May 2018 10:01:57 +0300 Subject: [PATCH 02/13] Fix eslint. --- assets/js/amp-editor-blocks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/amp-editor-blocks.js b/assets/js/amp-editor-blocks.js index 2aa59766ff2..2be3f238ef9 100644 --- a/assets/js/amp-editor-blocks.js +++ b/assets/js/amp-editor-blocks.js @@ -1,7 +1,7 @@ /* exported ampEditorBlocks */ /* eslint no-magic-numbers: [ "error", { "ignore": [ 1, -1, 0 ] } ] */ -var ampEditorBlocks = ( function() { +var ampEditorBlocks = ( function() { // eslint-disable-line no-unused-vars var component, __; __ = wp.i18n.__; From 9529d2cc9ee6e692bf6e97338371d144b62af8f2 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Wed, 23 May 2018 15:31:34 -0700 Subject: [PATCH 03/13] Add class to list of attributes always allowed by Kses in AMP components --- includes/admin/class-amp-editor-blocks.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/includes/admin/class-amp-editor-blocks.php b/includes/admin/class-amp-editor-blocks.php index a31aceb1d60..cae0be9934f 100644 --- a/includes/admin/class-amp-editor-blocks.php +++ b/includes/admin/class-amp-editor-blocks.php @@ -57,12 +57,14 @@ public function whitelist_block_atts_in_wp_kses_allowed_html( $tags, $context ) $tags[ $amp_block ] = array(); } + // @todo The global attributes included here should be matched up with what is actually used by each block. $tags[ $amp_block ] = array_merge( array_fill_keys( array( 'layout', 'width', 'height', + 'class', ), true ), From 470c809a64d2d5ba6ffa4abea5e6e9ad4780cb50 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Mon, 28 May 2018 11:48:06 +0300 Subject: [PATCH 04/13] Get param values from saved attributes. --- blocks/amp-brid-player/index.js | 40 ++++++++++++++++++----- blocks/amp-ima-video/index.js | 35 ++++++++++++++++---- blocks/amp-jwplayer/index.js | 33 +++++++++++++++---- blocks/amp-mathml/index.js | 5 ++- blocks/amp-o2-player/index.js | 35 ++++++++++++++++---- blocks/amp-ooyala-player/index.js | 35 ++++++++++++++++---- blocks/amp-reach-player/index.js | 20 +++++++++--- blocks/amp-springboard-player/index.js | 45 ++++++++++++++++++++------ blocks/amp-timeago/index.js | 25 +++++++++++--- 9 files changed, 218 insertions(+), 55 deletions(-) diff --git a/blocks/amp-brid-player/index.js b/blocks/amp-brid-player/index.js index 3853b1c234a..14431828521 100644 --- a/blocks/amp-brid-player/index.js +++ b/blocks/amp-brid-player/index.js @@ -29,26 +29,47 @@ export default registerBlockType( attributes: { autoPlay: { - default: false + default: false, + source: 'attribute', + selector: 'amp-brid-player', + attribute: 'autoplay' }, dataPartner: { - type: 'number' + type: 'number', + source: 'attribute', + selector: 'amp-brid-player', + attribute: 'data-partner' }, dataPlayer: { - type: 'number' + type: 'number', + source: 'attribute', + selector: 'amp-brid-player', + attribute: 'data-player' }, dataVideo: { - type: 'number' + type: 'number', + source: 'attribute', + selector: 'amp-brid-player', + attribute: 'data-video' }, dataPlaylist: { - type: 'number' + type: 'number', + source: 'attribute', + selector: 'amp-brid-player', + attribute: 'data-playlist' }, dataOutstream: { - type: 'number' + type: 'number', + source: 'attribute', + selector: 'amp-brid-player', + attribute: 'data-outstream' }, layout: { type: 'string', - default: 'responsive' + default: 'responsive', + source: 'attribute', + selector: 'amp-brid-player', + attribute: 'layout' }, width: { type: 'number', @@ -56,7 +77,10 @@ export default registerBlockType( }, height: { type: 'number', - default: 400 + default: 400, + source: 'attribute', + selector: 'amp-brid-player', + attribute: 'height' } }, diff --git a/blocks/amp-ima-video/index.js b/blocks/amp-ima-video/index.js index 6065cdc2304..30203d08f5d 100644 --- a/blocks/amp-ima-video/index.js +++ b/blocks/amp-ima-video/index.js @@ -30,28 +30,49 @@ export default registerBlockType( // @todo Perhaps later add subtitles option and additional source options? attributes: { dataDelayAdRequest: { - default: false + default: false, + source: 'attribute', + selector: 'amp-ima-video', + attribute: 'data-delay-ad-request' }, dataTag: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-ima-video', + attribute: 'data-tag' }, dataSrc: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-ima-video', + attribute: 'data-src' }, dataPoster: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-ima-video', + attribute: 'data-poster' }, layout: { type: 'string', - default: 'responsive' + default: 'responsive', + source: 'attribute', + selector: 'amp-ima-video', + attribute: 'layout' }, width: { type: 'number', - default: 600 + default: 600, + source: 'attribute', + selector: 'amp-ima-video', + attribute: 'width' }, height: { type: 'number', - default: 400 + default: 400, + source: 'attribute', + selector: 'amp-ima-video', + attribute: 'height' } }, diff --git a/blocks/amp-jwplayer/index.js b/blocks/amp-jwplayer/index.js index ea063ba517b..4801e5ba3a9 100644 --- a/blocks/amp-jwplayer/index.js +++ b/blocks/amp-jwplayer/index.js @@ -28,25 +28,43 @@ export default registerBlockType( attributes: { dataPlayerId: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-jwplayer', + attribute: 'data-player-id' }, dataMediaId: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-jwplayer', + attribute: 'data-media-id' }, dataPlaylistId: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-jwplayer', + attribute: 'data-playlist-id' }, layout: { type: 'string', - default: 'responsive' + default: 'responsive', + source: 'attribute', + selector: 'amp-jwplayer', + attribute: 'layout' }, width: { type: 'number', - default: 600 + default: 600, + source: 'attribute', + selector: 'amp-jwplayer', + attribute: 'width' }, height: { type: 'number', - default: 400 + default: 400, + source: 'attribute', + selector: 'amp-jwplayer', + attribute: 'height' } }, @@ -142,7 +160,8 @@ export default registerBlockType( } if ( attributes.dataPlaylistId ) { jwProps[ 'data-playlist-id' ] = attributes.dataPlaylistId; - } else if ( attributes.dataMediaId ) { + } + if ( attributes.dataMediaId ) { jwProps[ 'data-media-id' ] = attributes.dataMediaId; } return ( diff --git a/blocks/amp-mathml/index.js b/blocks/amp-mathml/index.js index e8d39ca35c5..71b05527bce 100644 --- a/blocks/amp-mathml/index.js +++ b/blocks/amp-mathml/index.js @@ -26,7 +26,10 @@ export default registerBlockType( attributes: { dataFormula: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-mathml', + attribute: 'data-formula' } }, diff --git a/blocks/amp-o2-player/index.js b/blocks/amp-o2-player/index.js index 82c21391adf..5594618bf28 100644 --- a/blocks/amp-o2-player/index.js +++ b/blocks/amp-o2-player/index.js @@ -30,16 +30,28 @@ export default registerBlockType( // @todo Add other useful macro toggles, e.g. showing relevant content. attributes: { dataPid: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-o2-player', + attribute: 'data-pid' }, dataVid: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-o2-player', + attribute: 'data-vid' }, dataBcid: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-o2-player', + attribute: 'data-bcid' }, dataBid: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-o2-player', + attribute: 'data-bid' }, autoPlay: { type: 'boolean', @@ -47,15 +59,24 @@ export default registerBlockType( }, layout: { type: 'string', - default: 'responsive' + default: 'responsive', + source: 'attribute', + selector: 'amp-o2-player', + attribute: 'layout' }, width: { type: 'number', - default: 600 + default: 600, + source: 'attribute', + selector: 'amp-o2-player', + attribute: 'width' }, height: { type: 'number', - default: 400 + default: 400, + source: 'attribute', + selector: 'amp-o2-player', + attribute: 'height' } }, diff --git a/blocks/amp-ooyala-player/index.js b/blocks/amp-ooyala-player/index.js index d261b2bc5c9..2ecac60b24b 100644 --- a/blocks/amp-ooyala-player/index.js +++ b/blocks/amp-ooyala-player/index.js @@ -30,29 +30,50 @@ export default registerBlockType( // @todo Add data-config attribute? attributes: { dataEmbedCode: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-ooyala-player', + attribute: 'data-embedcode' }, dataPlayerId: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-ooyala-player', + attribute: 'data-playerid' }, dataPcode: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-ooyala-player', + attribute: 'data-pcode' }, dataPlayerVersion: { type: 'string', - default: 'v3' + default: 'v3', + source: 'attribute', + selector: 'amp-ooyala-player', + attribute: 'data-playerversion' }, layout: { type: 'string', - default: 'fixed' + default: 'fixed', + source: 'attribute', + selector: 'amp-ooyala-player', + attribute: 'layout' }, width: { type: 'number', - default: 600 + default: 600, + source: 'attribute', + selector: 'amp-ooyala-player', + attribute: 'width' }, height: { type: 'number', - default: 400 + default: 400, + source: 'attribute', + selector: 'amp-ooyala-player', + attribute: 'height' } }, diff --git a/blocks/amp-reach-player/index.js b/blocks/amp-reach-player/index.js index 0c143be49e0..b920171ce19 100644 --- a/blocks/amp-reach-player/index.js +++ b/blocks/amp-reach-player/index.js @@ -29,19 +29,31 @@ export default registerBlockType( attributes: { dataEmbedId: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-reach-player', + attribute: 'data-embed-id' }, layout: { type: 'string', - default: 'fixed-height' + default: 'fixed-height', + source: 'attribute', + selector: 'amp-reach-player', + attribute: 'layout' }, width: { type: 'number', - default: 600 + default: 600, + source: 'attribute', + selector: 'amp-reach-player', + attribute: 'width' }, height: { type: 'number', - default: 400 + default: 400, + source: 'attribute', + selector: 'amp-reach-player', + attribute: 'height' } }, diff --git a/blocks/amp-springboard-player/index.js b/blocks/amp-springboard-player/index.js index 4a32ce35cf4..7fffd02b4d6 100644 --- a/blocks/amp-springboard-player/index.js +++ b/blocks/amp-springboard-player/index.js @@ -28,36 +28,63 @@ export default registerBlockType( attributes: { dataSiteId: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-springboard-player', + attribute: 'data-side-id' }, dataContentId: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-springboard-player', + attribute: 'data-content-id' }, dataPlayerId: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-springboard-player', + attribute: 'data-player-id' }, dataDomain: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-springboard-player', + attribute: 'data-domain' }, dataMode: { type: 'string', - default: 'video' + default: 'video', + source: 'attribute', + selector: 'amp-springboard-player', + attribute: 'data-mode' }, dataItems: { type: 'number', - default: 1 + default: 1, + source: 'attribute', + selector: 'amp-springboard-player', + attribute: 'data-items' }, layout: { type: 'string', - default: 'responsive' + default: 'responsive', + source: 'attribute', + selector: 'amp-springboard-player', + attribute: 'layout' }, width: { type: 'number', - default: 600 + default: 600, + source: 'attribute', + selector: 'amp-springboard-player', + attribute: 'width' }, height: { type: 'number', - default: 400 + default: 400, + source: 'attribute', + selector: 'amp-springboard-player', + attribute: 'height' } }, diff --git a/blocks/amp-timeago/index.js b/blocks/amp-timeago/index.js index 229c1dd73f6..120a0cf9807 100644 --- a/blocks/amp-timeago/index.js +++ b/blocks/amp-timeago/index.js @@ -40,19 +40,34 @@ export default registerBlockType( type: 'string' }, cutoff: { - type: 'number' + type: 'number', + source: 'attribute', + selector: 'amp-timeago', + attribute: 'cutoff' }, dateTime: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-timeago', + attribute: 'datetime' }, ampLayout: { - type: 'string' + type: 'string', + source: 'attribute', + selector: 'amp-timeago', + attribute: 'layout' }, width: { - type: 'number' + type: 'number', + source: 'attribute', + selector: 'amp-timeago', + attribute: 'width' }, height: { - type: 'number' + type: 'number', + source: 'attribute', + selector: 'amp-timeago', + attribute: 'height' } }, From f65439a3c245ec7fcad9f76b457d453e509ca53c Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Tue, 29 May 2018 20:10:32 -0700 Subject: [PATCH 05/13] Fix order of amp-editor-blocks inline scripts --- includes/admin/class-amp-editor-blocks.php | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/includes/admin/class-amp-editor-blocks.php b/includes/admin/class-amp-editor-blocks.php index 3c39febe633..65dd236f17f 100644 --- a/includes/admin/class-amp-editor-blocks.php +++ b/includes/admin/class-amp-editor-blocks.php @@ -133,9 +133,15 @@ public function enqueue_block_editor_assets() { wp_add_inline_script( 'amp-editor-blocks', - 'wp.i18n.setLocaleData( ' . wp_json_encode( gutenberg_get_jed_locale_data( 'amp' ) ) . ', "amp" );' . sprintf( 'ampEditorBlocks.boot();' ), + 'wp.i18n.setLocaleData( ' . wp_json_encode( gutenberg_get_jed_locale_data( 'amp' ) ) . ', "amp" );', 'before' ); + + wp_add_inline_script( + 'amp-editor-blocks', + 'ampEditorBlocks.boot();', + 'after' + ); } /** From b57265ab75b68039d0e074a21fd29d9e206403e7 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Wed, 30 May 2018 12:32:54 +0300 Subject: [PATCH 06/13] Fix domain not found error. --- includes/admin/class-amp-editor-blocks.php | 9 +++++++-- package-lock.json | 12 ++++++------ 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/includes/admin/class-amp-editor-blocks.php b/includes/admin/class-amp-editor-blocks.php index 3c39febe633..5c046964285 100644 --- a/includes/admin/class-amp-editor-blocks.php +++ b/includes/admin/class-amp-editor-blocks.php @@ -123,6 +123,12 @@ public function enqueue_block_editor_assets() { AMP__VERSION ); + wp_add_inline_script( + 'amp-editor-blocks-build', + 'wp.i18n.setLocaleData( ' . wp_json_encode( gutenberg_get_jed_locale_data( 'amp' ) ) . ', "amp" );', + 'before' + ); + wp_enqueue_script( 'amp-editor-blocks', amp_get_asset_url( 'js/amp-editor-blocks.js' ), @@ -133,8 +139,7 @@ public function enqueue_block_editor_assets() { wp_add_inline_script( 'amp-editor-blocks', - 'wp.i18n.setLocaleData( ' . wp_json_encode( gutenberg_get_jed_locale_data( 'amp' ) ) . ', "amp" );' . sprintf( 'ampEditorBlocks.boot();' ), - 'before' + 'ampEditorBlocks.boot();' ); } diff --git a/package-lock.json b/package-lock.json index 31b4914368e..4edcc254144 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,12 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@types/jquery": { + "version": "2.0.49", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-2.0.49.tgz", + "integrity": "sha512-/9xLnYmohN/vD2gDnLS4cym8TUmrJu7DvZa/LELKzZjdPsvWVJiedsdu2SXNtb/DA7FGimqL2g0IoyhbNKLl8g==", + "dev": true + }, "@wordpress/babel-plugin-makepot": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@wordpress/babel-plugin-makepot/-/babel-plugin-makepot-1.0.1.tgz", @@ -26,12 +32,6 @@ "memize": "^1.0.5" } }, - "@types/jquery": { - "version": "2.0.49", - "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-2.0.49.tgz", - "integrity": "sha512-/9xLnYmohN/vD2gDnLS4cym8TUmrJu7DvZa/LELKzZjdPsvWVJiedsdu2SXNtb/DA7FGimqL2g0IoyhbNKLl8g==", - "dev": true - }, "abbrev": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", From b396eb3c2ba9c140d3b831d83fd5e6ed55822a8c Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Wed, 30 May 2018 18:09:18 +0300 Subject: [PATCH 07/13] Fix layout attribute. --- blocks/amp-timeago/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/amp-timeago/index.js b/blocks/amp-timeago/index.js index 120a0cf9807..f70d5929737 100644 --- a/blocks/amp-timeago/index.js +++ b/blocks/amp-timeago/index.js @@ -55,7 +55,7 @@ export default registerBlockType( type: 'string', source: 'attribute', selector: 'amp-timeago', - attribute: 'layout' + attribute: 'data-amp-layout' }, width: { type: 'number', From 0bd1a9fe85275e30d032034bce53110ecdaaa487 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Wed, 30 May 2018 18:20:32 +0300 Subject: [PATCH 08/13] Fix typo + saving attribute. --- blocks/amp-brid-player/index.js | 5 +---- blocks/amp-springboard-player/index.js | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/blocks/amp-brid-player/index.js b/blocks/amp-brid-player/index.js index 5acf1b3987d..396518821db 100644 --- a/blocks/amp-brid-player/index.js +++ b/blocks/amp-brid-player/index.js @@ -29,10 +29,7 @@ export default registerBlockType( attributes: { autoPlay: { - default: false, - source: 'attribute', - selector: 'amp-brid-player', - attribute: 'autoplay' + type: 'boolean' }, dataPartner: { type: 'number', diff --git a/blocks/amp-springboard-player/index.js b/blocks/amp-springboard-player/index.js index b08703b46b8..548f07a8eb6 100644 --- a/blocks/amp-springboard-player/index.js +++ b/blocks/amp-springboard-player/index.js @@ -31,7 +31,7 @@ export default registerBlockType( type: 'string', source: 'attribute', selector: 'amp-springboard-player', - attribute: 'data-side-id' + attribute: 'data-site-id' }, dataContentId: { type: 'string', From e35039e5487d55a642d463fcd88e641b6d18ae72 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Wed, 30 May 2018 19:55:42 +0300 Subject: [PATCH 09/13] Use layout instead of ampLayout as the attribute within amp-timeago block. --- blocks/amp-timeago/index.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/blocks/amp-timeago/index.js b/blocks/amp-timeago/index.js index f70d5929737..63fa2d11a27 100644 --- a/blocks/amp-timeago/index.js +++ b/blocks/amp-timeago/index.js @@ -51,11 +51,11 @@ export default registerBlockType( selector: 'amp-timeago', attribute: 'datetime' }, - ampLayout: { + layout: { type: 'string', source: 'attribute', selector: 'amp-timeago', - attribute: 'data-amp-layout' + attribute: 'layout' }, width: { type: 'number', @@ -79,7 +79,7 @@ export default registerBlockType( }, edit( { attributes, isSelected, setAttributes } ) { - const { align, ampLayout, cutoff, height, width } = attributes; + const { align, layout, cutoff, height, width } = attributes; let timeAgo; if ( attributes.dateTime ) { if ( attributes.cutoff && attributes.cutoff < Math.abs( moment( attributes.dateTime ).diff( moment(), 'seconds' ) ) ) { @@ -109,9 +109,9 @@ export default registerBlockType( /> ( setAttributes( { ampLayout: value } ) ) } + onChange={ value => ( setAttributes( { layout: value } ) ) } /> Date: Wed, 30 May 2018 22:56:00 +0300 Subject: [PATCH 10/13] Refactor code to decrease repetition. --- blocks/amp-brid-player/index.js | 40 ++++--------- blocks/amp-ima-video/index.js | 39 ++++-------- blocks/amp-jwplayer/index.js | 39 ++++-------- blocks/amp-o2-player/index.js | 39 ++++-------- blocks/amp-ooyala-player/index.js | 38 ++++-------- blocks/amp-reach-player/index.js | 39 ++++-------- blocks/amp-springboard-player/index.js | 38 ++++-------- blocks/amp-timeago/index.js | 36 ++++------- blocks/utils.js | 82 ++++++++++++++++++++++++++ 9 files changed, 178 insertions(+), 212 deletions(-) create mode 100644 blocks/utils.js diff --git a/blocks/amp-brid-player/index.js b/blocks/amp-brid-player/index.js index 396518821db..9d8cbcf84ff 100644 --- a/blocks/amp-brid-player/index.js +++ b/blocks/amp-brid-player/index.js @@ -1,3 +1,8 @@ +/** + * Helper methods for blocks. + */ +import { getLayoutControls, getMediaPlaceholder } from '../utils.js'; + /** * Internal block libraries. */ @@ -8,7 +13,6 @@ const { Fragment } = wp.element; const { PanelBody, TextControl, - SelectControl, Placeholder, ToggleControl } = wp.components; @@ -81,8 +85,9 @@ export default registerBlockType( } }, - edit( { attributes, isSelected, setAttributes } ) { - const { autoPlay, dataPartner, dataPlayer, dataVideo, dataPlaylist, dataOutstream, layout, height, width } = attributes; + edit( props ) { + const { attributes, isSelected, setAttributes } = props; + const { autoPlay, dataPartner, dataPlayer, dataVideo, dataPlaylist, dataOutstream } = attributes; const ampLayoutOptions = [ { value: 'responsive', label: __( 'Responsive', 'amp' ) }, { value: 'fixed-height', label: __( 'Fixed height', 'amp' ) }, @@ -132,36 +137,15 @@ export default registerBlockType( checked={ autoPlay } onChange={ () => ( setAttributes( { autoPlay: ! autoPlay } ) ) } /> - ( setAttributes( { layout: value } ) ) } - /> - ( setAttributes( { width: value } ) ) } - /> - ( setAttributes( { height: value } ) ) } - /> + { + getLayoutControls( props, ampLayoutOptions ) + } ) } { - url && ( - -

{ url }

-

{ __( 'Previews for this are unavailable in the editor, sorry!', 'amp' ) }

- - ) - + url && getMediaPlaceholder( __( 'Brid Player', 'amp' ), url ) } { ! url && ( diff --git a/blocks/amp-ima-video/index.js b/blocks/amp-ima-video/index.js index 3b22af65705..8b79e7acb2b 100644 --- a/blocks/amp-ima-video/index.js +++ b/blocks/amp-ima-video/index.js @@ -1,3 +1,8 @@ +/** + * Helper methods for blocks. + */ +import { getLayoutControls, getMediaPlaceholder } from '../utils.js'; + /** * Internal block libraries. */ @@ -8,7 +13,6 @@ const { Fragment } = wp.element; const { PanelBody, TextControl, - SelectControl, Placeholder, ToggleControl } = wp.components; @@ -76,8 +80,9 @@ export default registerBlockType( } }, - edit( { attributes, isSelected, setAttributes } ) { - const { dataDelayAdRequest, dataTag, dataSrc, dataPoster, layout, height, width } = attributes; + edit( props ) { + const { attributes, isSelected, setAttributes } = props; + const { dataDelayAdRequest, dataTag, dataSrc, dataPoster } = attributes; const ampLayoutOptions = [ { value: 'responsive', label: __( 'Responsive', 'amp' ) }, { value: 'fixed', label: __( 'Fixed', 'amp' ) } @@ -113,35 +118,15 @@ export default registerBlockType( checked={ dataDelayAdRequest } onChange={ () => ( setAttributes( { dataDelayAdRequest: ! dataDelayAdRequest } ) ) } /> - ( setAttributes( { layout: value } ) ) } - /> - ( setAttributes( { width: value } ) ) } - /> - ( setAttributes( { height: value } ) ) } - /> + { + getLayoutControls( props, ampLayoutOptions ) + } ) } { - dataSet && ( - -

{ dataSrc }

-

{ __( 'Previews for this are unavailable in the editor, sorry!', 'amp' ) }

- - ) + dataSet && getMediaPlaceholder( __( 'IMA Video', 'amp' ), dataSrc ) } { ! dataSet && ( diff --git a/blocks/amp-jwplayer/index.js b/blocks/amp-jwplayer/index.js index 9a81cb4ed18..d1893d84ada 100644 --- a/blocks/amp-jwplayer/index.js +++ b/blocks/amp-jwplayer/index.js @@ -1,3 +1,8 @@ +/** + * Helper methods for blocks. + */ +import { getLayoutControls, getMediaPlaceholder } from '../utils.js'; + /** * Internal block libraries. */ @@ -8,7 +13,6 @@ const { Fragment } = wp.element; const { PanelBody, TextControl, - SelectControl, Placeholder } = wp.components; @@ -68,8 +72,9 @@ export default registerBlockType( } }, - edit( { attributes, isSelected, setAttributes } ) { - const { dataPlayerId, dataMediaId, dataPlaylistId, layout, height, width } = attributes; + edit( props ) { + const { attributes, isSelected, setAttributes } = props; + const { dataPlayerId, dataMediaId, dataPlaylistId } = attributes; const ampLayoutOptions = [ { value: 'responsive', label: __( 'Responsive', 'amp' ) }, { value: 'fixed-height', label: __( 'Fixed height', 'amp' ) }, @@ -108,35 +113,15 @@ export default registerBlockType( value={ dataPlaylistId } onChange={ value => ( setAttributes( { dataPlaylistId: value } ) ) } /> - ( setAttributes( { layout: value } ) ) } - /> - ( setAttributes( { width: value } ) ) } - /> - ( setAttributes( { height: value } ) ) } - /> + { + getLayoutControls( props, ampLayoutOptions ) + } ) } { - url && ( - -

{ url }

-

{ __( 'Previews for this are unavailable in the editor, sorry!', 'amp' ) }

- - ) + url && getMediaPlaceholder( __( 'JW Player', 'amp' ), url ) } { ! url && ( diff --git a/blocks/amp-o2-player/index.js b/blocks/amp-o2-player/index.js index e17a6e3dcbb..668d344f299 100644 --- a/blocks/amp-o2-player/index.js +++ b/blocks/amp-o2-player/index.js @@ -1,3 +1,8 @@ +/** + * Helper methods for blocks. + */ +import { getLayoutControls, getMediaPlaceholder } from '../utils.js'; + /** * Internal block libraries. */ @@ -8,7 +13,6 @@ const { Fragment } = wp.element; const { PanelBody, TextControl, - SelectControl, Placeholder, ToggleControl } = wp.components; @@ -80,8 +84,9 @@ export default registerBlockType( } }, - edit( { attributes, isSelected, setAttributes } ) { - const { autoPlay, dataPid, dataVid, dataBcid, dataBid, layout, height, width } = attributes; + edit( props ) { + const { attributes, isSelected, setAttributes } = props; + const { autoPlay, dataPid, dataVid, dataBcid, dataBid } = attributes; const ampLayoutOptions = [ { value: 'responsive', label: __( 'Responsive', 'amp' ) }, { value: 'fixed-height', label: __( 'Fixed height', 'amp' ) }, @@ -126,35 +131,15 @@ export default registerBlockType( checked={ autoPlay } onChange={ () => ( setAttributes( { autoPlay: ! autoPlay } ) ) } /> - ( setAttributes( { layout: value } ) ) } - /> - ( setAttributes( { width: value } ) ) } - /> - ( setAttributes( { height: value } ) ) } - /> + { + getLayoutControls( props, ampLayoutOptions ) + } ) } { - url && ( - -

{ url }

-

{ __( 'Previews for this are unavailable in the editor, sorry!', 'amp' ) }

- - ) + url && getMediaPlaceholder( __( 'O2 Player', 'amp' ), url ) } { ! url && ( diff --git a/blocks/amp-ooyala-player/index.js b/blocks/amp-ooyala-player/index.js index d43e928c282..3765bbbe4e3 100644 --- a/blocks/amp-ooyala-player/index.js +++ b/blocks/amp-ooyala-player/index.js @@ -1,3 +1,8 @@ +/** + * Helper methods for blocks. + */ +import { getLayoutControls, getMediaPlaceholder } from '../utils.js'; + /** * Internal block libraries. */ @@ -77,8 +82,9 @@ export default registerBlockType( } }, - edit( { attributes, isSelected, setAttributes } ) { - const { dataEmbedCode, dataPlayerId, dataPcode, dataPlayerVersion, layout, height, width } = attributes; + edit( props ) { + const { attributes, isSelected, setAttributes } = props; + const { dataEmbedCode, dataPlayerId, dataPcode, dataPlayerVersion } = attributes; const ampLayoutOptions = [ { value: 'responsive', label: __( 'Responsive', 'amp' ) }, { value: 'fixed', label: __( 'Fixed', 'amp' ) }, @@ -120,35 +126,15 @@ export default registerBlockType( ] } onChange={ value => ( setAttributes( { dataPlayerVersion: value } ) ) } /> - ( setAttributes( { layout: value } ) ) } - /> - ( setAttributes( { width: value } ) ) } - /> - ( setAttributes( { height: value } ) ) } - /> + { + getLayoutControls( props, ampLayoutOptions ) + } ) } { - url && ( - -

{ url }

-

{ __( 'Previews for this are unavailable in the editor, sorry!', 'amp' ) }

- - ) + url && getMediaPlaceholder( __( 'Ooyala Player', 'amp' ), url ) } { ! url && ( diff --git a/blocks/amp-reach-player/index.js b/blocks/amp-reach-player/index.js index ec617231bfd..d61019ed755 100644 --- a/blocks/amp-reach-player/index.js +++ b/blocks/amp-reach-player/index.js @@ -1,3 +1,8 @@ +/** + * Helper methods for blocks. + */ +import { getLayoutControls, getMediaPlaceholder } from '../utils.js'; + /** * Internal block libraries. */ @@ -8,7 +13,6 @@ const { Fragment } = wp.element; const { PanelBody, TextControl, - SelectControl, Placeholder } = wp.components; @@ -57,8 +61,9 @@ export default registerBlockType( } }, - edit( { attributes, isSelected, setAttributes } ) { - const { dataEmbedId, layout, height, width } = attributes; + edit( props ) { + const { attributes, isSelected, setAttributes } = props; + const { dataEmbedId } = attributes; const ampLayoutOptions = [ { value: 'responsive', label: __( 'Responsive', 'amp' ) }, { value: 'fixed-height', label: __( 'Fixed Height', 'amp' ) }, @@ -82,35 +87,15 @@ export default registerBlockType( value={ dataEmbedId } onChange={ value => ( setAttributes( { dataEmbedId: value } ) ) } /> - ( setAttributes( { layout: value } ) ) } - /> - ( setAttributes( { width: value } ) ) } - /> - ( setAttributes( { height: value } ) ) } - /> + { + getLayoutControls( props, ampLayoutOptions ) + } ) } { - url && ( - -

{ url }

-

{ __( 'Previews for this are unavailable in the editor, sorry!', 'amp' ) }

- - ) + url && getMediaPlaceholder( __( 'Reach Player', 'amp' ), url ) } { ! url && ( diff --git a/blocks/amp-springboard-player/index.js b/blocks/amp-springboard-player/index.js index 548f07a8eb6..3a8e17143f2 100644 --- a/blocks/amp-springboard-player/index.js +++ b/blocks/amp-springboard-player/index.js @@ -1,3 +1,8 @@ +/** + * Helper methods for blocks. + */ +import { getLayoutControls, getMediaPlaceholder } from '../utils.js'; + /** * Internal block libraries. */ @@ -88,8 +93,9 @@ export default registerBlockType( } }, - edit( { attributes, isSelected, setAttributes } ) { - const { dataSiteId, dataPlayerId, dataContentId, dataDomain, dataMode, dataItems, layout, height, width } = attributes; + edit( props ) { + const { attributes, isSelected, setAttributes } = props; + const { dataSiteId, dataPlayerId, dataContentId, dataDomain, dataMode, dataItems } = attributes; const ampLayoutOptions = [ { value: 'responsive', label: __( 'Responsive', 'amp' ) }, { value: 'fixed', label: __( 'Fixed', 'amp' ) }, @@ -142,35 +148,15 @@ export default registerBlockType( value={ dataItems } onChange={ value => ( setAttributes( { dataItems: value } ) ) } /> - ( setAttributes( { layout: value } ) ) } - /> - ( setAttributes( { width: value } ) ) } - /> - ( setAttributes( { height: value } ) ) } - /> + { + getLayoutControls( props, ampLayoutOptions ) + } ) } { - url && ( - -

{ url }

-

{ __( 'Previews for this are unavailable in the editor, sorry!', 'amp' ) }

- - ) + url && getMediaPlaceholder( __( 'Springboard Player', 'amp' ), url ) } { ! url && ( diff --git a/blocks/amp-timeago/index.js b/blocks/amp-timeago/index.js index 63fa2d11a27..ba964dcea21 100644 --- a/blocks/amp-timeago/index.js +++ b/blocks/amp-timeago/index.js @@ -1,5 +1,10 @@ /* global moment */ +/** + * Helper methods for blocks. + */ +import { getLayoutControls } from '../utils.js'; + /** * Internal block libraries. */ @@ -15,8 +20,7 @@ const { const { DateTimePicker, PanelBody, - TextControl, - SelectControl + TextControl } = wp.components; import timeago from 'timeago.js'; @@ -78,8 +82,9 @@ export default registerBlockType( } }, - edit( { attributes, isSelected, setAttributes } ) { - const { align, layout, cutoff, height, width } = attributes; + edit( props ) { + const { attributes, isSelected, setAttributes } = props; + const { align, cutoff } = attributes; let timeAgo; if ( attributes.dateTime ) { if ( attributes.cutoff && attributes.cutoff < Math.abs( moment( attributes.dateTime ).diff( moment(), 'seconds' ) ) ) { @@ -107,26 +112,9 @@ export default registerBlockType( currentDate={ attributes.dateTime || moment() } onChange={ value => ( setAttributes( { dateTime: moment( value, moment.ISO_8601, true ).format() } ) ) } // eslint-disable-line /> - ( setAttributes( { layout: value } ) ) } - /> - ( setAttributes( { width: value } ) ) } - /> - ( setAttributes( { height: value } ) ) } - /> + { + getLayoutControls( props, ampLayoutOptions ) + } +

{ url }

+

{ __( 'Previews for this are unavailable in the editor, sorry!', 'amp' ) }

+ + ); +} + +/** + * Layout controls for AMP blocks' attributes: layout, width, height. + * + * @param {Object} props Props. + * @param {Array} ampLayoutOptions Layout options. + * @return {[XML,*,XML,*,XML]} Controls. + */ +export function getLayoutControls( props, ampLayoutOptions ) { + // @todo Move getting ampLayoutOptions to utils as well. + const { attributes, setAttributes } = props; + const { layout, height, width } = attributes; + const showHeightNotice = ! height && ( 'fixed' === layout || 'fixed-height' === layout ); + const showWidthNotice = ! width && 'fixed' === layout; + + return [ + ( setAttributes( { layout: value } ) ) } + />, + showWidthNotice && ( + + { + wp.i18n.sprintf( + __( 'Width is required for %s layout', 'amp' ), + layout + ) + } + + ), + ( setAttributes( { width: value } ) ) } + />, + showHeightNotice && ( + + { + wp.i18n.sprintf( + __( 'Height is required for %s layout', 'amp' ), + layout + ) + } + + ), + ( setAttributes( { height: value } ) ) } + /> + ]; +} From 9f2343f2d38b7551867ee22c9979ec907b1fbc6a Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Wed, 30 May 2018 13:19:28 -0700 Subject: [PATCH 11/13] Add missing React component keys and fix typo in isDismissible --- blocks/utils.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/blocks/utils.js b/blocks/utils.js index 85ab8bd57ab..32186a34eec 100644 --- a/blocks/utils.js +++ b/blocks/utils.js @@ -38,14 +38,14 @@ export function getLayoutControls( props, ampLayoutOptions ) { return [ ( setAttributes( { layout: value } ) ) } />, showWidthNotice && ( - + { wp.i18n.sprintf( __( 'Width is required for %s layout', 'amp' ), @@ -62,7 +62,7 @@ export function getLayoutControls( props, ampLayoutOptions ) { onChange={ value => ( setAttributes( { width: value } ) ) } />, showHeightNotice && ( - + { wp.i18n.sprintf( __( 'Height is required for %s layout', 'amp' ), From dbc4ed8c9474255fc83ba2ce6f85dbbccb39b2bb Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Wed, 30 May 2018 13:36:45 -0700 Subject: [PATCH 12/13] Use ampLayout instead of layout for attribute name in amp-timeago --- assets/js/amp-editor-blocks.js | 7 ++++--- blocks/amp-timeago/index.js | 10 +++++----- blocks/utils.js | 14 +++++++------- 3 files changed, 16 insertions(+), 15 deletions(-) diff --git a/assets/js/amp-editor-blocks.js b/assets/js/amp-editor-blocks.js index 4308a572b41..aebf1da26f6 100644 --- a/assets/js/amp-editor-blocks.js +++ b/assets/js/amp-editor-blocks.js @@ -1,5 +1,5 @@ /* exported ampEditorBlocks */ -/* eslint no-magic-numbers: [ "error", { "ignore": [ 1, -1, 0 ] } ] */ +/* eslint no-magic-numbers: [ "error", { "ignore": [ 1, -1, 0, 4 ] } ] */ var ampEditorBlocks = ( function() { // eslint-disable-line no-unused-vars var component, __; @@ -152,13 +152,14 @@ var ampEditorBlocks = ( function() { // eslint-disable-line no-unused-vars * Add extra data-amp-layout attribute to save to DB. * * @param {Object} props Properties. - * @param {string} blockType Block type. + * @param {Object} blockType Block type. * @param {Object} attributes Attributes. * @return {Object} Props. */ component.addAMPExtraProps = function addAMPExtraProps( props, blockType, attributes ) { var ampAttributes = {}; - if ( ! attributes.ampLayout && ! attributes.ampNoLoading ) { + + if ( 'amp/' === blockType.name.substr( 0, 4 ) ) { return props; } diff --git a/blocks/amp-timeago/index.js b/blocks/amp-timeago/index.js index ba964dcea21..ae283c0bbad 100644 --- a/blocks/amp-timeago/index.js +++ b/blocks/amp-timeago/index.js @@ -55,7 +55,7 @@ export default registerBlockType( selector: 'amp-timeago', attribute: 'datetime' }, - layout: { + ampLayout: { type: 'string', source: 'attribute', selector: 'amp-timeago', @@ -148,19 +148,19 @@ export default registerBlockType( if ( attributes.cutoff ) { timeagoProps.cutoff = attributes.cutoff; } - if ( attributes.layout ) { - switch ( attributes.layout ) { + if ( attributes.ampLayout ) { + switch ( attributes.lampLayout ) { case 'fixed-height': if ( attributes.height ) { timeagoProps.height = attributes.height; - timeagoProps.layout = attributes.layout; + timeagoProps.layout = attributes.ampLayout; } break; case 'fixed': if ( attributes.height && attributes.width ) { timeagoProps.height = attributes.height; timeagoProps.width = attributes.width; - timeagoProps.layout = attributes.layout; + timeagoProps.layout = attributes.ampLayout; } break; } diff --git a/blocks/utils.js b/blocks/utils.js index 32186a34eec..9e775fdc37d 100644 --- a/blocks/utils.js +++ b/blocks/utils.js @@ -32,24 +32,24 @@ export function getMediaPlaceholder( name, url ) { export function getLayoutControls( props, ampLayoutOptions ) { // @todo Move getting ampLayoutOptions to utils as well. const { attributes, setAttributes } = props; - const { layout, height, width } = attributes; - const showHeightNotice = ! height && ( 'fixed' === layout || 'fixed-height' === layout ); - const showWidthNotice = ! width && 'fixed' === layout; + const { ampLayout, height, width } = attributes; + const showHeightNotice = ! height && ( 'fixed' === ampLayout || 'fixed-height' === ampLayout ); + const showWidthNotice = ! width && 'fixed' === ampLayout; return [ ( setAttributes( { layout: value } ) ) } + onChange={ value => ( setAttributes( { ampLayout: value } ) ) } />, showWidthNotice && ( { wp.i18n.sprintf( __( 'Width is required for %s layout', 'amp' ), - layout + ampLayout ) } @@ -66,7 +66,7 @@ export function getLayoutControls( props, ampLayoutOptions ) { { wp.i18n.sprintf( __( 'Height is required for %s layout', 'amp' ), - layout + ampLayout ) } From f4464ca0be61792edc7efacfc7484999240f7c20 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Wed, 30 May 2018 23:56:43 +0300 Subject: [PATCH 13/13] Update layout to ampLayout within all AMP blocks. --- blocks/amp-brid-player/index.js | 6 +++--- blocks/amp-ima-video/index.js | 4 ++-- blocks/amp-jwplayer/index.js | 6 +++--- blocks/amp-o2-player/index.js | 6 +++--- blocks/amp-ooyala-player/index.js | 8 ++++---- blocks/amp-reach-player/index.js | 8 ++++---- blocks/amp-springboard-player/index.js | 8 ++++---- blocks/amp-timeago/index.js | 8 ++++---- 8 files changed, 27 insertions(+), 27 deletions(-) diff --git a/blocks/amp-brid-player/index.js b/blocks/amp-brid-player/index.js index 9d8cbcf84ff..f2d89fcb02a 100644 --- a/blocks/amp-brid-player/index.js +++ b/blocks/amp-brid-player/index.js @@ -65,7 +65,7 @@ export default registerBlockType( selector: 'amp-brid-player', attribute: 'data-outstream' }, - layout: { + ampLayout: { type: 'string', default: 'responsive', source: 'attribute', @@ -160,12 +160,12 @@ export default registerBlockType( save( { attributes } ) { let bridProps = { - layout: attributes.layout, + layout: attributes.ampLayout, height: attributes.height, 'data-player': attributes.dataPlayer, 'data-partner': attributes.dataPartner }; - if ( 'fixed-height' !== attributes.layout && attributes.width ) { + if ( 'fixed-height' !== attributes.ampLayout && attributes.width ) { bridProps.width = attributes.width; } if ( attributes.dataPlaylist ) { diff --git a/blocks/amp-ima-video/index.js b/blocks/amp-ima-video/index.js index 8b79e7acb2b..2a1f1c9c659 100644 --- a/blocks/amp-ima-video/index.js +++ b/blocks/amp-ima-video/index.js @@ -57,7 +57,7 @@ export default registerBlockType( selector: 'amp-ima-video', attribute: 'data-poster' }, - layout: { + ampLayout: { type: 'string', default: 'responsive', source: 'attribute', @@ -141,7 +141,7 @@ export default registerBlockType( save( { attributes } ) { let imaProps = { - layout: attributes.layout, + layout: attributes.ampLayout, height: attributes.height, width: attributes.width, 'data-tag': attributes.dataTag, diff --git a/blocks/amp-jwplayer/index.js b/blocks/amp-jwplayer/index.js index d1893d84ada..094708f43d4 100644 --- a/blocks/amp-jwplayer/index.js +++ b/blocks/amp-jwplayer/index.js @@ -49,7 +49,7 @@ export default registerBlockType( selector: 'amp-jwplayer', attribute: 'data-playlist-id' }, - layout: { + ampLayout: { type: 'string', default: 'responsive', source: 'attribute', @@ -136,11 +136,11 @@ export default registerBlockType( save( { attributes } ) { let jwProps = { - layout: attributes.layout, + layout: attributes.ampLayout, height: attributes.height, 'data-player-id': attributes.dataPlayerId }; - if ( 'fixed-height' !== attributes.layout && attributes.width ) { + if ( 'fixed-height' !== attributes.ampLayout && attributes.width ) { jwProps.width = attributes.width; } if ( attributes.dataPlaylistId ) { diff --git a/blocks/amp-o2-player/index.js b/blocks/amp-o2-player/index.js index 668d344f299..d0fea52808f 100644 --- a/blocks/amp-o2-player/index.js +++ b/blocks/amp-o2-player/index.js @@ -61,7 +61,7 @@ export default registerBlockType( type: 'boolean', default: false }, - layout: { + ampLayout: { type: 'string', default: 'responsive', source: 'attribute', @@ -154,11 +154,11 @@ export default registerBlockType( save( { attributes } ) { let o2Props = { - layout: attributes.layout, + layout: attributes.ampLayout, height: attributes.height, 'data-pid': attributes.dataPid }; - if ( 'fixed-height' !== attributes.layout && attributes.width ) { + if ( 'fixed-height' !== attributes.ampLayout && attributes.width ) { o2Props.width = attributes.width; } if ( ! attributes.autoPlay ) { diff --git a/blocks/amp-ooyala-player/index.js b/blocks/amp-ooyala-player/index.js index 3765bbbe4e3..2d9e1fb1019 100644 --- a/blocks/amp-ooyala-player/index.js +++ b/blocks/amp-ooyala-player/index.js @@ -59,7 +59,7 @@ export default registerBlockType( selector: 'amp-ooyala-player', attribute: 'data-playerversion' }, - layout: { + ampLayout: { type: 'string', default: 'fixed', source: 'attribute', @@ -148,17 +148,17 @@ export default registerBlockType( }, save( { attributes } ) { - const { dataEmbedCode, dataPlayerId, dataPcode, dataPlayerVersion, layout, height, width } = attributes; + const { dataEmbedCode, dataPlayerId, dataPcode, dataPlayerVersion, ampLayout, height, width } = attributes; let ooyalaProps = { - layout: layout, + layout: ampLayout, height: height, 'data-embedcode': dataEmbedCode, 'data-playerid': dataPlayerId, 'data-pcode': dataPcode, 'data-playerversion': dataPlayerVersion }; - if ( 'fixed-height' !== layout && width ) { + if ( 'fixed-height' !== ampLayout && width ) { ooyalaProps.width = width; } return ( diff --git a/blocks/amp-reach-player/index.js b/blocks/amp-reach-player/index.js index d61019ed755..549e1d4ce22 100644 --- a/blocks/amp-reach-player/index.js +++ b/blocks/amp-reach-player/index.js @@ -38,7 +38,7 @@ export default registerBlockType( selector: 'amp-reach-player', attribute: 'data-embed-id' }, - layout: { + ampLayout: { type: 'string', default: 'fixed-height', source: 'attribute', @@ -109,14 +109,14 @@ export default registerBlockType( }, save( { attributes } ) { - const { dataEmbedId, layout, height, width } = attributes; + const { dataEmbedId, ampLayout, height, width } = attributes; let reachProps = { - layout: layout, + layout: ampLayout, height: height, 'data-embed-id': dataEmbedId }; - if ( 'fixed-height' !== layout && width ) { + if ( 'fixed-height' !== ampLayout && width ) { reachProps.width = width; } return ( diff --git a/blocks/amp-springboard-player/index.js b/blocks/amp-springboard-player/index.js index 3a8e17143f2..e3ab43f5e13 100644 --- a/blocks/amp-springboard-player/index.js +++ b/blocks/amp-springboard-player/index.js @@ -70,7 +70,7 @@ export default registerBlockType( selector: 'amp-springboard-player', attribute: 'data-items' }, - layout: { + ampLayout: { type: 'string', default: 'responsive', source: 'attribute', @@ -170,9 +170,9 @@ export default registerBlockType( }, save( { attributes } ) { - const { dataSiteId, dataPlayerId, dataContentId, dataDomain, dataMode, dataItems, layout, height, width } = attributes; + const { dataSiteId, dataPlayerId, dataContentId, dataDomain, dataMode, dataItems, ampLayout, height, width } = attributes; let springboardProps = { - layout: layout, + layout: ampLayout, height: height, 'data-site-id': dataSiteId, 'data-mode': dataMode, @@ -181,7 +181,7 @@ export default registerBlockType( 'data-domain': dataDomain, 'data-items': dataItems }; - if ( 'fixed-height' !== layout && width ) { + if ( 'fixed-height' !== ampLayout && width ) { springboardProps.width = attributes.width; } return ( diff --git a/blocks/amp-timeago/index.js b/blocks/amp-timeago/index.js index ae283c0bbad..d80d1ea27be 100644 --- a/blocks/amp-timeago/index.js +++ b/blocks/amp-timeago/index.js @@ -98,9 +98,9 @@ export default registerBlockType( } const ampLayoutOptions = [ - { value: '', label: 'Responsive' }, // Default for amp-timeago. - { value: 'fixed', label: 'Fixed' }, - { value: 'fixed-height', label: 'Fixed height' } + { value: '', label: __( 'Responsive', 'amp' ) }, // Default for amp-timeago. + { value: 'fixed', label: __( 'Fixed', 'amp' ) }, + { value: 'fixed-height', label: __( 'Fixed height', 'amp' ) } ]; return [ @@ -149,7 +149,7 @@ export default registerBlockType( timeagoProps.cutoff = attributes.cutoff; } if ( attributes.ampLayout ) { - switch ( attributes.lampLayout ) { + switch ( attributes.ampLayout ) { case 'fixed-height': if ( attributes.height ) { timeagoProps.height = attributes.height;