Skip to content

Commit

Permalink
[45c1920ef] (+1 squashed commit)
Browse files Browse the repository at this point in the history
Squashed commits:
[3dbd4cee8] Squashed commits:
[c9daa7092] Improved toolbar order (+6 squashed commits)
Squashed commits:
[f202072bf] #9634 cherry picked tempararly; This commit should be deleted as soon as the other PR is merged
[a09172386] Only use align wide & full
[1bf29ba] Corrected media labels
[173a298a1] Revisions to align style; Show resizer only when media is set.
[6a94b169d] Change sizing mechanism to apply width directly to the media elements (video/img)
[12ede9625] Half image Block
  • Loading branch information
jorgefilipecosta committed Sep 10, 2018
1 parent 2fa3d3d commit 8e3e2c9
Show file tree
Hide file tree
Showing 12 changed files with 487 additions and 0 deletions.
2 changes: 2 additions & 0 deletions block-library/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import * as column from '../packages/block-library/src/columns/column';
import * as coverImage from '../packages/block-library/src/cover-image';
import * as embed from '../packages/block-library/src/embed';
import * as file from '../packages/block-library/src/file';
import * as halfMedia from '../packages/block-library/src/layout-half-media';
import * as latestComments from '../packages/block-library/src/latest-comments';
import * as latestPosts from '../packages/block-library/src/latest-posts';
import * as list from '../packages/block-library/src/list';
Expand Down Expand Up @@ -77,6 +78,7 @@ export const registerCoreBlocks = () => {
...embed.others,
file,
freeform,
halfMedia,
html,
latestComments,
latestPosts,
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
@import "./image/editor.scss";
@import "./latest-comments/editor.scss";
@import "./latest-posts/editor.scss";
@import "./layout-half-media/editor.scss";
@import "./list/editor.scss";
@import "./more/editor.scss";
@import "./nextpage/editor.scss";
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import * as column from './columns/column';
import * as coverImage from './cover-image';
import * as embed from './embed';
import * as file from './file';
import * as halfMedia from './layout-half-media';
import * as latestComments from './latest-comments';
import * as latestPosts from './latest-posts';
import * as list from './list';
Expand Down Expand Up @@ -67,6 +68,7 @@ export const registerCoreBlocks = () => {
...embed.common,
...embed.others,
file,
halfMedia,
latestComments,
latestPosts,
more,
Expand Down
154 changes: 154 additions & 0 deletions packages/block-library/src/layout-half-media/edit.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import { get } from 'lodash';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import {
BlockControls,
InnerBlocks,
InspectorControls,
PanelColorSettings,
withColors,
MediaContainer,
} from '@wordpress/editor';
import { Component, Fragment } from '@wordpress/element';
import { Toolbar } from '@wordpress/components';

/**
* Constants
*/
const ALLOWED_BLOCKS = [ 'core/button', 'core/paragraph', 'core/heading', 'core/list' ];
const TEMPLATE = [
[ 'core/paragraph', { fontSize: 'large', placeholder: 'Content…' } ],
];
const MAX_MEDIA_WIDTH = 900;

class ImageEdit extends Component {
constructor() {
super( ...arguments );

this.onSelectMedia = this.onSelectMedia.bind( this );
this.onWidthChange = this.onWidthChange.bind( this );
}

onSelectMedia( media ) {
const { setAttributes } = this.props;
let newMediaWidth;
if ( media.width ) {
newMediaWidth = parseInt( media.width );
} else {
const fullSizeWidth = get( media, [ 'sizes', 'full', 'width' ] );
if ( fullSizeWidth ) {
newMediaWidth = parseInt( fullSizeWidth );
}
}

const mediaWidthProp = Number.isFinite( newMediaWidth ) ?
{ mediaWidth: Math.min( newMediaWidth, MAX_MEDIA_WIDTH ) } :
{};

let mediaType;
// for media selections originated from a file upload.
if ( media.media_type ) {
if ( media.media_type === 'image' ) {
mediaType = 'image';
} else {
// only images and videos are accepted so if the media_type is not an image we can assume it is a video.
// video contain the media type of 'file' in the object returned from the rest api.
mediaType = 'video';
}
} else { // for media selections originated from existing files in the media library.
mediaType = media.type;
}

setAttributes( {
mediaAlt: media.alt,
mediaId: media.id,
mediaType,
mediaUrl: media.url,
mediaWidth: newMediaWidth,
...mediaWidthProp,
} );
}

onWidthChange( width ) {
const { setAttributes } = this.props;

setAttributes( {
mediaWidth: width,
} );
}

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

return (
<MediaContainer
maxWidth={ MAX_MEDIA_WIDTH }
className="block-library-half-media__media-container"
onSelectMedia={ this.onSelectMedia }
onWidthChange={ this.onWidthChange }
{ ...{ mediaAlt, mediaId, mediaType, mediaUrl, mediaPosition, mediaWidth } }
/>
);
}

render() {
const { attributes, backgroundColor, setAttributes, setBackgroundColor } = this.props;
const { mediaPosition } = attributes;
const className = classnames( 'wp-block-half-media', {
'has-media-on-the-right': 'right' === mediaPosition,
[ backgroundColor.class ]: backgroundColor.class,
} );
const style = {
backgroundColor: backgroundColor.value,
};
const colorSettings = [ {
value: backgroundColor.value,
onChange: setBackgroundColor,
label: __( 'Background Color' ),
} ];
const toolbarControls = [ {
icon: 'align-left',
title: __( 'Show media on left' ),
isActive: mediaPosition === 'left',
onClick: () => setAttributes( { mediaPosition: 'left' } ),
}, {
icon: 'align-left',
title: __( 'Show media on right' ),
isActive: mediaPosition === 'right',
onClick: () => setAttributes( { mediaPosition: 'right' } ),
} ];
return (
<Fragment>
<InspectorControls>
<PanelColorSettings
title={ __( 'Color Settings' ) }
initialOpen={ false }
colorSettings={ colorSettings }
/>
</InspectorControls>
<BlockControls>
<Toolbar
controls={ toolbarControls }
/>
</BlockControls>
<div className={ className } style={ style } >
{ this.renderMediaArea() }
<InnerBlocks
allowedBlocks={ ALLOWED_BLOCKS }
template={ TEMPLATE }
/>
</div>
</Fragment>
);
}
}

export default withColors( 'backgroundColor' )( ImageEdit );
40 changes: 40 additions & 0 deletions packages/block-library/src/layout-half-media/editor.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@

.wp-block-half-media .editor-media-container__resizer {
grid-area: half-media-media;
align-self: center;
}

.wp-block-half-media .editor-inner-blocks {
word-break: break-word;
grid-area: half-media-content;
text-align: initial;
}

.editor-block-list__block .editor-media-container__resize-handler {
display: block;
}

.wp-block-half-media > .editor-inner-blocks > .editor-block-list__layout > .editor-block-list__block {
max-width: unset;
}

figure.block-library-half-media__media-container {
margin: 0;
height: 100%;
width: 100%;
}

.block-library-half-media__media-container img,
.block-library-half-media__media-container video {
margin-bottom: -10px;
width: 100%;
}

.editor-block-list__block .editor-media-container__resize-handler {
display: none;
}

.editor-block-list__block.is-selected .editor-media-container__resize-handler,
.editor-block-list__block.is-focused .editor-media-container__resize-handler {
display: block;
}
121 changes: 121 additions & 0 deletions packages/block-library/src/layout-half-media/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
/**
* External dependencies
*/
import { noop } from 'lodash';
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import {
InnerBlocks,
getColorClass,
} from '@wordpress/editor';

/**
* Internal dependencies
*/
import edit from './edit';

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

export const settings = {
title: __( 'Half Media' ),

icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h24v24H0V0z" fill="none" /><rect x="11" y="7" width="6" height="2" /><rect x="11" y="11" width="6" height="2" /><rect x="11" y="15" width="6" height="2" /><rect x="7" y="7" width="2" height="2" /><rect x="7" y="11" width="2" height="2" /><rect x="7" y="15" width="2" height="2" /><path d="M20.1,3H3.9C3.4,3,3,3.4,3,3.9v16.2C3,20.5,3.4,21,3.9,21h16.2c0.4,0,0.9-0.5,0.9-0.9V3.9C21,3.4,20.5,3,20.1,3z M19,19H5V5h14V19z" /></svg>,

category: 'layout',

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',
source: 'attribute',
selector: 'figure video,figure img',
attribute: 'width',
},
},

