Merge branch 'master' into fix/1445-gallery-id

README.md

@@ -28,7 +28,7 @@ Please see [CONTRIBUTING.md](CONTRIBUTING.md).
 
 ## Why
 
-One thing that sets WordPress apart from other systems is that it allows you to create as rich a post layout as you can imagine -- but only if you know HTML & CSS and build your own custom theme. By thinking of the editor as a tool to let you write rich posts, and in a few clicks create beautiful layouts, hopefully we can make people start to _love_ WordPress, as opposed to pick it because it's what everyone else uses to blog.
+One thing that sets WordPress apart from other systems is that it allows you to create as rich a post layout as you can imagine -- but only if you know HTML & CSS and build your own custom theme. By thinking of the editor as a tool to let you write rich posts, and in a few clicks create beautiful layouts, hopefully, we can make people start to _love_ WordPress, as opposed to pick it because it's what everyone else uses to blog.
 
 ## Ingredients
 
@@ -40,6 +40,6 @@ By showing critical UI in the body of the content, many can get their basic blog
 
 **Advanced Formatting**
 
-When the Post Settings sidebar is open — which it is by default — you are essentially in advanced layout mode. By default you'll see all your metaboxes right there.
+When the Post Settings sidebar is open — which it is by default — you are essentially in advanced layout mode. By default, you'll see all your metaboxes right there.
 
 Every block can be _inspected_ by clicking it. And every block has advanced layout options available in the inspector; text might have drop-cap, image might have fixed position scrolling. As such, block attributes fall in two camps — the most important ones available right on the block, advanced ones living in the sidebar inspector.

blocks/README.md

