diff --git a/blocks/amp-brid-player/index.js b/blocks/amp-brid-player/index.js new file mode 100644 index 00000000000..3853b1c234a --- /dev/null +++ b/blocks/amp-brid-player/index.js @@ -0,0 +1,183 @@ +/** + * Internal block libraries. + */ +const { __ } = wp.i18n; +const { registerBlockType } = wp.blocks; +const { InspectorControls } = wp.editor; +const { Fragment } = wp.element; +const { + PanelBody, + TextControl, + SelectControl, + Placeholder, + ToggleControl +} = wp.components; + +/** + * Register block. + */ +export default registerBlockType( + 'amp/amp-brid-player', + { + title: __( 'AMP Brid Player' ), + description: __( 'Displays the Brid Player used in Brid.tv Video Platform.' ), + category: 'common', + icon: 'embed-generic', + keywords: [ + __( 'Embed' ) + ], + + attributes: { + autoPlay: { + default: false + }, + dataPartner: { + type: 'number' + }, + dataPlayer: { + type: 'number' + }, + dataVideo: { + type: 'number' + }, + dataPlaylist: { + type: 'number' + }, + dataOutstream: { + type: 'number' + }, + layout: { + type: 'string', + default: 'responsive' + }, + width: { + type: 'number', + default: 600 + }, + height: { + type: 'number', + default: 400 + } + }, + + edit( { attributes, isSelected, setAttributes } ) { + const { autoPlay, dataPartner, dataPlayer, dataVideo, dataPlaylist, dataOutstream, layout, height, width } = attributes; + const ampLayoutOptions = [ + { value: 'responsive', label: __( 'Responsive' ) }, + { value: 'fixed-height', label: __( 'Fixed height' ) }, + { value: 'fixed', label: __( 'Fixed' ) }, + { value: 'fill', label: __( 'Fill' ) }, + { value: 'flex-item', label: __( 'Flex-item' ) }, + { value: 'nodisplay', label: __( 'No Display' ) } + + ]; + let url = false; + if ( dataPartner && dataPlayer && ( dataVideo || dataPlaylist || dataOutstream ) ) { + url = `http://cdn.brid.tv/live/partners/${dataPartner}`; + } + return ( + + { + isSelected && ( + + + ( setAttributes( { dataPartner: value } ) ) } + /> + ( setAttributes( { dataPlayer: value } ) ) } + /> + ( setAttributes( { dataVideo: value } ) ) } + /> + ( setAttributes( { dataOutstream: value } ) ) } + /> + ( setAttributes( { dataPlaylist: value } ) ) } + /> + ( setAttributes( { autoPlay: ! autoPlay } ) ) } + /> + ( setAttributes( { layout: value } ) ) } + /> + ( setAttributes( { width: value } ) ) } + /> + ( setAttributes( { height: value } ) ) } + /> + + + ) + } + { + url && ( + +

{ url }

+

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

+
+ ) + + } + { + ! url && ( + +

{ __( 'Add required data to use the block.' ) }

+
+ ) + } +
+ ); + }, + + save( { attributes } ) { + let bridProps = { + layout: attributes.layout, + height: attributes.height, + 'data-player': attributes.dataPlayer, + 'data-partner': attributes.dataPartner + }; + if ( 'fixed-height' !== attributes.layout && attributes.width ) { + bridProps.width = attributes.width; + } + if ( attributes.dataPlaylist ) { + bridProps[ 'data-playlist' ] = attributes.dataPlaylist; + } + if ( attributes.dataVideo ) { + bridProps[ 'data-video' ] = attributes.dataVideo; + } + if ( attributes.dataOutstream ) { + bridProps[ 'data-outstream' ] = attributes.dataOutstream; + } + if ( attributes.autoPlay ) { + bridProps.autoplay = attributes.autoPlay; + } + return ( + + ); + } + } +); diff --git a/blocks/amp-ima-video/index.js b/blocks/amp-ima-video/index.js new file mode 100644 index 00000000000..6065cdc2304 --- /dev/null +++ b/blocks/amp-ima-video/index.js @@ -0,0 +1,155 @@ +/** + * Internal block libraries. + */ +const { __ } = wp.i18n; +const { registerBlockType } = wp.blocks; +const { InspectorControls } = wp.editor; +const { Fragment } = wp.element; +const { + PanelBody, + TextControl, + SelectControl, + Placeholder, + ToggleControl +} = wp.components; + +/** + * Register block. + */ +export default registerBlockType( + 'amp/amp-ima-video', + { + title: __( 'AMP IMA Video' ), + description: __( 'Embeds a video player for instream video ads that are integrated with the IMA SDK' ), + category: 'common', + icon: 'embed-generic', + keywords: [ + __( 'Embed' ) + ], + + // @todo Perhaps later add subtitles option and additional source options? + attributes: { + dataDelayAdRequest: { + default: false + }, + dataTag: { + type: 'string' + }, + dataSrc: { + type: 'string' + }, + dataPoster: { + type: 'string' + }, + layout: { + type: 'string', + default: 'responsive' + }, + width: { + type: 'number', + default: 600 + }, + height: { + type: 'number', + default: 400 + } + }, + + edit( { attributes, isSelected, setAttributes } ) { + const { dataDelayAdRequest, dataTag, dataSrc, dataPoster, layout, height, width } = attributes; + const ampLayoutOptions = [ + { value: 'responsive', label: __( 'Responsive' ) }, + { value: 'fixed', label: __( 'Fixed' ) } + + ]; + let dataSet = false; + if ( dataTag && dataSrc ) { + dataSet = true; + } + return ( + + { + isSelected && ( + + + ( setAttributes( { dataTag: value } ) ) } + /> + ( setAttributes( { dataSrc: value } ) ) } + /> + ( setAttributes( { dataPoster: value } ) ) } + /> + ( setAttributes( { dataDelayAdRequest: ! dataDelayAdRequest } ) ) } + /> + ( setAttributes( { layout: value } ) ) } + /> + ( setAttributes( { width: value } ) ) } + /> + ( setAttributes( { height: value } ) ) } + /> + + + ) + } + { + dataSet && ( + +

{ dataSrc }

+

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

+
+ ) + } + { + ! dataSet && ( + +

{ __( 'Add required data to use the block.' ) }

+
+ ) + } +
+ ); + }, + + save( { attributes } ) { + let imaProps = { + layout: attributes.layout, + height: attributes.height, + width: attributes.width, + 'data-tag': attributes.dataTag, + 'data-src': attributes.dataSrc + }; + if ( attributes.dataPoster ) { + imaProps[ 'data-poster' ] = attributes.dataPoster; + } + if ( attributes.dataDelayAdRequest ) { + imaProps[ 'data-delay-ad-request' ] = attributes.dataDelayAdRequest; + } + return ( + + ); + } + } +); diff --git a/blocks/amp-jwplayer/index.js b/blocks/amp-jwplayer/index.js new file mode 100644 index 00000000000..ea063ba517b --- /dev/null +++ b/blocks/amp-jwplayer/index.js @@ -0,0 +1,153 @@ +/** + * Internal block libraries. + */ +const { __ } = wp.i18n; +const { registerBlockType } = wp.blocks; +const { InspectorControls } = wp.editor; +const { Fragment } = wp.element; +const { + PanelBody, + TextControl, + SelectControl, + Placeholder +} = wp.components; + +/** + * Register block. + */ +export default registerBlockType( + 'amp/amp-jwplayer', + { + title: __( 'AMP JW Player' ), + description: __( 'Displays a cloud-hosted JW Player.' ), + category: 'common', + icon: 'embed-generic', + keywords: [ + __( 'Embed' ) + ], + + attributes: { + dataPlayerId: { + type: 'string' + }, + dataMediaId: { + type: 'string' + }, + dataPlaylistId: { + type: 'string' + }, + layout: { + type: 'string', + default: 'responsive' + }, + width: { + type: 'number', + default: 600 + }, + height: { + type: 'number', + default: 400 + } + }, + + edit( { attributes, isSelected, setAttributes } ) { + const { dataPlayerId, dataMediaId, dataPlaylistId, layout, height, width } = attributes; + const ampLayoutOptions = [ + { value: 'responsive', label: __( 'Responsive' ) }, + { value: 'fixed-height', label: __( 'Fixed height' ) }, + { value: 'fixed', label: __( 'Fixed' ) }, + { value: 'fill', label: __( 'Fill' ) }, + { value: 'flex-item', label: __( 'Flex-item' ) }, + { value: 'nodisplay', label: __( 'No Display' ) } + + ]; + let url = false; + if ( dataPlayerId && ( dataMediaId || dataPlaylistId ) ) { + if ( dataPlaylistId ) { + url = `https://content.jwplatform.com/players/${dataPlaylistId}-${dataPlayerId}`; + } else { + url = `https://content.jwplatform.com/players/${dataMediaId}-${dataPlayerId}`; + } + } + return ( + + { + isSelected && ( + + + ( setAttributes( { dataPlayerId: value } ) ) } + /> + ( setAttributes( { dataMediaId: value } ) ) } + /> + ( setAttributes( { dataPlaylistId: value } ) ) } + /> + ( setAttributes( { layout: value } ) ) } + /> + ( setAttributes( { width: value } ) ) } + /> + ( setAttributes( { height: value } ) ) } + /> + + + ) + } + { + url && ( + +

{ url }

+

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

+
+ ) + } + { + ! url && ( + +

{ __( 'Add required data to use the block.' ) }

+
+ ) + } +
+ ); + }, + + save( { attributes } ) { + let jwProps = { + layout: attributes.layout, + height: attributes.height, + 'data-player-id': attributes.dataPlayerId + }; + if ( 'fixed-height' !== attributes.layout && attributes.width ) { + jwProps.width = attributes.width; + } + if ( attributes.dataPlaylistId ) { + jwProps[ 'data-playlist-id' ] = attributes.dataPlaylistId; + } else 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 6374d3507d7..e8d39ca35c5 100644 --- a/blocks/amp-mathml/index.js +++ b/blocks/amp-mathml/index.js @@ -33,14 +33,14 @@ export default registerBlockType( edit( { attributes, setAttributes } ) { const { dataFormula } = attributes; - return [ + return ( setAttributes( { dataFormula: value } ) } /> - ]; + ); }, save( { attributes } ) { diff --git a/blocks/amp-o2-player/index.js b/blocks/amp-o2-player/index.js new file mode 100644 index 00000000000..82c21391adf --- /dev/null +++ b/blocks/amp-o2-player/index.js @@ -0,0 +1,174 @@ +/** + * Internal block libraries. + */ +const { __ } = wp.i18n; +const { registerBlockType } = wp.blocks; +const { InspectorControls } = wp.editor; +const { Fragment } = wp.element; +const { + PanelBody, + TextControl, + SelectControl, + Placeholder, + ToggleControl +} = wp.components; + +/** + * Register block. + */ +export default registerBlockType( + 'amp/amp-o2-player', + { + title: __( 'AMP O2 Player' ), + category: 'common', + icon: 'embed-generic', + keywords: [ + __( 'Embed' ), + __( 'AOL O2Player' ) + ], + + // @todo Add other useful macro toggles, e.g. showing relevant content. + attributes: { + dataPid: { + type: 'string' + }, + dataVid: { + type: 'string' + }, + dataBcid: { + type: 'string' + }, + dataBid: { + type: 'string' + }, + autoPlay: { + type: 'boolean', + default: false + }, + layout: { + type: 'string', + default: 'responsive' + }, + width: { + type: 'number', + default: 600 + }, + height: { + type: 'number', + default: 400 + } + }, + + edit( { attributes, isSelected, setAttributes } ) { + const { autoPlay, dataPid, dataVid, dataBcid, dataBid, layout, height, width } = attributes; + const ampLayoutOptions = [ + { value: 'responsive', label: __( 'Responsive' ) }, + { value: 'fixed-height', label: __( 'Fixed height' ) }, + { value: 'fixed', label: __( 'Fixed' ) }, + { value: 'fill', label: __( 'Fill' ) }, + { value: 'flex-item', label: __( 'Flex-item' ) }, + { value: 'nodisplay', label: __( 'No Display' ) } + + ]; + let url = false; + if ( dataPid && ( dataBcid || dataVid ) ) { + url = `https://delivery.vidible.tv/htmlembed/pid=${dataPid}/`; + } + return ( + <Fragment> + { + isSelected && ( + <InspectorControls key='inspector'> + <PanelBody title={ __( 'O2 Player Settings' ) }> + <TextControl + label={ __( 'Player ID (required)' ) } + value={ dataPid } + onChange={ value => ( setAttributes( { dataPid: value } ) ) } + /> + <TextControl + label={ __( 'Buyer Company ID (either buyer or video ID is required)' ) } + value={ dataBcid } + onChange={ value => ( setAttributes( { dataBcid: value } ) ) } + /> + <TextControl + label={ __( 'Video ID (either buyer or video ID is required)' ) } + value={ dataVid } + onChange={ value => ( setAttributes( { dataVid: value } ) ) } + /> + <TextControl + label={ __( 'Playlist ID' ) } + value={ dataBid } + onChange={ value => ( setAttributes( { dataBid: value } ) ) } + /> + <ToggleControl + label={ __( 'Autoplay' ) } + checked={ autoPlay } + onChange={ () => ( setAttributes( { autoPlay: ! autoPlay } ) ) } + /> + <SelectControl + label={ __( 'Layout' ) } + value={ layout } + options={ ampLayoutOptions } + onChange={ value => ( setAttributes( { layout: value } ) ) } + /> + <TextControl + type="number" + label={ __( 'Width (px)' ) } + value={ width !== undefined ? width : '' } + onChange={ value => ( setAttributes( { width: value } ) ) } + /> + <TextControl + type="number" + label={ __( 'Height (px)' ) } + value={ height } + onChange={ value => ( setAttributes( { height: value } ) ) } + /> + </PanelBody> + </InspectorControls> + ) + } + { + url && ( + <Placeholder label={ __( 'O2 Player' ) }> + <p className="components-placeholder__error">{ url }</p> + <p className="components-placeholder__error">{ __( 'Previews for this are unavailable in the editor, sorry!' ) }</p> + </Placeholder> + ) + } + { + ! url && ( + <Placeholder label={ __( 'O2 Player' ) }> + <p>{ __( 'Add required data to use the block.' ) }</p> + </Placeholder> + ) + } + </Fragment> + ); + }, + + save( { attributes } ) { + let o2Props = { + layout: attributes.layout, + height: attributes.height, + 'data-pid': attributes.dataPid + }; + if ( 'fixed-height' !== attributes.layout && attributes.width ) { + o2Props.width = attributes.width; + } + if ( ! attributes.autoPlay ) { + o2Props[ 'data-macros' ] = 'm.playback=click'; + } + if ( attributes.dataVid ) { + o2Props[ 'data-vid' ] = attributes.dataVid; + } else if ( attributes.dataBcid ) { + o2Props[ 'data-bcid' ] = attributes.dataBcid; + } + if ( attributes.dataBid ) { + o2Props[ 'data-bid' ] = attributes.dataBid; + } + return ( + <amp-o2-player { ...o2Props }></amp-o2-player> + ); + } + } +); diff --git a/blocks/amp-ooyala-player/index.js b/blocks/amp-ooyala-player/index.js new file mode 100644 index 00000000000..d261b2bc5c9 --- /dev/null +++ b/blocks/amp-ooyala-player/index.js @@ -0,0 +1,162 @@ +/** + * Internal block libraries. + */ +const { __ } = wp.i18n; +const { registerBlockType } = wp.blocks; +const { InspectorControls } = wp.editor; +const { Fragment } = wp.element; +const { + PanelBody, + TextControl, + SelectControl, + Placeholder +} = wp.components; + +/** + * Register block. + */ +export default registerBlockType( + 'amp/amp-ooyala-player', + { + title: __( 'AMP Ooyala Player' ), + description: __( 'Displays an Ooyala video.' ), + category: 'common', + icon: 'embed-generic', + keywords: [ + __( 'Embed' ), + __( 'Ooyala video' ) + ], + + // @todo Add data-config attribute? + attributes: { + dataEmbedCode: { + type: 'string' + }, + dataPlayerId: { + type: 'string' + }, + dataPcode: { + type: 'string' + }, + dataPlayerVersion: { + type: 'string', + default: 'v3' + }, + layout: { + type: 'string', + default: 'fixed' + }, + width: { + type: 'number', + default: 600 + }, + height: { + type: 'number', + default: 400 + } + }, + + edit( { attributes, isSelected, setAttributes } ) { + const { dataEmbedCode, dataPlayerId, dataPcode, dataPlayerVersion, layout, height, width } = attributes; + const ampLayoutOptions = [ + { value: 'responsive', label: __( 'Responsive' ) }, + { value: 'fixed', label: __( 'Fixed' ) }, + { value: 'fill', label: __( 'Fill' ) }, + { value: 'flex-item', label: __( 'Flex-item' ) } + + ]; + let url = false; + if ( dataEmbedCode && dataPlayerId && dataPcode ) { + url = `http://cf.c.ooyala.com/${dataEmbedCode}`; + } + return ( + <Fragment> + { + isSelected && ( + <InspectorControls key='inspector'> + <PanelBody title={ __( 'Ooyala settings' ) }> + <TextControl + label={ __( 'Video embed code (required)' ) } + value={ dataEmbedCode } + onChange={ value => ( setAttributes( { dataEmbedCode: value } ) ) } + /> + <TextControl + label={ __( 'Player ID (required)' ) } + value={ dataPlayerId } + onChange={ value => ( setAttributes( { dataPlayerId: value } ) ) } + /> + <TextControl + label={ __( 'Provider code for the account (required)' ) } + value={ dataPcode } + onChange={ value => ( setAttributes( { dataPcode: value } ) ) } + /> + <SelectControl + label={ __( 'Player version' ) } + value={ dataPlayerVersion } + options={ [ + { value: 'v3', label: __( 'V3' ) }, + { value: 'v4', label: __( 'V4' ) } + ] } + onChange={ value => ( setAttributes( { dataPlayerVersion: value } ) ) } + /> + <SelectControl + label={ __( 'Layout' ) } + value={ layout } + options={ ampLayoutOptions } + onChange={ value => ( setAttributes( { layout: value } ) ) } + /> + <TextControl + type="number" + label={ __( 'Width (px)' ) } + value={ width !== undefined ? width : '' } + onChange={ value => ( setAttributes( { width: value } ) ) } + /> + <TextControl + type="number" + label={ __( 'Height (px)' ) } + value={ height } + onChange={ value => ( setAttributes( { height: value } ) ) } + /> + </PanelBody> + </InspectorControls> + ) + } + { + url && ( + <Placeholder label={ __( 'Ooyala Player' ) }> + <p className="components-placeholder__error">{ url }</p> + <p className="components-placeholder__error">{ __( 'Previews for this are unavailable in the editor, sorry!' ) }</p> + </Placeholder> + ) + } + { + ! url && ( + <Placeholder label={ __( 'Ooyala Player' ) }> + <p>{ __( 'Add required data to use the block.' ) }</p> + </Placeholder> + ) + } + </Fragment> + ); + }, + + save( { attributes } ) { + const { dataEmbedCode, dataPlayerId, dataPcode, dataPlayerVersion, layout, height, width } = attributes; + + let ooyalaProps = { + layout: layout, + height: height, + 'data-embedcode': dataEmbedCode, + 'data-playerid': dataPlayerId, + 'data-pcode': dataPcode, + 'data-playerversion': dataPlayerVersion + }; + if ( 'fixed-height' !== layout && width ) { + ooyalaProps.width = width; + } + return ( + <amp-ooyala-player { ...ooyalaProps }></amp-ooyala-player> + ); + } + } +); diff --git a/blocks/amp-reach-player/index.js b/blocks/amp-reach-player/index.js new file mode 100644 index 00000000000..0c143be49e0 --- /dev/null +++ b/blocks/amp-reach-player/index.js @@ -0,0 +1,130 @@ +/** + * Internal block libraries. + */ +const { __ } = wp.i18n; +const { registerBlockType } = wp.blocks; +const { InspectorControls } = wp.editor; +const { Fragment } = wp.element; +const { + PanelBody, + TextControl, + SelectControl, + Placeholder +} = wp.components; + +/** + * Register block. + */ +export default registerBlockType( + 'amp/amp-reach-player', + { + title: __( 'AMP Reach Player' ), + description: __( 'Displays the Reach Player configured in the Beachfront Reach platform.' ), + category: 'common', + icon: 'embed-generic', + keywords: [ + __( 'Embed' ), + __( 'Beachfront Reach video' ) + ], + + attributes: { + dataEmbedId: { + type: 'string' + }, + layout: { + type: 'string', + default: 'fixed-height' + }, + width: { + type: 'number', + default: 600 + }, + height: { + type: 'number', + default: 400 + } + }, + + edit( { attributes, isSelected, setAttributes } ) { + const { dataEmbedId, layout, height, width } = attributes; + const ampLayoutOptions = [ + { value: 'responsive', label: __( 'Responsive' ) }, + { value: 'fixed-height', label: __( 'Fixed Height' ) }, + { value: 'fixed', label: __( 'Fixed' ) }, + { value: 'fill', label: __( 'Fill' ) }, + { value: 'flex-item', label: __( 'Flex-item' ) } + + ]; + let url = false; + if ( dataEmbedId ) { + url = 'https://media-cdn.beachfrontreach.com/acct_1/video/'; + } + return ( + <Fragment> + { + isSelected && ( + <InspectorControls key='inspector'> + <PanelBody title={ __( 'Reach settings' ) }> + <TextControl + label={ __( 'The Reach player embed id (required)' ) } + value={ dataEmbedId } + onChange={ value => ( setAttributes( { dataEmbedId: value } ) ) } + /> + <SelectControl + label={ __( 'Layout' ) } + value={ layout } + options={ ampLayoutOptions } + onChange={ value => ( setAttributes( { layout: value } ) ) } + /> + <TextControl + type="number" + label={ __( 'Width (px)' ) } + value={ width !== undefined ? width : '' } + onChange={ value => ( setAttributes( { width: value } ) ) } + /> + <TextControl + type="number" + label={ __( 'Height (px)' ) } + value={ height } + onChange={ value => ( setAttributes( { height: value } ) ) } + /> + </PanelBody> + </InspectorControls> + ) + } + { + url && ( + <Placeholder label={ __( 'Reach Player' ) }> + <p className="components-placeholder__error">{ url }</p> + <p className="components-placeholder__error">{ __( 'Previews for this are unavailable in the editor, sorry!' ) }</p> + </Placeholder> + ) + } + { + ! url && ( + <Placeholder label={ __( 'Reach Player' ) }> + <p>{ __( 'Add Reach player embed ID to use the block.' ) }</p> + </Placeholder> + ) + } + </Fragment> + ); + }, + + save( { attributes } ) { + const { dataEmbedId, layout, height, width } = attributes; + + let reachProps = { + layout: layout, + height: height, + 'data-embed-id': dataEmbedId + }; + if ( 'fixed-height' !== layout && width ) { + reachProps.width = width; + } + return ( + <amp-reach-player { ...reachProps }></amp-reach-player> + ); + } + } +); diff --git a/blocks/amp-springboard-player/index.js b/blocks/amp-springboard-player/index.js new file mode 100644 index 00000000000..4a32ce35cf4 --- /dev/null +++ b/blocks/amp-springboard-player/index.js @@ -0,0 +1,179 @@ +/** + * Internal block libraries. + */ +const { __ } = wp.i18n; +const { registerBlockType } = wp.blocks; +const { InspectorControls } = wp.editor; +const { Fragment } = wp.element; +const { + PanelBody, + TextControl, + SelectControl, + Placeholder +} = wp.components; + +/** + * Register block. + */ +export default registerBlockType( + 'amp/amp-springboard-player', + { + title: __( 'AMP Springboard Player' ), + description: __( 'Displays the Springboard Player used in the Springboard Video Platform' ), + category: 'common', + icon: 'embed-generic', + keywords: [ + __( 'Embed' ) + ], + + attributes: { + dataSiteId: { + type: 'string' + }, + dataContentId: { + type: 'string' + }, + dataPlayerId: { + type: 'string' + }, + dataDomain: { + type: 'string' + }, + dataMode: { + type: 'string', + default: 'video' + }, + dataItems: { + type: 'number', + default: 1 + }, + layout: { + type: 'string', + default: 'responsive' + }, + width: { + type: 'number', + default: 600 + }, + height: { + type: 'number', + default: 400 + } + }, + + edit( { attributes, isSelected, setAttributes } ) { + const { dataSiteId, dataPlayerId, dataContentId, dataDomain, dataMode, dataItems, layout, height, width } = attributes; + const ampLayoutOptions = [ + { value: 'responsive', label: __( 'Responsive' ) }, + { value: 'fixed', label: __( 'Fixed' ) }, + { value: 'fill', label: __( 'Fill' ) }, + { value: 'flex-item', label: __( 'Flex-item' ) } + + ]; + let url = false; + if ( dataSiteId && dataContentId && dataDomain && dataMode && dataItems ) { + url = 'https://cms.springboardplatform.com/embed_iframe/'; + } + return ( + <Fragment> + { + isSelected && ( + <InspectorControls key='inspector'> + <PanelBody title={ __( 'Springboard Player Settings' ) }> + <TextControl + label={ __( 'SprintBoard site ID (required)' ) } + value={ dataSiteId } + onChange={ value => ( setAttributes( { dataSiteId: value } ) ) } + /> + <TextControl + label={ __( 'Player content ID (required)' ) } + value={ dataContentId } + onChange={ value => ( setAttributes( { dataContentId: value } ) ) } + /> + <TextControl + label={ __( 'Player ID' ) } + value={ dataPlayerId } + onChange={ value => ( setAttributes( { dataPlayerId: value } ) ) } + /> + <TextControl + label={ __( 'Springboard partner domain' ) } + value={ dataDomain } + onChange={ value => ( setAttributes( { dataDomain: value } ) ) } + /> + <SelectControl + label={ __( 'Mode (required)' ) } + value={ dataMode } + options={ [ + { value: 'video', label: __( 'Video' ) }, + { value: 'playlist', label: __( 'Playlist' ) } + ] } + onChange={ value => ( setAttributes( { dataMode: value } ) ) } + /> + <TextControl + type="number" + label={ __( 'Number of video is playlist (required)' ) } + value={ dataItems } + onChange={ value => ( setAttributes( { dataItems: value } ) ) } + /> + <SelectControl + label={ __( 'Layout' ) } + value={ layout } + options={ ampLayoutOptions } + onChange={ value => ( setAttributes( { layout: value } ) ) } + /> + <TextControl + type="number" + label={ __( 'Width (px)' ) } + value={ width !== undefined ? width : '' } + onChange={ value => ( setAttributes( { width: value } ) ) } + /> + <TextControl + type="number" + label={ __( 'Height (px)' ) } + value={ height } + onChange={ value => ( setAttributes( { height: value } ) ) } + /> + </PanelBody> + </InspectorControls> + ) + } + { + url && ( + <Placeholder label={ __( 'Springboard Player' ) }> + <p className="components-placeholder__error">{ url }</p> + <p className="components-placeholder__error">{ __( 'Previews for this are unavailable in the editor, sorry!' ) }</p> + </Placeholder> + ) + } + { + ! url && ( + <Placeholder label={ __( 'Springboard Player' ) }> + <p>{ __( 'Add required data to use the block.' ) }</p> + </Placeholder> + ) + } + </Fragment> + ); + }, + + save( { attributes } ) { + const { dataSiteId, dataPlayerId, dataContentId, dataDomain, dataMode, dataItems, layout, height, width } = attributes; + let springboardProps = { + layout: layout, + height: height, + 'data-site-id': dataSiteId, + 'data-mode': dataMode, + 'data-content-id': dataContentId, + 'data-player-id': dataPlayerId, + 'data-domain': dataDomain, + 'data-items': dataItems + }; + if ( 'fixed-height' !== layout && width ) { + springboardProps.width = attributes.width; + } + return ( + <amp-springboard-player { ...springboardProps }></amp-springboard-player> + ); + } + } +); diff --git a/blocks/index.js b/blocks/index.js index 676aa948d04..d72e20ff51b 100644 --- a/blocks/index.js +++ b/blocks/index.js @@ -2,3 +2,10 @@ * Import blocks. */ import './amp-mathml'; +import './amp-o2-player'; +import './amp-ooyala-player'; +import './amp-reach-player'; +import './amp-springboard-player'; +import './amp-jwplayer'; +import './amp-brid-player'; +import './amp-ima-video'; diff --git a/includes/admin/class-amp-editor-blocks.php b/includes/admin/class-amp-editor-blocks.php index 21a1ed1c3d5..b847e2362fd 100644 --- a/includes/admin/class-amp-editor-blocks.php +++ b/includes/admin/class-amp-editor-blocks.php @@ -17,21 +17,69 @@ class AMP_Editor_Blocks { public function init() { if ( function_exists( 'gutenberg_init' ) ) { add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_block_editor_assets' ) ); - add_filter( 'wp_kses_allowed_html', array( $this, 'whitelist_layout_in_wp_kses_allowed_html' ), 10 ); + add_filter( 'wp_kses_allowed_html', array( $this, 'whitelist_block_atts_in_wp_kses_allowed_html' ), 10, 2 ); } } /** - * Whitelist used data-amp-* attributes. + * Whitelist elements and attributes used for AMP. * - * @param array $tags Array of allowed post tags. + * This prevents AMP markup from being deleted in + * + * @param array $tags Array of allowed post tags. + * @param string $context Context. * @return mixed Modified array. */ - public function whitelist_layout_in_wp_kses_allowed_html( $tags ) { + public function whitelist_block_atts_in_wp_kses_allowed_html( $tags, $context ) { + if ( 'post' !== $context ) { + return $tags; + } + foreach ( $tags as &$tag ) { $tag['data-amp-layout'] = true; $tag['data-amp-noloading'] = true; } + + $amp_blocks = array( + 'amp-mathml', + 'amp-o2-player', + 'amp-ooyala-player', + 'amp-reach-player', + 'amp-springboard-player', + 'amp-jwplayer', + 'amp-brid-player', + 'amp-ima-video', + ); + + foreach ( $amp_blocks as $amp_block ) { + if ( ! isset( $tags[ $amp_block ] ) ) { + $tags[ $amp_block ] = array(); + } + + $tags[ $amp_block ] = array_merge( + array_fill_keys( + array( + 'layout', + 'width', + 'height', + ), + true + ), + $tags[ $amp_block ] + ); + + $amp_tag_specs = AMP_Allowed_Tags_Generated::get_allowed_tag( $amp_block ); + foreach ( $amp_tag_specs as $amp_tag_spec ) { + if ( ! isset( $amp_tag_spec[ AMP_Rule_Spec::ATTR_SPEC_LIST ] ) ) { + continue; + } + $tags[ $amp_block ] = array_merge( + $tags[ $amp_block ], + array_fill_keys( array_keys( $amp_tag_spec[ AMP_Rule_Spec::ATTR_SPEC_LIST ] ), true ) + ); + } + } + return $tags; }