From de8a1c5bbedf8ed3250840f53ad6d66e5abe246a Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Mon, 20 Aug 2018 16:47:53 +0300 Subject: [PATCH 01/12] Modify CSS for having the layer on top of each other and hiding the top layers if a lower one is selected. --- assets/css/amp-editor-story-blocks.css | 37 ++++++++++++++++++++------ 1 file changed, 29 insertions(+), 8 deletions(-) diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css index ae7ce4c7c78..ff18bcc4e11 100644 --- a/assets/css/amp-editor-story-blocks.css +++ b/assets/css/amp-editor-story-blocks.css @@ -1,14 +1,35 @@ +div[data-type="amp/amp-story-page"] { + border: 1px solid #ffdddd; +} -.editor-block-list__layout { - background-color: #ffdddd; +div[data-type="amp/amp-story-page"], +div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__layout { + min-height: 450px; } -.editor-block-list__layout .editor-block-list__layout { - background-color: white; +div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__layout .editor-block-list__layout { + background-color: initial; + min-height: initial; } -div[data-type="amp/amp-story-page"] { - background-color: #ddffdd; + +.editor-block-list__layout div[data-type="amp/amp-story-grid-layer"] { + position: absolute; + height: 100%; + width: 100%; } -div[data-type="amp/amp-story-grid-layer"] { - background-color: #ddddff; + +.editor-block-list__layout div[data-type="amp/amp-story-cta-layer"] { + position: absolute; + height: 20%; + width: 100%; + bottom: 0; +} + +.editor-block-list__layout div[data-type="amp/amp-story-grid-layer"], +.editor-block-list__layout div[data-type="amp/amp-story-cta-layer"] { + border: 1px solid #ddffdd; +} + +.editor-block-list__layout div[data-type="amp/amp-story-grid-layer"].is-selected ~ div[data-type="amp/amp-story-grid-layer"] { + display: none; } From 9d79e01fb7135a21e102dcee3b3d8eae382f8c2c Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 21 Aug 2018 17:29:48 +0300 Subject: [PATCH 02/12] Add initial take on BlockSelector for selecting layers. --- assets/css/amp-editor-story-blocks.css | 23 +++++++- blocks/amp-story/amp-story-page.js | 7 +-- blocks/amp-story/block-selector.js | 73 ++++++++++++++++++++++++++ 3 files changed, 99 insertions(+), 4 deletions(-) create mode 100644 blocks/amp-story/block-selector.js diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css index ff18bcc4e11..057249f639f 100644 --- a/assets/css/amp-editor-story-blocks.css +++ b/assets/css/amp-editor-story-blocks.css @@ -29,7 +29,28 @@ div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__lay border: 1px solid #ddffdd; } -.editor-block-list__layout div[data-type="amp/amp-story-grid-layer"].is-selected ~ div[data-type="amp/amp-story-grid-layer"] { +.editor-block-list__layout div[data-type="amp/amp-story-grid-layer"].is-selected ~ div[data-type="amp/amp-story-grid-layer"], +.editor-block-list__layout div[data-type="amp/amp-story-grid-layer"].is-selected-parent ~ div[data-type="amp/amp-story-grid-layer"]{ display: none; } +.editor-selectors { + position: absolute; + right: -150px; + bottom: 0px; + width: 100px; + z-index: 80; +} + +.editor-selectors .component-editor__selector { + margin-bottom: 2px; +} + +.editor-selectors .component-editor__selector a { + color: #656565; + font-size: 13px; +} + +.editor-selectors .is-selected.component-editor__selector a { + text-decoration: underline; +} diff --git a/blocks/amp-story/amp-story-page.js b/blocks/amp-story/amp-story-page.js index 41c9403f5fe..b2a963e90ce 100644 --- a/blocks/amp-story/amp-story-page.js +++ b/blocks/amp-story/amp-story-page.js @@ -1,5 +1,6 @@ import memoize from 'memize'; import uuid from 'uuid/v4'; +import BlockSelector from './block-selector'; const { __ } = wp.i18n; const { @@ -27,7 +28,6 @@ const ALLOWED_BLOCKS = [ const getStoryPageTemplate = memoize( ( grids, hasCTA ) => { let template = _.times( grids, () => [ 'amp/amp-story-grid-layer', - [], [ [ 'core/paragraph', @@ -101,10 +101,11 @@ export default registerBlockType( grids = 1; } - return ( + return [ + , // Get the template dynamically. - ); + ]; }, save( { attributes } ) { diff --git a/blocks/amp-story/block-selector.js b/blocks/amp-story/block-selector.js new file mode 100644 index 00000000000..b0d49d84d3d --- /dev/null +++ b/blocks/amp-story/block-selector.js @@ -0,0 +1,73 @@ +import forEachRight from 'lodash'; // eslint-disable-line no-unused-vars + +const { Component } = wp.element; +const { getBlockType } = wp.blocks; +const { + dispatch, + select +} = wp.data; +const { + getBlock, + isBlockSelected, + hasSelectedInnerBlock, + getSelectedBlock +} = select( 'core/editor' ); +const { + selectBlock +} = dispatch( 'core/editor' ); + +class BlockSelector extends Component { + render() { + if ( ! this.props.rootClientId ) { + return null; + } + + const rootBlock = getBlock( this.props.rootClientId ); + + if ( ! rootBlock.innerBlocks.length ) { + return null; + } + + let links = []; + + _.forEachRight( rootBlock.innerBlocks, function( block, index ) { + let className = 'component-editor__selector'; + if ( isBlockSelected( block.clientId ) || hasSelectedInnerBlock( block.clientId ) ) { + className += ' is-selected'; + } + let blockType = getBlockType( block.name ); + links.push( +
  • + { + e.stopPropagation(); + if ( getSelectedBlock.clientId !== block.clientId ) { + // @todo This selects the first inner child instead for some reason. + selectBlock( block.clientId ); + } + }}>{ blockType.title } +
    • + ); + } ); + + let className = 'component-editor__selector'; + if ( isBlockSelected( this.props.rootClientId ) ) { + className += ' is-selected'; + } + + links.push( +
  • + { + selectBlock( this.props.rootClientId ); + }}>Page +
    • + ); + + return ( +
      + { links } +
    + ); + } +} + +export default BlockSelector; From 83d2c34ac962fa4a2dc68906d57bc29ddb831008 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Tue, 21 Aug 2018 22:35:50 +0300 Subject: [PATCH 03/12] Use Button instead of links. Make strings translatable. --- assets/css/amp-editor-story-blocks.css | 7 +++---- blocks/amp-story/block-selector.js | 21 ++++++++++++++------- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css index 057249f639f..23fdf96c943 100644 --- a/assets/css/amp-editor-story-blocks.css +++ b/assets/css/amp-editor-story-blocks.css @@ -46,11 +46,10 @@ div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__lay margin-bottom: 2px; } -.editor-selectors .component-editor__selector a { - color: #656565; - font-size: 13px; +.editor-selectors .component-editor__selector button { + cursor: pointer; } -.editor-selectors .is-selected.component-editor__selector a { +.editor-selectors .is-selected.component-editor__selector button { text-decoration: underline; } diff --git a/blocks/amp-story/block-selector.js b/blocks/amp-story/block-selector.js index b0d49d84d3d..e3f62a86e25 100644 --- a/blocks/amp-story/block-selector.js +++ b/blocks/amp-story/block-selector.js @@ -1,7 +1,8 @@ import forEachRight from 'lodash'; // eslint-disable-line no-unused-vars +const { __, sprintf } = wp.i18n; const { Component } = wp.element; -const { getBlockType } = wp.blocks; +const { Button } = wp.components; const { dispatch, select @@ -35,16 +36,17 @@ class BlockSelector extends Component { if ( isBlockSelected( block.clientId ) || hasSelectedInnerBlock( block.clientId ) ) { className += ' is-selected'; } - let blockType = getBlockType( block.name ); links.push(
  • - { +
    • ); } ); @@ -56,9 +58,14 @@ class BlockSelector extends Component { links.push(
  • - { - selectBlock( this.props.rootClientId ); - }}>Page +
    • ); From c7951bdc0317ded60136b9f0a6a3a9c411f72626 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Wed, 22 Aug 2018 14:21:32 +0300 Subject: [PATCH 04/12] Add grid system to the grid layers. Place layers exactly on top of each other and make more similar to amp-story design in browser. --- assets/css/amp-editor-story-blocks.css | 81 ++++++++++++++++++++++-- blocks/amp-story/amp-story-grid-layer.js | 4 +- blocks/amp-story/block-selector.js | 7 +- 3 files changed, 86 insertions(+), 6 deletions(-) diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css index 23fdf96c943..c415d35b604 100644 --- a/assets/css/amp-editor-story-blocks.css +++ b/assets/css/amp-editor-story-blocks.css @@ -2,13 +2,45 @@ div[data-type="amp/amp-story-page"] { border: 1px solid #ffdddd; } +.editor-block-list__layout div[data-type="amp/amp-story-page"] { + padding: 0; +} + +@media (min-width: 600px) { + div[data-type="amp/amp-story-page"] .editor-block-list__block { + margin: 0; + padding: 0; + } +} + +div[data-type="amp/amp-story-page"] * { + max-width: 100%; +} + div[data-type="amp/amp-story-page"], -div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__layout { - min-height: 450px; +div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__layout:first-of-type { + margin: auto !important; + max-height: 75vh !important; + max-width: 45vh !important; + min-width: 320px !important; + min-height: 533px; +} + +.editor-block-list__layout div[data-type="amp/amp-story-cta-layer"] .editor-inner-blocks .editor-block-list__layout { + min-height: initial !important; +} + +/* Make layer be exactly on top of each other */ +.editor-block-list__layout div[data-type="amp/amp-story-page"].editor-block-list__block:first-child .editor-block-list__block-edit { + margin: 0; +} + +.editor-block-list__layout div[data-type="amp/amp-story-page"].editor-block-list__block .editor-block-list__block-edit, .editor-block-list__layout .editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit { + margin: 0; } + div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__layout .editor-block-list__layout { background-color: initial; - min-height: initial; } .editor-block-list__layout div[data-type="amp/amp-story-grid-layer"] { @@ -17,6 +49,47 @@ div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__lay width: 100%; } +.amp-grid-template .editor-block-list__layout:first-of-type { + display: grid; + overflow: hidden; + padding: 68px 32px 32px; +} + +.amp-grid-template .editor-block-list__layout:first-of-type * { + margin: 0; + box-sizing: border-box; +} + +.amp-grid-template-horizontal .editor-block-list__layout:first-of-type { + grid-auto-flow: column !important; + grid-template-rows: 100% !important; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; + grid-gap: 16px; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: start; +} + +.amp-grid-template-vertical .editor-block-list__layout:first-of-type { + grid-auto-flow: row; + grid-template-columns: 100%; + align-content: start; + grid-gap: 16px; + -webkit-box-pack: stretch; + -ms-flex-pack: stretch; + justify-content: stretch; + justify-items: start; +} + +.amp-grid-template-thirds .editor-block-list__layout:first-of-type { + grid-template-rows: 1fr 1fr 1fr; + grid-template-areas: "upper-third" "middle-third" "lower-third"; +} + .editor-block-list__layout div[data-type="amp/amp-story-cta-layer"] { position: absolute; height: 20%; @@ -37,7 +110,7 @@ div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__lay .editor-selectors { position: absolute; right: -150px; - bottom: 0px; + bottom: 0; width: 100px; z-index: 80; } diff --git a/blocks/amp-story/amp-story-grid-layer.js b/blocks/amp-story/amp-story-grid-layer.js index 62802cd1ea2..ff6e68f2415 100644 --- a/blocks/amp-story/amp-story-grid-layer.js +++ b/blocks/amp-story/amp-story-grid-layer.js @@ -99,7 +99,9 @@ export default registerBlockType( onChange={ value => ( setAttributes( { template: value } ) ) } /> , - +
    + +
    ]; }, diff --git a/blocks/amp-story/block-selector.js b/blocks/amp-story/block-selector.js index e3f62a86e25..017590d0c6d 100644 --- a/blocks/amp-story/block-selector.js +++ b/blocks/amp-story/block-selector.js @@ -36,6 +36,11 @@ class BlockSelector extends Component { if ( isBlockSelected( block.clientId ) || hasSelectedInnerBlock( block.clientId ) ) { className += ' is-selected'; } + + let title = sprintf( __( 'Layout %d ', 'amp' ), index + 1 ); + if ( 'amp/amp-story-cta-layer' === block.name ) { + title = __( 'CTA Layer', 'amp' ); + } links.push(
    • ); From 4fa18d3e0c47a561cad6e631c276a0f43a5a70e9 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Wed, 22 Aug 2018 18:42:42 +0300 Subject: [PATCH 05/12] Add inserter for grid layers. --- assets/css/amp-editor-story-blocks.css | 4 +- blocks/amp-story/block-selector.js | 7 ++++ blocks/amp-story/layer-inserter.js | 56 ++++++++++++++++++++++++++ 3 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 blocks/amp-story/layer-inserter.js diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css index c415d35b604..ca9f373c81f 100644 --- a/assets/css/amp-editor-story-blocks.css +++ b/assets/css/amp-editor-story-blocks.css @@ -4,6 +4,7 @@ div[data-type="amp/amp-story-page"] { .editor-block-list__layout div[data-type="amp/amp-story-page"] { padding: 0; + margin: 0 auto 30px; } @media (min-width: 600px) { @@ -15,11 +16,12 @@ div[data-type="amp/amp-story-page"] { div[data-type="amp/amp-story-page"] * { max-width: 100%; + max-height: 100%; } div[data-type="amp/amp-story-page"], div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__layout:first-of-type { - margin: auto !important; + margin: auto; max-height: 75vh !important; max-width: 45vh !important; min-width: 320px !important; diff --git a/blocks/amp-story/block-selector.js b/blocks/amp-story/block-selector.js index 017590d0c6d..7bddfd60bbf 100644 --- a/blocks/amp-story/block-selector.js +++ b/blocks/amp-story/block-selector.js @@ -17,6 +17,8 @@ const { selectBlock } = dispatch( 'core/editor' ); +import LayerInserter from './layer-inserter'; + class BlockSelector extends Component { render() { if ( ! this.props.rootClientId ) { @@ -61,6 +63,10 @@ class BlockSelector extends Component { className += ' is-selected'; } + const inserterProps = { + rootClientId: this.props.rootClientId + }; + links.push(
    • ); + // @todo Creating a custom inserter since the default inserter doesn't allow taking the root client ID dynamically. Change if that becomes available. return (
      diff --git a/blocks/amp-story/layer-inserter.js b/blocks/amp-story/layer-inserter.js index f15d9a0a5b6..1f84fea7e94 100644 --- a/blocks/amp-story/layer-inserter.js +++ b/blocks/amp-story/layer-inserter.js @@ -1,10 +1,17 @@ const { __ } = wp.i18n; const { IconButton } = wp.components; const { Component } = wp.element; +const { BlockIcon } = wp.editor; const { - createBlock + createBlock, + getBlockType, + getBlockMenuDefaultClassName } = wp.blocks; +const { + Dropdown +} = wp.components; + const { dispatch, select @@ -19,6 +26,26 @@ const { class LayerInserter extends Component { constructor() { super( ...arguments ); + + this.onToggle = this.onToggle.bind( this ); + } + + onInsertBlock( item, rootClientId ) { + const { name } = item; + const insertedBlock = createBlock( name ); + const rootBlock = getBlock( rootClientId ); + const index = rootBlock.innerBlocks.length ? rootBlock.innerBlocks.length : 0; + + insertBlock( insertedBlock, index, rootClientId ); + } + + onToggle( isOpen ) { + const { onToggle } = this.props; + + // Surface toggle callback to parent component + if ( onToggle ) { + onToggle( isOpen ); + } } render() { @@ -35,20 +62,94 @@ class LayerInserter extends Component { return null; } + const onInsertBlock = this.onInsertBlock; + return ( - { - // @todo This should actually probably open inserter menu with the choice for Grid and CTA Layer. - const newBlock = createBlock( 'amp/amp-story-grid-layer' ); - const rootBlock = getBlock( rootClientId ); - const index = rootBlock.innerBlocks.length ? rootBlock.innerBlocks.length : 0; - insertBlock( newBlock, index, rootClientId ); + ( + + + ) } + renderContent={ ( { onClose } ) => { + const onSelect = ( item ) => { + onInsertBlock( item, rootClientId ); + + onClose(); + }; + + // @todo If CTA layer is already added, don't display it here. + items = [ + getBlockType( 'amp/amp-story-grid-layer' ), + getBlockType( 'amp/amp-story-cta-layer' ) + ]; + + return ( +
      +
      +
        + { items.map( ( item ) => { + const itemIconStyle = item.icon ? { + backgroundColor: item.icon.background, + color: item.icon.foreground + } : {}; + const itemIconStackStyle = item.icon && item.icon.shadowColor ? { + backgroundColor: item.icon.shadowColor + } : {}; + + const className = 'editor-block-types-list__item ' + getBlockMenuDefaultClassName( item.name ); + + return ( +
      • + +
        • + ); + } ) } +
      + +
      +
      + ); } } - className="editor-inserter__amp-inserter" - > -       + /> ); } } From e5c84d09265a621e7945fea593458f82b00daf6e Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Thu, 23 Aug 2018 19:32:24 +0300 Subject: [PATCH 09/12] Extend blocks to allow configuring the position in thirds template. --- assets/css/amp-editor-story-blocks.css | 25 +- assets/js/amp-story-editor-blocks.js | 217 ++++++++++++++++++ blocks/amp-story/amp-story-cta-layer.js | 1 + blocks/amp-story/amp-story-grid-layer.js | 12 +- blocks/amp-story/layer-inserter.js | 2 +- includes/class-amp-story-post-type.php | 13 ++ .../class-amp-allowed-tags-generated.php | 1 + 7 files changed, 261 insertions(+), 10 deletions(-) create mode 100644 assets/js/amp-story-editor-blocks.js diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css index 8605858cb40..9977678cbe1 100644 --- a/assets/css/amp-editor-story-blocks.css +++ b/assets/css/amp-editor-story-blocks.css @@ -4,7 +4,7 @@ div[data-type="amp/amp-story-page"] { .editor-block-list__layout div[data-type="amp/amp-story-page"] { padding: 0; - margin: 0 auto 30px; + margin: 60px auto 0; } @media (min-width: 600px) { @@ -12,9 +12,10 @@ div[data-type="amp/amp-story-page"] { margin: 0; padding: 0; } - div[data-type="amp/amp-story-page"] .editor-inserter__popover:not(.is-mobile) > .components-popover__content { - height: 200px; - } +} + +.components-popover.editor-inserter__amp .components-popover__content { + height: 200px; } div[data-type="amp/amp-story-page"] * { @@ -54,6 +55,10 @@ div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__lay width: 100%; } +.amp-grid-template .editor-block-list__block { + overflow: hidden; +} + .amp-grid-template .editor-block-list__layout:first-of-type { display: grid; overflow: hidden; @@ -95,6 +100,18 @@ div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__lay grid-template-areas: "upper-third" "middle-third" "lower-third"; } +div[data-amp-position="upper-third"] { + grid-area: upper-third / lower-third / lower-third / lower-third; +} + +div[data-amp-position="middle-third"] { + grid-area: middle-third / lower-third / lower-third / lower-third; +} + +div[data-amp-position="lower-third"] { + grid-area: lower-third / lower-third / lower-third / lower-third; +} + .amp-grid-template-fill .editor-block-list__layout > :first-child { bottom: 0; diff --git a/assets/js/amp-story-editor-blocks.js b/assets/js/amp-story-editor-blocks.js new file mode 100644 index 00000000000..e2032db7110 --- /dev/null +++ b/assets/js/amp-story-editor-blocks.js @@ -0,0 +1,217 @@ +/* exported ampStoryEditorBlocks */ +/* global lodash */ +/* eslint no-magic-numbers: [ "error", { "ignore": [ -1 ] } ] */ + +var ampStoryEditorBlocks = ( function() { // eslint-disable-line no-unused-vars + var component, __; + + __ = wp.i18n.__; + + component = { + + /** + * Holds data. + */ + data: { + allowedBlocks: [ + 'core/code', + 'core/embed', + 'core/image', + 'core/list', + 'core/paragraph', + 'core/preformatted', + 'core/pullquote', + 'core/quote', + 'core/table', + 'core/verse', + 'core/video' + ], + ampStoryPositionOptions: [ + { + value: 'upper-third', + label: __( 'Upper Third', 'amp' ) + }, + { + value: 'middle-third', + label: __( 'Middle Third', 'amp' ) + }, + { + value: 'lower-third', + label: __( 'Lower Third', 'amp' ) + } + ] + } + }; + + /** + * Add filters. + */ + component.boot = function boot() { + wp.hooks.addFilter( 'blocks.registerBlockType', 'ampStoryEditorBlocks/addAttributes', component.addAMPAttributes ); + wp.hooks.addFilter( 'editor.BlockEdit', 'ampStoryEditorBlocks/filterEdit', component.filterBlocksEdit ); + wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-data-align', component.addWrapperProps ); + wp.hooks.addFilter( 'blocks.getSaveContent.extraProps', 'ampStoryEditorBlocks/addExtraAttributes', component.addAMPExtraProps ); + }; + + /** + * Add wrapper props to the blocks within AMP Story layers. + * + * @param {Object} BlockListBlock BlockListBlock element. + * @return {Function} Handler. + */ + component.addWrapperProps = function( BlockListBlock ) { + var el = wp.element.createElement, + select = wp.data.select( 'core/editor' ); + return function( props ) { + var parentClientId, + parentBlock, + ampStoryPosition; + if ( -1 === component.data.allowedBlocks.indexOf( props.block.name ) || ! props.block.attributes.ampStoryPosition ) { + return [ + el( BlockListBlock, _.extend( { + key: 'original' + }, props ) ) + ]; + } + + parentClientId = select.getBlockRootClientId( props.block.clientId ); + parentBlock = select.getBlock( parentClientId ); + ampStoryPosition = props.block.attributes.ampStoryPosition; + + if ( 'thirds' !== parentBlock.attributes.template ) { + ampStoryPosition = null; + } + + var newProps = lodash.assign( + {}, + props, + { + wrapperProps: lodash.assign( + {}, + props.wrapperProps, + { + 'data-amp-position': ampStoryPosition + } + ) + } + ); + + return el( + BlockListBlock, + newProps + ); + }; + }; + /** + * Add extra attributes to save to DB. + * + * @param {Object} props Properties. + * @param {Object} blockType Block type. + * @param {Object} attributes Attributes. + * @return {Object} Props. + */ + component.addAMPExtraProps = function addAMPExtraProps( props, blockType, attributes ) { + var ampAttributes = {}; + if ( -1 === component.data.allowedBlocks.indexOf( blockType.name ) ) { + return props; + } + + if ( attributes.ampStoryPosition ) { + ampAttributes[ 'grid-area' ] = attributes.ampStoryPosition; + } + + return _.extend( ampAttributes, props ); + }; + + /** + * Add AMP attributes to every allowed AMP Story block. + * + * @param {Object} settings Settings. + * @param {string} name Block name. + * @return {Object} Settings. + */ + component.addAMPAttributes = function addAMPAttributes( settings, name ) { + // Add the "thirds" template position option. + if ( -1 !== component.data.allowedBlocks.indexOf( name ) ) { + if ( ! settings.attributes ) { + settings.attributes = {}; + } + settings.attributes.ampStoryPosition = { + type: 'string' + }; + } + return settings; + }; + + /** + * Filters blocks edit function of all blocks. + * + * @param {Function} BlockEdit Edit function. + * @return {Function} Edit function. + */ + component.filterBlocksEdit = function filterBlocksEdit( BlockEdit ) { + var el = wp.element.createElement, + select = wp.data.select( 'core/editor' ); + + return function( props ) { + var attributes = props.attributes, + name = props.name, + inspectorControls, + InspectorControls = wp.editor.InspectorControls, + PanelBody = wp.components.PanelBody, + SelectControl = wp.components.SelectControl, + parentClientId = select.getBlockRootClientId( props.clientId ), + parentBlock; + + if ( -1 === component.data.allowedBlocks.indexOf( name ) ) { + // Return original. + return [ + el( BlockEdit, _.extend( { + key: 'original' + }, props ) ) + ]; + } + + parentBlock = select.getBlock( parentClientId ); + if ( 'amp/amp-story-grid-layer' !== parentBlock.name ) { + // Return original. + return [ + el( BlockEdit, _.extend( { + key: 'original' + }, props ) ) + ]; + } + + if ( 'thirds' !== parentBlock.attributes.template ) { + // Return original. + return [ + el( BlockEdit, _.extend( { + key: 'original' + }, props ) ) + ]; + } + + inspectorControls = el( InspectorControls, { key: 'inspector' }, + el( PanelBody, { title: __( 'AMP Story Settings', 'amp' ) }, + el( SelectControl, { + label: __( 'Placement', 'amp' ), + value: attributes.ampStoryPosition, + options: component.data.ampStoryPositionOptions, + onChange: function( value ) { + props.setAttributes( { ampStoryPosition: value } ); + } + } ) + ) + ); + + return [ + inspectorControls, + el( BlockEdit, _.extend( { + key: 'original' + }, props ) ) + ]; + }; + }; + + return component; +}() ); diff --git a/blocks/amp-story/amp-story-cta-layer.js b/blocks/amp-story/amp-story-cta-layer.js index fb6214a589a..9677b9ee3ec 100644 --- a/blocks/amp-story/amp-story-cta-layer.js +++ b/blocks/amp-story/amp-story-cta-layer.js @@ -50,6 +50,7 @@ export default registerBlockType( category: 'layout', icon: 'grid-view', parent: [ 'amp/amp-story-page' ], + inserter: false, /* * : diff --git a/blocks/amp-story/amp-story-grid-layer.js b/blocks/amp-story/amp-story-grid-layer.js index ff6e68f2415..b2a7f302fdc 100644 --- a/blocks/amp-story/amp-story-grid-layer.js +++ b/blocks/amp-story/amp-story-grid-layer.js @@ -58,10 +58,12 @@ export default registerBlockType( source: 'attribute', selector: 'amp-story-grid-layer', attribute: 'template', - default: 'fill' + default: 'horizontal' } }, + inserter: false, + /* * : * mandatory_ancestor: "AMP-STORY-PAGE" @@ -79,14 +81,14 @@ export default registerBlockType( label={ __( 'Template', 'amp' ) } value={ props.attributes.template } options={ [ - { - value: 'fill', - label: __( 'Fill', 'amp' ) - }, { value: 'horizontal', label: __( 'Horizontal', 'amp' ) }, + { + value: 'fill', + label: __( 'Fill', 'amp' ) + }, { value: 'thirds', label: __( 'Thirds', 'amp' ) diff --git a/blocks/amp-story/layer-inserter.js b/blocks/amp-story/layer-inserter.js index 1f84fea7e94..651ba1c2025 100644 --- a/blocks/amp-story/layer-inserter.js +++ b/blocks/amp-story/layer-inserter.js @@ -67,7 +67,7 @@ class LayerInserter extends Component { return ( ( diff --git a/includes/class-amp-story-post-type.php b/includes/class-amp-story-post-type.php index b649c90eaaa..3e5214075c6 100644 --- a/includes/class-amp-story-post-type.php +++ b/includes/class-amp-story-post-type.php @@ -147,6 +147,19 @@ public static function enqueue_block_editor_assets() { AMP__VERSION ); + // @todo Name the script better to distinguish. + wp_enqueue_script( + 'amp-story-editor-blocks', + amp_get_asset_url( 'js/amp-story-editor-blocks.js' ), + array( 'wp-blocks', 'lodash', 'wp-i18n', 'wp-element', 'wp-components' ), + AMP__VERSION + ); + + wp_add_inline_script( + 'amp-story-editor-blocks', + 'ampStoryEditorBlocks.boot();' + ); + wp_enqueue_script( 'amp-editor-story-blocks-build', amp_get_asset_url( 'js/amp-story-blocks-compiled.js' ), diff --git a/includes/sanitizers/class-amp-allowed-tags-generated.php b/includes/sanitizers/class-amp-allowed-tags-generated.php index c458ffe4327..c0cad1ed893 100644 --- a/includes/sanitizers/class-amp-allowed-tags-generated.php +++ b/includes/sanitizers/class-amp-allowed-tags-generated.php @@ -12185,6 +12185,7 @@ class AMP_Allowed_Tags_Generated { 'fallback' => array( 'value' => '', ), + 'grid-area' => array(), 'hidden' => array( 'value' => '', ), From 6ff0bf652521e6e6e9a1cbb8802e00e6963f8951 Mon Sep 17 00:00:00 2001 From: Miina Sikk Date: Wed, 29 Aug 2018 16:04:50 +0300 Subject: [PATCH 10/12] Add a partly working workaround for selectBlock issue. --- assets/css/amp-editor-story-blocks.css | 10 +++------- blocks/amp-story/amp-story-grid-layer.js | 10 +++++----- blocks/amp-story/block-selector.js | 13 +++++++++---- 3 files changed, 17 insertions(+), 16 deletions(-) diff --git a/assets/css/amp-editor-story-blocks.css b/assets/css/amp-editor-story-blocks.css index 9977678cbe1..68fe179ab18 100644 --- a/assets/css/amp-editor-story-blocks.css +++ b/assets/css/amp-editor-story-blocks.css @@ -55,10 +55,6 @@ div[data-type="amp/amp-story-page"] .editor-inner-blocks .editor-block-list__lay width: 100%; } -.amp-grid-template .editor-block-list__block { - overflow: hidden; -} - .amp-grid-template .editor-block-list__layout:first-of-type { display: grid; overflow: hidden; @@ -135,9 +131,9 @@ div[data-amp-position="lower-third"] { bottom: 0; } -.editor-block-list__layout div[data-type="amp/amp-story-grid-layer"], -.editor-block-list__layout div[data-type="amp/amp-story-cta-layer"] { - border: 1px solid #ddffdd; +.editor-block-list__layout div[data-type="amp/amp-story-grid-layer"].is-selected, +.editor-block-list__layout div[data-type="amp/amp-story-grid-layer"].is-selected .editor-block-list__block { + border: 1px dotted #99c2e0; } .editor-block-list__layout div[data-type="amp/amp-story-grid-layer"].is-selected ~ div[data-type="amp/amp-story-grid-layer"], diff --git a/blocks/amp-story/amp-story-grid-layer.js b/blocks/amp-story/amp-story-grid-layer.js index b2a7f302fdc..51c4ccaaa79 100644 --- a/blocks/amp-story/amp-story-grid-layer.js +++ b/blocks/amp-story/amp-story-grid-layer.js @@ -58,7 +58,7 @@ export default registerBlockType( source: 'attribute', selector: 'amp-story-grid-layer', attribute: 'template', - default: 'horizontal' + default: 'vertical' } }, @@ -82,8 +82,8 @@ export default registerBlockType( value={ props.attributes.template } options={ [ { - value: 'horizontal', - label: __( 'Horizontal', 'amp' ) + value: 'vertical', + label: __( 'Vertical', 'amp' ) }, { value: 'fill', @@ -94,8 +94,8 @@ export default registerBlockType( label: __( 'Thirds', 'amp' ) }, { - value: 'vertical', - label: __( 'Vertical', 'amp' ) + value: 'horizontal', + label: __( 'Horizontal', 'amp' ) } ] } onChange={ value => ( setAttributes( { template: value } ) ) } diff --git a/blocks/amp-story/block-selector.js b/blocks/amp-story/block-selector.js index 7830c13055e..0f2bcf430a5 100644 --- a/blocks/amp-story/block-selector.js +++ b/blocks/amp-story/block-selector.js @@ -44,12 +44,17 @@ class BlockSelector extends Component { } links.push(
    • - From b7afb232754bb14853739692694d5d76945c9339 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Wed, 29 Aug 2018 12:15:40 -0700 Subject: [PATCH 11/12] Ensure a singular AMP story always is_amp_endpoint --- includes/amp-helper-functions.php | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/includes/amp-helper-functions.php b/includes/amp-helper-functions.php index 957db06eab4..8202588eac0 100644 --- a/includes/amp-helper-functions.php +++ b/includes/amp-helper-functions.php @@ -272,6 +272,11 @@ function is_amp_endpoint() { _doing_it_wrong( __FUNCTION__, sprintf( esc_html__( "is_amp_endpoint() was called before the 'parse_query' hook was called. This function will always return 'false' before the 'parse_query' hook is called.", 'amp' ) ), '0.4.2' ); } + // AMP Stories are always an AMP endpoint. + if ( is_singular( AMP_Story_Post_Type::POST_TYPE_SLUG ) ) { + return true; + } + $has_amp_query_var = ( isset( $_GET[ amp_get_slug() ] ) // WPCS: CSRF OK. || From dc87187c3ca770c43e39f370aeb622f3f7c5d14c Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Wed, 29 Aug 2018 12:16:04 -0700 Subject: [PATCH 12/12] Ensure amp-runtime and Gutenberg block styles are included on story template --- includes/admin/class-amp-post-meta-box.php | 3 ++- includes/templates/single-amp_story.php | 6 +++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/includes/admin/class-amp-post-meta-box.php b/includes/admin/class-amp-post-meta-box.php index 38ce013e81c..9d148092ea1 100644 --- a/includes/admin/class-amp-post-meta-box.php +++ b/includes/admin/class-amp-post-meta-box.php @@ -150,7 +150,8 @@ public function enqueue_admin_assets() { self::ASSETS_HANDLE, amp_get_asset_url( 'js/amp-post-meta-box.js' ), array( 'jquery' ), - AMP__VERSION + AMP__VERSION, + false ); if ( current_theme_supports( 'amp' ) ) { diff --git a/includes/templates/single-amp_story.php b/includes/templates/single-amp_story.php index e6243d93853..5e9b17a0056 100644 --- a/includes/templates/single-amp_story.php +++ b/includes/templates/single-amp_story.php @@ -13,7 +13,11 @@ <?php echo esc_html( wp_get_document_title() ); ?> - do_items( array( 'amp-story' ) ); ?> + do_items( array( 'amp-runtime' ) ); // @todo Duplicate with AMP_Theme_Support::enqueue_assets(). + wp_styles()->do_items( array( 'wp-block-library' ) ); // @todo We need to allow a theme to enqueue their own AMP story styles. + ?>