supports: {
align: [ 'wide', 'full' ],
},

edit,

save( { attributes } ) {
const {
backgroundColor,
customBackgroundColor,
mediaAlt,
mediaPosition,
mediaType,
mediaUrl,
mediaWidth,
} = attributes;
const mediaTypeRenders = {
image: () => {
return (
<img src={ mediaUrl } alt={ mediaAlt } width={ mediaWidth } />
);
},
video: () => {
return (
<video controls src={ mediaUrl } width={ mediaWidth } />
);
},
};

const backgroundClass = getColorClass( 'background-color', backgroundColor );
const className = classnames( {
'has-media-on-the-right': 'right' === mediaPosition,
[ backgroundClass ]: backgroundClass,
} );

const style = {
backgroundColor: backgroundClass ? undefined : customBackgroundColor,
};
return (
<div className={ className } style={ style }>
<figure className="wp-block-half-media__media" >
{ ( mediaTypeRenders[ mediaType ] || noop )() }
</figure>
<div className="wp-block-half-media__content">
<InnerBlocks.Content />
</div>
</div>
);
},
};
27 changes: 27 additions & 0 deletions packages/block-library/src/layout-half-media/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.wp-block-half-media,
.wp-block-half-media.aligncenter {
display: grid;
grid-template-columns: fit-content(50%) auto;
grid-template-rows: auto;
grid-template-areas: "half-media-media half-media-content";
align-items: center;
column-gap: 25px;
}

.wp-block-half-media .wp-block-half-media__media {
grid-area: half-media-media;
}

.wp-block-half-media .wp-block-half-media__content {
word-break: break-word;
grid-area: half-media-content;
}
.wp-block-half-media.has-media-on-the-right {
grid-template-columns: auto fit-content(50%);
grid-template-areas: "half-media-content half-media-media";
}

.wp-block-half-media > figure > img,
.wp-block-half-media > figure > video {
max-width: unset;
}
1 change: 1 addition & 0 deletions packages/block-library/src/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
@import "./image/style.scss";
@import "./latest-comments/style.scss";
@import "./latest-posts/style.scss";
@import "./layout-half-media/style.scss";
@import "./paragraph/style.scss";
@import "./pullquote/style.scss";
@import "./quote/style.scss";
Expand Down
Loading

0 comments on commit 8e3e2c9

Please sign in to comment.