From 58f2f64d77fb2e08b408926c5d022cd2ac2c2ce8 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Wed, 6 Nov 2019 19:36:28 +0100 Subject: [PATCH 1/6] Block library: Patterns API integration with Media & Text block --- .../components/block-pattern-picker/index.js | 4 +- packages/block-library/src/columns/edit.js | 4 +- packages/block-library/src/media-text/edit.js | 48 ++++++++++++++++- .../block-library/src/media-text/index.js | 2 + .../block-library/src/media-text/patterns.js | 51 +++++++++++++++++++ packages/components/src/placeholder/index.js | 7 ++- 6 files changed, 109 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/block-pattern-picker/index.js b/packages/block-editor/src/components/block-pattern-picker/index.js index b0abe60066f2fa..3b2b0a1c05383f 100644 --- a/packages/block-editor/src/components/block-pattern-picker/index.js +++ b/packages/block-editor/src/components/block-pattern-picker/index.js @@ -42,7 +42,7 @@ function BlockPatternPicker( { isLarge icon={ pattern.icon } size={ 48 } - onClick={ () => onSelect( pattern.innerBlocks ) } + onClick={ () => onSelect( pattern ) } className="block-editor-block-pattern-picker__pattern" label={ pattern.label } /> @@ -54,7 +54,7 @@ function BlockPatternPicker( {
diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index f550523ac3f84d..ff78f349915cdc 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -107,8 +107,8 @@ export function ColumnsEdit( {
{ - setTemplate( nextTemplate ); + __experimentalOnSelectPattern={ ( nextTemplate = defaultPattern ) => { + setTemplate( nextTemplate.innerBlocks ); setForceUseTemplate( true ); } } __experimentalAllowPatternSkip diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 94495a7d635d65..455a6dc6de6097 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -10,13 +10,14 @@ import { get } from 'lodash'; import { __, _x } from '@wordpress/i18n'; import { BlockControls, + __experimentalBlockPatternPicker, BlockVerticalAlignmentToolbar, InnerBlocks, InspectorControls, PanelColorSettings, withColors, } from '@wordpress/block-editor'; -import { Component } from '@wordpress/element'; +import { Component, useState } from '@wordpress/element'; import { PanelBody, TextareaControl, @@ -25,9 +26,12 @@ import { ExternalLink, FocalPointPicker, } from '@wordpress/components'; +import { useSelect } from '@wordpress/data'; + /** * Internal dependencies */ +import icon from './icon'; import MediaContainer from './media-container'; /** @@ -244,4 +248,44 @@ class MediaTextEdit extends Component { } } -export default withColors( 'backgroundColor' )( MediaTextEdit ); +const MediaTextEditWithColors = withColors( 'backgroundColor' )( MediaTextEdit ); + +const MediaTextEditPatternPicker = ( props ) => { + const blockName = 'core/media-text'; + const { defaultPattern, patterns } = useSelect( ( select ) => { + const { + __experimentalGetBlockPatterns, + __experimentalGetDefaultBlockPattern, + } = select( 'core/blocks' ); + + return { + patterns: __experimentalGetBlockPatterns( blockName ), + defaultPattern: __experimentalGetDefaultBlockPattern( blockName ), + }; + } ); + + const [ pattern, setPattern ] = useState( null ); + + if ( pattern ) { + return ( + + ); + } + + return ( + <__experimentalBlockPatternPicker + icon={ icon } + label={ __( 'Media & Text' ) } + patterns={ patterns } + onSelect={ ( nextPattern = defaultPattern ) => { + if ( nextPattern.attributes ) { + props.setAttributes( nextPattern.attributes ); + } + setPattern( nextPattern ); + } } + allowSkip + /> + ); +}; + +export default MediaTextEditPatternPicker; diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js index 73f1ee2080a1b4..a57ef0dc8d4424 100644 --- a/packages/block-library/src/media-text/index.js +++ b/packages/block-library/src/media-text/index.js @@ -10,6 +10,7 @@ import deprecated from './deprecated'; import edit from './edit'; import icon from './icon'; import metadata from './block.json'; +import patterns from './patterns'; import save from './save'; import transforms from './transforms'; @@ -26,6 +27,7 @@ export const settings = { align: [ 'wide', 'full' ], html: false, }, + patterns, example: { attributes: { mediaType: 'image', diff --git a/packages/block-library/src/media-text/patterns.js b/packages/block-library/src/media-text/patterns.js index e69de29bb2d1d6..540a3627516ed0 100644 --- a/packages/block-library/src/media-text/patterns.js +++ b/packages/block-library/src/media-text/patterns.js @@ -0,0 +1,51 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Template option choices for predefined columns layouts. + * + * @type {WPBlockPattern[]} + */ +const patterns = [ + { + name: 'media-left-equal', + label: __( 'Media on left; equal split' ), + icon: 'align-pull-left', + isDefault: true, + attributes: { + mediaPosition: 'left', + mediaWidth: 50, + }, + }, + { + name: 'media-left-one-third-two-thirds', + label: __( 'Media on left; one-third, two-thirds split' ), + icon: 'align-pull-left', + attributes: { + mediaPosition: 'left', + mediaWidth: 33.33, + }, + }, + { + name: 'media-right-two-thirds-one-thirds', + label: __( 'Media on right; two-thirds, one-third split' ), + icon: 'align-pull-right', + attributes: { + mediaPosition: 'right', + mediaWidth: 33.33, + }, + }, + { + name: 'media-right-equal', + label: __( 'Media on right; equal split' ), + icon: 'align-pull-right', + attributes: { + mediaPosition: 'right', + mediaWidth: 50, + }, + }, +]; + +export default patterns; diff --git a/packages/components/src/placeholder/index.js b/packages/components/src/placeholder/index.js index 3a7c40c993001f..c4f01e47ad7c5b 100644 --- a/packages/components/src/placeholder/index.js +++ b/packages/components/src/placeholder/index.js @@ -4,6 +4,11 @@ import classnames from 'classnames'; import { isString } from 'lodash'; +/** + * WordPress dependencies + */ +import { cloneElement } from '@wordpress/element'; + /** * Internal dependencies */ @@ -27,7 +32,7 @@ function Placeholder( { icon, children, label, instructions, className, notices,
}
- { isString( icon ) ? : icon } + { isString( icon ) ? : cloneElement( icon, { height: 24, width: 24 } ) } { label }
{ !! instructions &&
{ instructions }
} From 81e6313656140547e627a33f5adf1cc1575cda75 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Thu, 7 Nov 2019 14:11:51 +0100 Subject: [PATCH 2/6] Add support for blocks icon and title --- packages/block-library/src/media-text/edit.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 455a6dc6de6097..9d37bde7dfd850 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -31,7 +31,6 @@ import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import icon from './icon'; import MediaContainer from './media-container'; /** @@ -251,18 +250,20 @@ class MediaTextEdit extends Component { const MediaTextEditWithColors = withColors( 'backgroundColor' )( MediaTextEdit ); const MediaTextEditPatternPicker = ( props ) => { - const blockName = 'core/media-text'; - const { defaultPattern, patterns } = useSelect( ( select ) => { + const { name } = props; + const { blockType, defaultPattern, patterns } = useSelect( ( select ) => { const { __experimentalGetBlockPatterns, + getBlockType, __experimentalGetDefaultBlockPattern, } = select( 'core/blocks' ); return { - patterns: __experimentalGetBlockPatterns( blockName ), - defaultPattern: __experimentalGetDefaultBlockPattern( blockName ), + blockType: getBlockType( name ), + defaultPattern: __experimentalGetDefaultBlockPattern( name ), + patterns: __experimentalGetBlockPatterns( name ), }; - } ); + }, [ name ] ); const [ pattern, setPattern ] = useState( null ); @@ -274,8 +275,8 @@ const MediaTextEditPatternPicker = ( props ) => { return ( <__experimentalBlockPatternPicker - icon={ icon } - label={ __( 'Media & Text' ) } + icon={ get( blockType, [ 'icon', 'src' ] ) } + label={ get( blockType, [ 'title' ] ) } patterns={ patterns } onSelect={ ( nextPattern = defaultPattern ) => { if ( nextPattern.attributes ) { From 7e7fc501ac7c1efa403e2cbce73a19430152a233 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Fri, 8 Nov 2019 08:25:30 +0100 Subject: [PATCH 3/6] Move edit code to subfolder in Media & Text block --- packages/block-library/src/media-text/deprecated.js | 2 +- .../src/media-text/{ => edit}/icon-retry.native.js | 0 .../src/media-text/{edit.js => edit/index.js} | 0 .../{edit.native.js => edit/index.native.js} | 2 +- .../src/media-text/{ => edit}/media-container-icon.js | 0 .../src/media-text/{ => edit}/media-container.js | 10 +--------- .../media-text/{ => edit}/media-container.native.js | 2 +- packages/block-library/src/media-text/save.js | 2 +- packages/block-library/src/media-text/shared.js | 8 ++++++++ 9 files changed, 13 insertions(+), 13 deletions(-) rename packages/block-library/src/media-text/{ => edit}/icon-retry.native.js (100%) rename packages/block-library/src/media-text/{edit.js => edit/index.js} (100%) rename packages/block-library/src/media-text/{edit.native.js => edit/index.native.js} (99%) rename packages/block-library/src/media-text/{ => edit}/media-container-icon.js (100%) rename packages/block-library/src/media-text/{ => edit}/media-container.js (94%) rename packages/block-library/src/media-text/{ => edit}/media-container.native.js (99%) create mode 100644 packages/block-library/src/media-text/shared.js diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js index 721a6cf7f3a318..48ebad81a434b5 100644 --- a/packages/block-library/src/media-text/deprecated.js +++ b/packages/block-library/src/media-text/deprecated.js @@ -15,7 +15,7 @@ import { /** * Internal dependencies */ -import { imageFillStyles } from './media-container'; +import { imageFillStyles } from './shared'; const DEFAULT_MEDIA_WIDTH = 50; diff --git a/packages/block-library/src/media-text/icon-retry.native.js b/packages/block-library/src/media-text/edit/icon-retry.native.js similarity index 100% rename from packages/block-library/src/media-text/icon-retry.native.js rename to packages/block-library/src/media-text/edit/icon-retry.native.js diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit/index.js similarity index 100% rename from packages/block-library/src/media-text/edit.js rename to packages/block-library/src/media-text/edit/index.js diff --git a/packages/block-library/src/media-text/edit.native.js b/packages/block-library/src/media-text/edit/index.native.js similarity index 99% rename from packages/block-library/src/media-text/edit.native.js rename to packages/block-library/src/media-text/edit/index.native.js index 009eb4bbbcb256..2fae7b7427b173 100644 --- a/packages/block-library/src/media-text/edit.native.js +++ b/packages/block-library/src/media-text/edit/index.native.js @@ -25,7 +25,7 @@ import { withViewportMatch } from '@wordpress/viewport'; * Internal dependencies */ import MediaContainer from './media-container'; -import styles from './style.scss'; +import styles from '../style.scss'; /** * Constants diff --git a/packages/block-library/src/media-text/media-container-icon.js b/packages/block-library/src/media-text/edit/media-container-icon.js similarity index 100% rename from packages/block-library/src/media-text/media-container-icon.js rename to packages/block-library/src/media-text/edit/media-container-icon.js diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/edit/media-container.js similarity index 94% rename from packages/block-library/src/media-text/media-container.js rename to packages/block-library/src/media-text/edit/media-container.js index fce35487d6a03b..c20dc5f0366cbd 100644 --- a/packages/block-library/src/media-text/media-container.js +++ b/packages/block-library/src/media-text/edit/media-container.js @@ -17,21 +17,13 @@ import { withDispatch } from '@wordpress/data'; * Internal dependencies */ import icon from './media-container-icon'; +import { imageFillStyles } from '../shared'; /** * Constants */ const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ]; -export function imageFillStyles( url, focalPoint ) { - return url ? - { - backgroundImage: `url(${ url })`, - backgroundPosition: focalPoint ? `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%` : `50% 50%`, - } : - {}; -} - class MediaContainer extends Component { constructor() { super( ...arguments ); diff --git a/packages/block-library/src/media-text/media-container.native.js b/packages/block-library/src/media-text/edit/media-container.native.js similarity index 99% rename from packages/block-library/src/media-text/media-container.native.js rename to packages/block-library/src/media-text/edit/media-container.native.js index fea6a9671965c4..192566ebba9e10 100644 --- a/packages/block-library/src/media-text/media-container.native.js +++ b/packages/block-library/src/media-text/edit/media-container.native.js @@ -35,7 +35,7 @@ import { compose, withPreferredColorScheme } from '@wordpress/compose'; /** * Internal dependencies */ -import styles from './style.scss'; +import styles from '../style.scss'; import icon from './media-container-icon'; import SvgIconRetry from './icon-retry'; diff --git a/packages/block-library/src/media-text/save.js b/packages/block-library/src/media-text/save.js index 8d4529173948e6..7a2fed9849f676 100644 --- a/packages/block-library/src/media-text/save.js +++ b/packages/block-library/src/media-text/save.js @@ -15,7 +15,7 @@ import { /** * Internal dependencies */ -import { imageFillStyles } from './media-container'; +import { imageFillStyles } from './shared'; const DEFAULT_MEDIA_WIDTH = 50; diff --git a/packages/block-library/src/media-text/shared.js b/packages/block-library/src/media-text/shared.js new file mode 100644 index 00000000000000..103b3e4a2b12ae --- /dev/null +++ b/packages/block-library/src/media-text/shared.js @@ -0,0 +1,8 @@ +export function imageFillStyles( url, focalPoint ) { + return url ? + { + backgroundImage: `url(${ url })`, + backgroundPosition: focalPoint ? `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%` : `50% 50%`, + } : + {}; +} From d8b0dea7a3696664f3cd56dc853ccedfa2c9631c Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Fri, 8 Nov 2019 08:30:30 +0100 Subject: [PATCH 4/6] Move Media & Text edit actual implementation to its own file --- .../src/media-text/edit/{index.js => media-text-container.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/block-library/src/media-text/edit/{index.js => media-text-container.js} (100%) diff --git a/packages/block-library/src/media-text/edit/index.js b/packages/block-library/src/media-text/edit/media-text-container.js similarity index 100% rename from packages/block-library/src/media-text/edit/index.js rename to packages/block-library/src/media-text/edit/media-text-container.js From e78cd90100a72651056dbc6386b49ca4414d81d1 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Fri, 8 Nov 2019 08:34:58 +0100 Subject: [PATCH 5/6] Update Media & Text edit implementation to contain only the pattern picker wrapper --- .../src/media-text/edit/index.js | 58 +++++++++++++++++++ .../media-text/edit/media-text-container.js | 50 +--------------- 2 files changed, 61 insertions(+), 47 deletions(-) create mode 100644 packages/block-library/src/media-text/edit/index.js diff --git a/packages/block-library/src/media-text/edit/index.js b/packages/block-library/src/media-text/edit/index.js new file mode 100644 index 00000000000000..b76c120d6e15d8 --- /dev/null +++ b/packages/block-library/src/media-text/edit/index.js @@ -0,0 +1,58 @@ +/** + * External dependencies + */ +import { get } from 'lodash'; + +/** + * WordPress dependencies + */ +import { __experimentalBlockPatternPicker } from '@wordpress/block-editor'; +import { useSelect } from '@wordpress/data'; +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import MediaTextContainer from './media-text-container'; + +const MediaTextEdit = ( props ) => { + const { name } = props; + const { blockType, defaultPattern, patterns } = useSelect( ( select ) => { + const { + __experimentalGetBlockPatterns, + getBlockType, + __experimentalGetDefaultBlockPattern, + } = select( 'core/blocks' ); + + return { + blockType: getBlockType( name ), + defaultPattern: __experimentalGetDefaultBlockPattern( name ), + patterns: __experimentalGetBlockPatterns( name ), + }; + }, [ name ] ); + + const [ pattern, setPattern ] = useState( null ); + + if ( pattern ) { + return ( + + ); + } + + return ( + <__experimentalBlockPatternPicker + icon={ get( blockType, [ 'icon', 'src' ] ) } + label={ get( blockType, [ 'title' ] ) } + patterns={ patterns } + onSelect={ ( nextPattern = defaultPattern ) => { + if ( nextPattern.attributes ) { + props.setAttributes( nextPattern.attributes ); + } + setPattern( nextPattern ); + } } + allowSkip + /> + ); +}; + +export default MediaTextEdit; diff --git a/packages/block-library/src/media-text/edit/media-text-container.js b/packages/block-library/src/media-text/edit/media-text-container.js index 9d37bde7dfd850..328b2a169aed73 100644 --- a/packages/block-library/src/media-text/edit/media-text-container.js +++ b/packages/block-library/src/media-text/edit/media-text-container.js @@ -10,14 +10,13 @@ import { get } from 'lodash'; import { __, _x } from '@wordpress/i18n'; import { BlockControls, - __experimentalBlockPatternPicker, BlockVerticalAlignmentToolbar, InnerBlocks, InspectorControls, PanelColorSettings, withColors, } from '@wordpress/block-editor'; -import { Component, useState } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { PanelBody, TextareaControl, @@ -26,7 +25,6 @@ import { ExternalLink, FocalPointPicker, } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -43,7 +41,7 @@ const TEMPLATE = [ const WIDTH_CONSTRAINT_PERCENTAGE = 15; const applyWidthConstraints = ( width ) => Math.max( WIDTH_CONSTRAINT_PERCENTAGE, Math.min( width, 100 - WIDTH_CONSTRAINT_PERCENTAGE ) ); -class MediaTextEdit extends Component { +class MediaTextContainer extends Component { constructor() { super( ...arguments ); @@ -247,46 +245,4 @@ class MediaTextEdit extends Component { } } -const MediaTextEditWithColors = withColors( 'backgroundColor' )( MediaTextEdit ); - -const MediaTextEditPatternPicker = ( props ) => { - const { name } = props; - const { blockType, defaultPattern, patterns } = useSelect( ( select ) => { - const { - __experimentalGetBlockPatterns, - getBlockType, - __experimentalGetDefaultBlockPattern, - } = select( 'core/blocks' ); - - return { - blockType: getBlockType( name ), - defaultPattern: __experimentalGetDefaultBlockPattern( name ), - patterns: __experimentalGetBlockPatterns( name ), - }; - }, [ name ] ); - - const [ pattern, setPattern ] = useState( null ); - - if ( pattern ) { - return ( - - ); - } - - return ( - <__experimentalBlockPatternPicker - icon={ get( blockType, [ 'icon', 'src' ] ) } - label={ get( blockType, [ 'title' ] ) } - patterns={ patterns } - onSelect={ ( nextPattern = defaultPattern ) => { - if ( nextPattern.attributes ) { - props.setAttributes( nextPattern.attributes ); - } - setPattern( nextPattern ); - } } - allowSkip - /> - ); -}; - -export default MediaTextEditPatternPicker; +export default withColors( 'backgroundColor' )( MediaTextContainer ); From 6bd5fef8c5c09cf29af8257c0c99f48e7f9e16c3 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Fri, 8 Nov 2019 09:55:37 +0100 Subject: [PATCH 6/6] Make the Patterns API work with Media & Text block by laveraging the inner block concept Props to @aduth for proposing this solution. --- packages/block-library/src/columns/edit.js | 4 +-- .../src/media-text/edit/index.js | 32 +++++++++++++------ .../media-text/edit/media-text-container.js | 9 +----- .../block-library/src/media-text/patterns.js | 10 +++++- 4 files changed, 35 insertions(+), 20 deletions(-) diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index ff78f349915cdc..01c6c240bfba02 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -107,8 +107,8 @@ export function ColumnsEdit( {
{ - setTemplate( nextTemplate.innerBlocks ); + __experimentalOnSelectPattern={ ( nextPattern = defaultPattern ) => { + setTemplate( nextPattern.innerBlocks ); setForceUseTemplate( true ); } } __experimentalAllowPatternSkip diff --git a/packages/block-library/src/media-text/edit/index.js b/packages/block-library/src/media-text/edit/index.js index b76c120d6e15d8..492cf201a35abb 100644 --- a/packages/block-library/src/media-text/edit/index.js +++ b/packages/block-library/src/media-text/edit/index.js @@ -1,23 +1,31 @@ /** * External dependencies */ -import { get } from 'lodash'; +import { get, map } from 'lodash'; /** * WordPress dependencies */ +import { createBlock } from '@wordpress/blocks'; import { __experimentalBlockPatternPicker } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; -import { useState } from '@wordpress/element'; +import { useDispatch, useSelect } from '@wordpress/data'; /** * Internal dependencies */ import MediaTextContainer from './media-text-container'; +const createBlocksFromInnerBlocksTemplate = ( innerBlocksTemplate ) => { + return map( + innerBlocksTemplate, + ( [ name, attributes, innerBlocks = [] ] ) => + createBlock( name, attributes, createBlocksFromInnerBlocksTemplate( innerBlocks ) ) + ); +}; + const MediaTextEdit = ( props ) => { - const { name } = props; - const { blockType, defaultPattern, patterns } = useSelect( ( select ) => { + const { clientId, name } = props; + const { blockType, defaultPattern, hasInnerBlocks, patterns } = useSelect( ( select ) => { const { __experimentalGetBlockPatterns, getBlockType, @@ -27,13 +35,14 @@ const MediaTextEdit = ( props ) => { return { blockType: getBlockType( name ), defaultPattern: __experimentalGetDefaultBlockPattern( name ), + hasInnerBlocks: select( 'core/block-editor' ).getBlocks( clientId ).length > 0, patterns: __experimentalGetBlockPatterns( name ), }; - }, [ name ] ); + }, [ clientId, name ] ); - const [ pattern, setPattern ] = useState( null ); + const { replaceInnerBlocks } = useDispatch( 'core/block-editor' ); - if ( pattern ) { + if ( hasInnerBlocks ) { return ( ); @@ -48,7 +57,12 @@ const MediaTextEdit = ( props ) => { if ( nextPattern.attributes ) { props.setAttributes( nextPattern.attributes ); } - setPattern( nextPattern ); + if ( nextPattern.innerBlocks ) { + replaceInnerBlocks( + props.clientId, + createBlocksFromInnerBlocksTemplate( nextPattern.innerBlocks ) + ); + } } } allowSkip /> diff --git a/packages/block-library/src/media-text/edit/media-text-container.js b/packages/block-library/src/media-text/edit/media-text-container.js index 328b2a169aed73..71c93f76ab97f9 100644 --- a/packages/block-library/src/media-text/edit/media-text-container.js +++ b/packages/block-library/src/media-text/edit/media-text-container.js @@ -7,7 +7,7 @@ import { get } from 'lodash'; /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { BlockControls, BlockVerticalAlignmentToolbar, @@ -31,12 +31,6 @@ import { */ import MediaContainer from './media-container'; -/** - * Constants - */ -const TEMPLATE = [ - [ 'core/paragraph', { fontSize: 'large', placeholder: _x( 'Content…', 'content placeholder' ) } ], -]; // this limits the resize to a safe zone to avoid making broken layouts const WIDTH_CONSTRAINT_PERCENTAGE = 15; const applyWidthConstraints = ( width ) => Math.max( WIDTH_CONSTRAINT_PERCENTAGE, Math.min( width, 100 - WIDTH_CONSTRAINT_PERCENTAGE ) ); @@ -236,7 +230,6 @@ class MediaTextContainer extends Component {
{ this.renderMediaArea() }
diff --git a/packages/block-library/src/media-text/patterns.js b/packages/block-library/src/media-text/patterns.js index 540a3627516ed0..2b70199c6831c2 100644 --- a/packages/block-library/src/media-text/patterns.js +++ b/packages/block-library/src/media-text/patterns.js @@ -1,7 +1,11 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; + +const innerBlocks = [ + [ 'core/paragraph', { fontSize: 'large', placeholder: _x( 'Content…', 'content placeholder' ) } ], +]; /** * Template option choices for predefined columns layouts. @@ -18,6 +22,7 @@ const patterns = [ mediaPosition: 'left', mediaWidth: 50, }, + innerBlocks, }, { name: 'media-left-one-third-two-thirds', @@ -27,6 +32,7 @@ const patterns = [ mediaPosition: 'left', mediaWidth: 33.33, }, + innerBlocks, }, { name: 'media-right-two-thirds-one-thirds', @@ -36,6 +42,7 @@ const patterns = [ mediaPosition: 'right', mediaWidth: 33.33, }, + innerBlocks, }, { name: 'media-right-equal', @@ -45,6 +52,7 @@ const patterns = [ mediaPosition: 'right', mediaWidth: 50, }, + innerBlocks, }, ];