Skip to content
Permalink
Browse files

Add image fill option to Media & Text block

  • Loading branch information...
frontdevde committed Mar 14, 2019
1 parent 8c51368 commit f24e6345c0df3972d221b310196776ecf8b46eed
@@ -0,0 +1,193 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import { noop } from 'lodash';

/**
* WordPress dependencies
*/
import {
InnerBlocks,
getColorClassName,
} from '@wordpress/block-editor';

/**
* Internal dependencies
*/
import { DEFAULT_MEDIA_WIDTH } from './index';

export default [
{
attributes: {
align: {
type: 'string',
default: 'wide',
},
backgroundColor: {
type: 'string',
},
customBackgroundColor: {
type: 'string',
},
mediaAlt: {
type: 'string',
source: 'attribute',
selector: 'figure img',
attribute: 'alt',
default: '',
},
mediaPosition: {
type: 'string',
default: 'left',
},
mediaId: {
type: 'number',
},
mediaUrl: {
type: 'string',
source: 'attribute',
selector: 'figure video,figure img',
attribute: 'src',
},
mediaType: {
type: 'string',
},
mediaWidth: {
type: 'number',
default: 50,
},
isStackedOnMobile: {
type: 'boolean',
default: false,
},
},
save( { attributes } ) {
const {
backgroundColor,
customBackgroundColor,
isStackedOnMobile,
mediaAlt,
mediaPosition,
mediaType,
mediaUrl,
mediaWidth,
mediaId,
} = attributes;
const mediaTypeRenders = {
image: () => <img src={ mediaUrl } alt={ mediaAlt } className={ ( mediaId && mediaType === 'image' ) ? `wp-image-${ mediaId }` : null } />,
video: () => <video controls src={ mediaUrl } />,
};
const backgroundClass = getColorClassName( 'background-color', backgroundColor );
const className = classnames( {
'has-media-on-the-right': 'right' === mediaPosition,
[ backgroundClass ]: backgroundClass,
'is-stacked-on-mobile': isStackedOnMobile,
} );
let gridTemplateColumns;
if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
gridTemplateColumns = 'right' === mediaPosition ? `auto ${ mediaWidth }%` : `${ mediaWidth }% auto`;
}
const style = {
backgroundColor: backgroundClass ? undefined : customBackgroundColor,
gridTemplateColumns,
};
return (
<div className={ className } style={ style }>
<figure className="wp-block-media-text__media" >
{ ( mediaTypeRenders[ mediaType ] || noop )() }
</figure>
<div className="wp-block-media-text__content">
<InnerBlocks.Content />
</div>
</div>
);
},
},
{
attributes: {
align: {
type: 'string',
default: 'wide',
},
backgroundColor: {
type: 'string',
},
customBackgroundColor: {
type: 'string',
},
mediaAlt: {
type: 'string',
source: 'attribute',
selector: 'figure img',
attribute: 'alt',
default: '',
},
mediaPosition: {
type: 'string',
default: 'left',
},
mediaId: {
type: 'number',
},
mediaUrl: {
type: 'string',
source: 'attribute',
selector: 'figure video,figure img',
attribute: 'src',
},
mediaType: {
type: 'string',
},
mediaWidth: {
type: 'number',
default: 50,
},
isStackedOnMobile: {
type: 'boolean',
default: false,
},
},
save( { attributes } ) {
const {
backgroundColor,
customBackgroundColor,
isStackedOnMobile,
mediaAlt,
mediaPosition,
mediaType,
mediaUrl,
mediaWidth,
} = attributes;
const mediaTypeRenders = {
image: () => <img src={ mediaUrl } alt={ mediaAlt } />,
video: () => <video controls src={ mediaUrl } />,
};
const backgroundClass = getColorClassName( 'background-color', backgroundColor );
const className = classnames( {
'has-media-on-the-right': 'right' === mediaPosition,
[ backgroundClass ]: backgroundClass,
'is-stacked-on-mobile': isStackedOnMobile,
} );

let gridTemplateColumns;
if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
gridTemplateColumns = 'right' === mediaPosition ? `auto ${ mediaWidth }%` : `${ mediaWidth }% auto`;
}
const style = {
backgroundColor: backgroundClass ? undefined : customBackgroundColor,
gridTemplateColumns,
};
return (
<div className={ className } style={ style }>
<figure className="wp-block-media-text__media" >
{ ( mediaTypeRenders[ mediaType ] || noop )() }
</figure>
<div className="wp-block-media-text__content">
<InnerBlocks.Content />
</div>
</div>
);
},
},
];
@@ -21,6 +21,7 @@ import {
TextareaControl,
ToggleControl,
Toolbar,
FocalPointPicker,
} from '@wordpress/components';
/**
* Internal dependencies
@@ -97,15 +98,15 @@ class MediaTextEdit extends Component {

renderMediaArea() {
const { attributes } = this.props;
const { mediaAlt, mediaId, mediaPosition, mediaType, mediaUrl, mediaWidth } = attributes;
const { mediaAlt, mediaId, mediaPosition, mediaType, mediaUrl, mediaWidth, imageFill, focalPoint } = attributes;

return (
<MediaContainer
className="block-library-media-text__media-container"
onSelectMedia={ this.onSelectMedia }
onWidthChange={ this.onWidthChange }
commitWidthChange={ this.commitWidthChange }
{ ...{ mediaAlt, mediaId, mediaType, mediaUrl, mediaPosition, mediaWidth } }
{ ...{ mediaAlt, mediaId, mediaType, mediaUrl, mediaPosition, mediaWidth, imageFill, focalPoint } }
/>
);
}
@@ -125,13 +126,17 @@ class MediaTextEdit extends Component {
mediaPosition,
mediaType,
mediaWidth,
mediaUrl,
imageFill,
focalPoint,
} = attributes;
const temporaryMediaWidth = this.state.mediaWidth;
const classNames = classnames( className, {
'has-media-on-the-right': 'right' === mediaPosition,
'is-selected': isSelected,
[ backgroundColor.class ]: backgroundColor.class,
'is-stacked-on-mobile': isStackedOnMobile,
'is-image-fill': imageFill,
} );
const widthString = `${ temporaryMediaWidth || mediaWidth }%`;
const style = {
@@ -166,6 +171,19 @@ class MediaTextEdit extends Component {
isStackedOnMobile: ! isStackedOnMobile,
} ) }
/>
{ mediaType === 'image' && ( <ToggleControl
label={ __( 'Let image fill the entire column' ) }
checked={ imageFill }
onChange={ () => setAttributes( {
imageFill: ! imageFill,
} ) }
/> ) }
{ imageFill && ( <FocalPointPicker
label={ __( 'Focal Point Picker' ) }
url={ mediaUrl }
value={ focalPoint }
onChange={ ( value ) => setAttributes( { focalPoint: value } ) }
/> ) }
{ mediaType === 'image' && ( <TextareaControl
label={ __( 'Alt Text (Alternative Text)' ) }
value={ mediaAlt }
@@ -22,6 +22,11 @@
width: 100% !important;
}

.wp-block-media-text.is-image-fill .editor-media-container__resizer {
// The resizer sets an inline height but for the image fill we set it to full height.
height: 100% !important;
}

.wp-block-media-text .block-editor-inner-blocks {
word-break: break-word;
grid-area: media-text-content;
@@ -19,8 +19,10 @@ import { __ } from '@wordpress/i18n';
*/
import edit from './edit';
import icon from './icon';
import deprecated from './deprecated';
import { imageFillStyles } from './media-container';

