diff --git a/blocks/library/embed/index.js b/blocks/library/embed/index.js index 664b533abfa89..8577fa0488b70 100644 --- a/blocks/library/embed/index.js +++ b/blocks/library/embed/index.js @@ -13,6 +13,20 @@ import Editable from '../../editable'; const { attr, children } = query; +/** + * Returns an attribute setter with behavior that if the target value is + * already the assigned attribute value, it will be set to undefined. + * + * @param {string} align Alignment value + * @return {Function} Attribute setter + */ +function toggleAlignment( align ) { + return ( attributes, setAttributes ) => { + const nextAlign = attributes.align === align ? undefined : align; + setAttributes( { align: nextAlign } ); + }; +} + registerBlock( 'core/embed', { title: wp.i18n.__( 'Embed' ), @@ -26,6 +40,40 @@ registerBlock( 'core/embed', { caption: children( 'figcaption' ), }, + controls: [ + { + icon: 'align-left', + title: wp.i18n.__( 'Align left' ), + isActive: ( { align } ) => 'left' === align, + onClick: toggleAlignment( 'left' ), + }, + { + icon: 'align-center', + title: wp.i18n.__( 'Align center' ), + isActive: ( { align } ) => ! align || 'center' === align, + onClick: toggleAlignment( 'center' ), + }, + { + icon: 'align-right', + title: wp.i18n.__( 'Align right' ), + isActive: ( { align } ) => 'right' === align, + onClick: toggleAlignment( 'right' ), + }, + { + icon: 'align-full-width', + title: wp.i18n.__( 'Wide width' ), + isActive: ( { align } ) => 'wide' === align, + onClick: toggleAlignment( 'wide' ), + }, + ], + + getEditWrapperProps( attributes ) { + const { align } = attributes; + if ( 'left' === align || 'right' === align || 'wide' === align ) { + return { 'data-align': align }; + } + }, + edit( { attributes, setAttributes, focus, setFocus } ) { const { url, title, caption } = attributes; diff --git a/blocks/library/embed/style.scss b/blocks/library/embed/style.scss index af0897ec53ca8..3b4a11df46927 100644 --- a/blocks/library/embed/style.scss +++ b/blocks/library/embed/style.scss @@ -16,3 +16,45 @@ width: 100%; height: 100%; } + +div[data-type="core/embed"] { + &[data-align="left"], + &[data-align="right"] { + // Without z-index, won't be clickable as "above" adjacent content + z-index: z-index( '.editor-visual-editor__block {core/image aligned left or right}' ); + width: 370px; + } + + &[data-align="left"] { + float: left; + margin-right: $block-padding; + } + + &[data-align="right"] { + float: right; + margin-left: $block-padding; + } + + &[data-align="wide"] { + padding-left: 0; + padding-right: 0; + margin-right: -#{ $block-padding + $block-mover-margin }; /* Compensate for .editor-visual-editor centering padding */ + + &:before { + left: 0; + border-left-width: 0; + border-right-width: 0; + } + + .editor-block-mover { + display: none; + } + + .editor-visual-editor__block-controls { + max-width: #{ $visual-editor-max-width - $block-padding - ( $block-padding * 2 + $block-mover-margin ) }; + margin-left: auto; + margin-right: auto; + } + + } +} diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js index 17e264b09fd4a..43250cef64b21 100644 --- a/blocks/library/image/index.js +++ b/blocks/library/image/index.js @@ -50,7 +50,7 @@ registerBlock( 'core/image', { { icon: 'align-center', title: wp.i18n.__( 'Align center' ), - isActive: ( { align } ) => 'center' === align, + isActive: ( { align } ) => ! align || 'center' === align, onClick: toggleAlignment( 'center' ), }, {