@@ -28,7 +28,7 @@ The following sections will describe what you'll need to include in `block.js` t
 
 Let's imagine you wanted to define a block to show a randomly generated image in a post's content using [lorempixel.com](http://lorempixel.com/). The service provides a choice of category and you'd like to offer this as an option when editing the post.
 
-Take a step back and consider the ideal workflow for adding a new random image. After inserting the block, as a user I'd expect it to be shown in some empty state, with an option to choose a category in a select dropdown. Upon confirming my selection, a preview of the image should be shown next to the dropdown. At this point, you might realize that while you'd want some controls to be shown when editing content, the markup included in the published post might not appear the same (your visitors should not see a dropdown field when reading your content). This leads to the first requirement of describing a block: __you will need to provide implementations both for what's to be shown in an editor and what's to be saved with the published content__. You needn't worry about redundant effort here, as concepts of [Elements](../elements/README.md) and componentization provide an avenue for sharing common behaviors.
+Take a step back and consider the ideal workflow for adding a new random image. After inserting the block, as a user I'd expect it to be shown in some empty state, with an option to choose a category in a select dropdown. Upon confirming my selection, a preview of the image should be shown next to the dropdown. At this point, you might realize that while you'd want some controls to be shown when editing content, the markup included in the published post might not appear the same (your visitors should not see a dropdown field when reading your content). This leads to the first requirement of describing a block: __you will need to provide implementations both for what's to be shown in an editor and what's to be saved with the published content__. You needn't worry about redundant effort here, as concepts of [Elements](../element/README.md) and componentization provide an avenue for sharing common behaviors.
 
 Now that we've considered user interaction, you should think about the underlying values that determine the markup generated by your block. In our example, the output is affected only when the category changes. Put another way: __the output of a block is a function of its attributes__. The category, a simple string, is the only thing we require to be able to generate the image we want to include in the published content. We call these underlying values of a block instance its _attributes_.
 

blocks/library/gallery/block.scss

@@ -0,0 +1,58 @@
+.wp-block-gallery {
+	display: flex;
+	flex-wrap: wrap;
+
+	&:not( .components-placeholder ) {
+		margin-right: -16px;
+		margin-bottom: -16px;
+	}
+
+	.blocks-gallery-image {
+		flex-grow: 1;
+		margin: 0 16px 16px 0;
+
+		img {
+			max-width: 100%;
+		}
+	}
+
+	// Cropped
+	&.is-cropped .blocks-gallery-image {
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		// Alas, IE11+ doesn't support object-fit
+		_:-ms-lang(x), img {
+			height: auto;
+			width: auto;
+		}
+	}
+
+	&.columns-1 figure {
+		width: calc(100% / 1 - 2 * 8px);
+	}
+	&.columns-2 figure {
+		width: calc(100% / 2 - 3 * 8px);
+	}
+	&.columns-3 figure {
+		width: calc(100% / 3 - 4 * 8px);
+	}
+	&.columns-4 figure {
+		width: calc(100% / 4 - 5 * 8px);
+	}
+	&.columns-5 figure {
+		width: calc(100% / 5 - 6 * 8px);
+	}
+	&.columns-6 figure {
+		width: calc(100% / 6 - 7 * 8px);
+	}
+	&.columns-7 figure {
+		width: calc(100% / 7 - 8 * 8px);
+	}
+	&.columns-8 figure {
+		width: calc(100% / 8 - 9 * 8px);
+	}
+}

blocks/library/gallery/index.js

@@ -10,9 +10,11 @@ import { pick } from 'lodash';
  */
 import './style.scss';
 import { registerBlockType } from '../../api';
+import './block.scss';
 import MediaUploadButton from '../../media-upload-button';
 import InspectorControls from '../../inspector-controls';
 import RangeControl from '../../inspector-controls/range-control';
+import ToggleControl from '../../inspector-controls/toggle-control';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import GalleryImage from './gallery-image';
@@ -77,6 +79,8 @@ registerBlockType( 'core/gallery', {
 		const { images = [], columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes;
 		const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } );
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
+		const { imageCrop = true } = attributes;
+		const toggleImageCrop = () => setAttributes( { imageCrop: ! imageCrop } );
 
 		const controls = (
 			focus && (
@@ -99,6 +103,8 @@ registerBlockType( 'core/gallery', {
 
 		if ( images.length === 0 ) {
 			const setMediaUrl = ( imgs ) => setAttributes( { images: slimImageObjects( imgs ) } );
+			const uploadButtonProps = { isLarge: true };
+
 			return [
 				controls,
 				<Placeholder
@@ -108,6 +114,7 @@ registerBlockType( 'core/gallery', {
 					label={ __( 'Gallery' ) }
 					className={ className }>
 					<MediaUploadButton
+						buttonProps={ uploadButtonProps }
 						onSelect={ setMediaUrl }
 						type="image"
 						autoOpen
@@ -123,16 +130,24 @@ registerBlockType( 'core/gallery', {
 			controls,
 			focus && images.length > 1 && (
 				<InspectorControls key="inspector">
+					<p className="editor-block-inspector__description">Image galleries are a great way to share groups of pictures on your site.</p>
+					<hr />
+					<h3>{ __( 'Gallery Settings' ) }</h3>
 					<RangeControl
 						label={ __( 'Columns' ) }
 						value={ columns }
 						onChange={ setColumnsNumber }
 						min="1"
 						max={ Math.min( MAX_COLUMNS, images.length ) }
 					/>
+					<ToggleControl
+						label={ __( 'Crop Images' ) }
+						checked={ !! imageCrop }
+						onChange={ toggleImageCrop }
+					/>
 				</InspectorControls>
 			),
-			<div key="gallery" className={ `${ className } align${ align } columns-${ columns }` }>
+			<div key="gallery" className={ `${ className } align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` }>
 				{ images.map( ( img ) => (
 					<GalleryImage key={ img.url } img={ img } />
 				) ) }

blocks/library/gallery/style.scss

@@ -1,48 +1,3 @@
-
-.wp-block-gallery {
-	display: flex;
-	flex-wrap: wrap;
-
-	&:not( .components-placeholder ) {
-		margin-right: -16px;
-		margin-bottom: -16px;
-	}
-
-	.blocks-gallery-image {
-		flex-grow: 1;
-		margin: 0 16px 16px 0;
-
-		img {
-			max-width: 100%;
-		}
-	}
-
-	&.columns-1 figure {
-		width: calc(100% / 1 - 2 * 8px);
-	}
-	&.columns-2 figure {
-		width: calc(100% / 2 - 3 * 8px);
-	}
-	&.columns-3 figure {
-		width: calc(100% / 3 - 4 * 8px);
-	}
-	&.columns-4 figure {
-		width: calc(100% / 4 - 5 * 8px);
-	}
-	&.columns-5 figure {
-		width: calc(100% / 5 - 6 * 8px);
-	}
-	&.columns-6 figure {
-		width: calc(100% / 6 - 7 * 8px);
-	}
-	&.columns-7 figure {
-		width: calc(100% / 7 - 8 * 8px);
-	}
-	&.columns-8 figure {
-		width: calc(100% / 8 - 9 * 8px);
-	}
-}
-
 .wp-block-gallery.is-placeholder {
 	margin: -15px;
 	padding: 6em 0;

blocks/library/latest-posts/index.js

@@ -4,12 +4,20 @@
 import { Component } from 'element';
 import { Placeholder } from 'components';
 import { __ } from 'i18n';
+import moment from 'moment';
 
 /**
  * Internal dependencies
  */
+import './style.scss';
 import { registerBlockType } from '../../api';
 import { getLatestPosts } from './data.js';
+import InspectorControls from '../../inspector-controls';
+import TextControl from '../../inspector-controls/text-control';
+import ToggleControl from '../../inspector-controls/toggle-control';
+
+const MIN_POSTS = 1;
+const MAX_POSTS = 100;
 
 registerBlockType( 'core/latestposts', {
 	title: __( 'Latest Posts' ),
@@ -20,11 +28,13 @@ registerBlockType( 'core/latestposts', {
 
 	defaultAttributes: {
 		poststoshow: 5,
+		displayPostDate: false,
 	},
 
 	edit: class extends Component {
 		constructor() {
 			super( ...arguments );
+			this.changePostsToShow = this.changePostsToShow.bind( this );
 
 			const { poststoshow } = this.props.attributes;
 
@@ -36,6 +46,40 @@ registerBlockType( 'core/latestposts', {
 
 			this.latestPostsRequest
 				.then( latestPosts => this.setState( { latestPosts } ) );
+
+			this.toggleDisplayPostDate = this.toggleDisplayPostDate.bind( this );
+		}
+
+		toggleDisplayPostDate() {
+			const { displayPostDate } = this.props.attributes;
+			const { setAttributes } = this.props;
+
+			setAttributes( { displayPostDate: ! displayPostDate } );
+		}
+
+		componentWillReceiveProps( nextProps ) {
+			const { poststoshow: postToShowCurrent } = this.props.attributes;
+			const { poststoshow: postToShowNext } = nextProps.attributes;
+			const { setAttributes } = this.props;
+
+			if ( postToShowCurrent === postToShowNext ) {
+				return;
+			}
+
+			if ( postToShowNext >= MIN_POSTS && postToShowNext <= MAX_POSTS ) {
+				this.latestPostsRequest = getLatestPosts( postToShowNext );
+
+				this.latestPostsRequest
+					.then( latestPosts => this.setState( { latestPosts } ) );
+
+				setAttributes( { poststoshow: postToShowNext } );
+			}
+		}
+
+		changePostsToShow( postsToShow ) {
+			const { setAttributes } = this.props;
+
+			setAttributes( { poststoshow: parseInt( postsToShow, 10 ) || 0 } );
 		}
 
 		render() {
@@ -51,15 +95,40 @@ registerBlockType( 'core/latestposts', {
 				);
 			}
 
-			return (
-				<div className={ this.props.className }>
-					<ul>
-						{ latestPosts.map( ( post, i ) =>
-							<li key={ i }><a href={ post.link }>{ post.title.rendered }</a></li>
-						) }
-					</ul>
-				</div>
-			);
+			const { focus } = this.props;
+			const { displayPostDate } = this.props.attributes;
+
+			return [
+				focus && (
+					<InspectorControls key="inspector">
+						<ToggleControl
+							label={ __( 'Display post date' ) }
+							checked={ displayPostDate }
+							onChange={ this.toggleDisplayPostDate }
+						/>
+						<TextControl
+							label={ __( 'Number of posts to show' ) }
+							type="number"
+							min={ MIN_POSTS }
+							max={ MAX_POSTS }
+							value={ this.props.attributes.poststoshow }
+							onChange={ ( value ) => this.changePostsToShow( value ) }
+						/>
+					</InspectorControls>
+				),
+				<ul className={ this.props.className } key="latest-posts">
+					{ latestPosts.map( ( post, i ) =>
+						<li key={ i }>
+							<a href={ post.link }>{ post.title.rendered }</a>
+							{ displayPostDate && post.date_gmt &&
+								<span className={ `${ this.props.className }__post-date` }>
+									{ moment( post.date_gmt ).local().format( 'MMM DD h:mm A' ) }
+								</span>
+							}
+						</li>
+					) }
+				</ul>,
+			];
 		}
 
 		componentWillUnmount() {

blocks/library/latest-posts/style.scss

@@ -0,0 +1,9 @@
+div[data-type="core/latestposts"] .wp-block-latestposts {
+	padding-left: 2.5em;
+}
+
+.wp-block-latestposts__post-date {
+	display: block;
+	color: $dark-gray-100;
+	font-size: $default-font-size;
+}

blocks/library/text/block.scss

@@ -0,0 +1,16 @@
+p.has-drop-cap {
+	&:first-letter {
+		float: left;
+		font-size: 4.1em;
+		line-height: 0.7;
+		font-family: serif;
+		font-weight: bold;
+		margin: .07em .23em 0 0;
+		text-transform: uppercase;
+		font-style: normal;
+	}
+}
+
+p.has-drop-cap:not( :focus )  {
+	overflow: hidden;
+}

blocks/library/text/index.js

@@ -7,6 +7,7 @@ import { concatChildren } from 'element';
 /**
  * Internal dependencies
  */
+import './block.scss';
 import { registerBlockType, createBlock, query as hpq, setDefaultBlock } from '../../api';
 import AlignmentToolbar from '../../alignment-toolbar';
 import BlockControls from '../../block-controls';
@@ -85,13 +86,14 @@ registerBlockType( 'core/text', {
 	},
 
 	save( { attributes } ) {
-		const { align, content } = attributes;
+		const { align, content, dropCap } = attributes;
+		const className = dropCap && 'has-drop-cap';
 
 		if ( ! align ) {
-			return <p>{ content }</p>;
+			return <p className={ className }>{ content }</p>;
 		}
 
-		return <p style={ { textAlign: align } }>{ content }</p>;
+		return <p style={ { textAlign: align } } className={ className }>{ content }</p>;
 	},
 } );
 

blocks/test/fixtures/core-latestposts.html

@@ -1 +1 @@
-<!-- wp:core/latestposts {"poststoshow":5} /-->
+<!-- wp:core/latestposts {"poststoshow":5,"displayPostDate":false} /-->

blocks/test/fixtures/core-latestposts.json

@@ -3,7 +3,8 @@
         "uid": "_uid_0",
         "name": "core/latestposts",
         "attributes": {
-            "poststoshow": 5
+            "poststoshow": 5,
+            "displayPostDate": false
         }
     }
 ]

blocks/test/fixtures/core-latestposts.serialized.html

@@ -1 +1 @@
-<!-- wp:core/latestposts {"poststoshow":5} /-->
+<!-- wp:core/latestposts {"poststoshow":5,"displayPostDate":false} /-->