const DEFAULT_MEDIA_WIDTH = 50;
export const DEFAULT_MEDIA_WIDTH = 50;

export const name = 'core/media-text';

@@ -51,9 +53,6 @@ const blockAttributes = {
},
mediaUrl: {
type: 'string',
source: 'attribute',
selector: 'figure video,figure img',
attribute: 'src',
},
mediaType: {
type: 'string',
@@ -66,6 +65,13 @@ const blockAttributes = {
type: 'boolean',
default: false,
},
imageFill: {
type: 'boolean',
default: false,
},
focalPoint: {
type: 'object',
},
};

export const settings = {
@@ -156,16 +162,22 @@ export const settings = {
mediaUrl,
mediaWidth,
mediaId,
imageFill,
focalPoint,
} = attributes;
const imageFillStyle = imageFillStyles( mediaUrl, focalPoint );
const mediaTypeRenders = {
image: () => <img src={ mediaUrl } alt={ mediaAlt } className={ ( mediaId && mediaType === 'image' ) ? `wp-image-${ mediaId }` : null } />,
image: () => imageFill ?
<div style={ imageFillStyle } ></div> :
<img src={ mediaUrl } alt={ mediaAlt } className={ ( mediaId && mediaType === 'image' ) ? `wp-image-${ mediaId }` : null } />,
video: () => <video controls src={ mediaUrl } />,
};
const backgroundClass = getColorClassName( 'background-color', backgroundColor );
const className = classnames( {
'has-media-on-the-right': 'right' === mediaPosition,
[ backgroundClass ]: backgroundClass,
'is-stacked-on-mobile': isStackedOnMobile,
'is-image-fill': imageFill,
} );

let gridTemplateColumns;
@@ -188,50 +200,5 @@ export const settings = {
);
},

deprecated: [
{
attributes: blockAttributes,
save( { attributes } ) {
const {
backgroundColor,
customBackgroundColor,
isStackedOnMobile,
mediaAlt,
mediaPosition,
mediaType,
mediaUrl,
mediaWidth,
} = attributes;
const mediaTypeRenders = {
image: () => <img src={ mediaUrl } alt={ mediaAlt } />,
video: () => <video controls src={ mediaUrl } />,
};
const backgroundClass = getColorClassName( 'background-color', backgroundColor );
const className = classnames( {
'has-media-on-the-right': 'right' === mediaPosition,
[ backgroundClass ]: backgroundClass,
'is-stacked-on-mobile': isStackedOnMobile,
} );

let gridTemplateColumns;
if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
gridTemplateColumns = 'right' === mediaPosition ? `auto ${ mediaWidth }%` : `${ mediaWidth }% auto`;
}
const style = {
backgroundColor: backgroundClass ? undefined : customBackgroundColor,
gridTemplateColumns,
};
return (
<div className={ className } style={ style }>
<figure className="wp-block-media-text__media" >
{ ( mediaTypeRenders[ mediaType ] || noop )() }
</figure>
<div className="wp-block-media-text__content">
<InnerBlocks.Content />
</div>
</div>
);
},
},
],
deprecated,
};

0 comments on commit f24e634

Please sign in to comment.
You can’t perform that action at this time.