Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[Gutenberg] Add amp-timeago block #1168

Merged
merged 18 commits into from
May 30, 2018
Merged

[Gutenberg] Add amp-timeago block #1168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
b051230
Restore amp-timeago block.
miina May 23, 2018
e018851
Fix eslint.
miina May 23, 2018
75e52a5
Merge branch 'develop' of https://github.com/Automattic/amp-wp into a…
westonruter May 23, 2018
9529d2c
Add class to list of attributes always allowed by Kses in AMP components
westonruter May 23, 2018
d8a373f
Merge develop & resolve conflicts.
miina May 28, 2018
470c809
Get param values from saved attributes.
miina May 28, 2018
f1892eb
Merge branch 'develop' of https://github.com/Automattic/amp-wp into a…
westonruter May 30, 2018
f65439a
Fix order of amp-editor-blocks inline scripts
westonruter May 30, 2018
e27811c
Merge develop & resolve conflicts.
miina May 30, 2018
b57265a
Fix domain not found error.
miina May 30, 2018
384fc32
Resolve conflicts.
miina May 30, 2018
b396eb3
Fix layout attribute.
miina May 30, 2018
0bd1a9f
Fix typo + saving attribute.
miina May 30, 2018
e35039e
Use layout instead of ampLayout as the attribute within amp-timeago b…
miina May 30, 2018
11fc94b
Refactor code to decrease repetition.
miina May 30, 2018
9f2343f
Add missing React component keys and fix typo in isDismissible
westonruter May 30, 2018
dbc4ed8
Use ampLayout instead of layout for attribute name in amp-timeago
westonruter May 30, 2018
f4464ca
Update layout to ampLayout within all AMP blocks.
miina May 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions assets/js/amp-editor-blocks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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, __;
Expand Down Expand Up @@ -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;
}

Expand Down
83 changes: 44 additions & 39 deletions blocks/amp-brid-player/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* Helper methods for blocks.
*/
import { getLayoutControls, getMediaPlaceholder } from '../utils.js';

/**
* Internal block libraries.
*/
Expand All @@ -8,7 +13,6 @@ const { Fragment } = wp.element;
const {
PanelBody,
TextControl,
SelectControl,
Placeholder,
ToggleControl
} = wp.components;
Expand All @@ -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' ) },
Expand Down Expand Up @@ -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 && (
Expand All @@ -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 ) {
Expand Down
78 changes: 42 additions & 36 deletions blocks/amp-ima-video/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* Helper methods for blocks.
*/
import { getLayoutControls, getMediaPlaceholder } from '../utils.js';

/**
* Internal block libraries.
*/
Expand All @@ -8,7 +13,6 @@ const { Fragment } = wp.element;
const {
PanelBody,
TextControl,
SelectControl,
Placeholder,
ToggleControl
} = wp.components;
Expand All @@ -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' ) }
Expand Down Expand Up @@ -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 && (
Expand All @@ -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,
Expand Down
Loading