Merge pull request #1168 from Automattic/add/prenetation_blocks

[Gutenberg] Add amp-timeago block
ampproject · May 30, 2018 · 7918b41 · 7918b41
2 parents ab7204a + f4464ca
commit 7918b41
Show file tree

Hide file tree

Showing 15 changed files with 587 additions and 266 deletions.
diff --git 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-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;
@@ -29,39 +33,61 @@ export default registerBlockType(
 
 		attributes: {
 			autoPlay: {
-				default: false
+				type: 'boolean'
 			},
 			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: {
+			ampLayout: {
 				type: 'string',
-				default: 'responsive'
+				default: 'responsive',
+				source: 'attribute',
+				selector: 'amp-brid-player',
+				attribute: 'layout'
 			},
 			width: {
 				type: 'number',
 				default: 600
 			},
 			height: {
 				type: 'number',
-				default: 400
+				default: 400,
+				source: 'attribute',
+				selector: 'amp-brid-player',
+				attribute: 'height'
 			}
 		},
 
-		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' ) },
@@ -111,36 +137,15 @@ export default registerBlockType(
 										checked={ autoPlay }
 										onChange={ () => ( setAttributes( { autoPlay: ! autoPlay } ) ) }
 									/>
-									<SelectControl
-										label={ __( 'Layout', 'amp', 'amp' ) }
-										value={ layout }
-										options={ ampLayoutOptions }
-										onChange={ value => ( setAttributes( { layout: value } ) ) }
-									/>
-									<TextControl
-										type="number"
-										label={ __( 'Width (px)', 'amp' ) }
-										value={ width !== undefined ? width : '' }
-										onChange={ value => ( setAttributes( { width: value } ) ) }
-									/>
-									<TextControl
-										type="number"
-										label={ __( 'Height (px)', 'amp' ) }
-										value={ height }
-										onChange={ value => ( setAttributes( { height: value } ) ) }
-									/>
+									{
+										getLayoutControls( props, ampLayoutOptions )
+									}
 								</PanelBody>
 							</InspectorControls>
 						)
 					}
 					{
-						url && (
-							<Placeholder label={ __( 'Brid Player', 'amp' ) }>
-								<p className="components-placeholder__error">{ url }</p>
-								<p className="components-placeholder__error">{ __( 'Previews for this are unavailable in the editor, sorry!', 'amp' ) }</p>
-							</Placeholder>
-						)
-
+						url && getMediaPlaceholder( __( 'Brid Player', 'amp' ), url )
 					}
 					{
 						! url && (
@@ -155,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
@@ -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;
@@ -30,33 +34,55 @@ 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: {
+			ampLayout: {
 				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'
 			}
 		},
 
-		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' ) }
@@ -92,35 +118,15 @@ export default registerBlockType(
 										checked={ dataDelayAdRequest }
 										onChange={ () => ( setAttributes( { dataDelayAdRequest: ! dataDelayAdRequest } ) ) }
 									/>
-									<SelectControl
-										label={ __( 'Layout', 'amp' ) }
-										value={ layout }
-										options={ ampLayoutOptions }
-										onChange={ value => ( setAttributes( { layout: value } ) ) }
-									/>
-									<TextControl
-										type="number"
-										label={ __( 'Width (px)', 'amp' ) }
-										value={ width !== undefined ? width : '' }
-										onChange={ value => ( setAttributes( { width: value } ) ) }
-									/>
-									<TextControl
-										type="number"
-										label={ __( 'Height (px)', 'amp' ) }
-										value={ height }
-										onChange={ value => ( setAttributes( { height: value } ) ) }
-									/>
+									{
+										getLayoutControls( props, ampLayoutOptions )
+									}
 								</PanelBody>
 							</InspectorControls>
 						)
 					}
 					{
-						dataSet && (
-							<Placeholder label={ __( 'IMA Video', 'amp' ) }>
-								<p className="components-placeholder__error">{ dataSrc }</p>
-								<p className="components-placeholder__error">{ __( 'Previews for this are unavailable in the editor, sorry!', 'amp' ) }</p>
-							</Placeholder>
-						)
+						dataSet && getMediaPlaceholder( __( 'IMA Video', 'amp' ), dataSrc )
 					}
 					{
 						! dataSet && (
@@ -135,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,