diff --git a/blocks/library/latest-posts/block.scss b/blocks/library/latest-posts/block.scss new file mode 100644 index 00000000000000..08d970d3f3e8f8 --- /dev/null +++ b/blocks/library/latest-posts/block.scss @@ -0,0 +1,6 @@ +.wp-block-latest-posts.alignright { + margin-left: 2em; +} +.wp-block-latest-posts.alignleft { + margin-right: 2em; +} diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js index 77976d40a76205..6709df177f1fd7 100644 --- a/blocks/library/latest-posts/index.js +++ b/blocks/library/latest-posts/index.js @@ -10,12 +10,15 @@ import moment from 'moment'; * Internal dependencies */ import './style.scss'; +import './block.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'; import BlockDescription from '../../block-description'; +import BlockControls from '../../block-controls'; +import BlockAlignmentToolbar from '../../block-alignment-toolbar'; const MIN_POSTS = 1; const MAX_POSTS = 100; @@ -32,6 +35,13 @@ registerBlockType( 'core/latest-posts', { displayPostDate: false, }, + getEditWrapperProps( attributes ) { + const { align } = attributes; + if ( 'left' === align || 'right' === align || 'wide' === align || 'full' === align ) { + return { 'data-align': align }; + } + }, + edit: class extends Component { constructor() { super( ...arguments ); @@ -85,6 +95,7 @@ registerBlockType( 'core/latest-posts', { render() { const { latestPosts } = this.state; + const { setAttributes } = this.props; if ( ! latestPosts.length ) { return ( @@ -98,15 +109,27 @@ registerBlockType( 'core/latest-posts', { } const { focus } = this.props; - const { displayPostDate } = this.props.attributes; + const { displayPostDate, align } = this.props.attributes; return [ + focus && ( + + { + setAttributes( { align: nextAlign } ); + } } + controls={ [ 'left', 'center', 'right', 'wide', 'full' ] } + /> + + ), focus && ( { __( 'Shows a list of your site\'s most recent posts.' ) } { __( 'Latest Posts Settings' ) } + { latestPosts.map( ( post, i ) => - { post.title.rendered } + { post.title.rendered } { displayPostDate && post.date_gmt && { moment( post.date_gmt ).local().format( 'MMM DD h:mm A' ) } diff --git a/blocks/library/latest-posts/style.scss b/blocks/library/latest-posts/style.scss index d6746c6f0d7087..44c28ad91456c0 100644 --- a/blocks/library/latest-posts/style.scss +++ b/blocks/library/latest-posts/style.scss @@ -1,10 +1,13 @@ -.wp-block-latest-posts { - padding-left: 2.5em; -} +.editor-visual-editor__block[data-type="core/latest-posts"] { + + .wp-block-latest-posts { + padding-left: 2.5em; + } -.wp-block-latest-posts__post-date { - display: block; - color: $dark-gray-100; - font-size: $default-font-size; + .wp-block-latest-posts__post-date { + display: block; + color: $dark-gray-100; + font-size: $default-font-size; + } } diff --git a/lib/blocks/latest-posts.php b/lib/blocks/latest-posts.php index 8e2238b34dfbfb..67cc036298c3c9 100644 --- a/lib/blocks/latest-posts.php +++ b/lib/blocks/latest-posts.php @@ -28,6 +28,11 @@ function gutenberg_render_block_core_latest_posts( $attributes ) { } } + $align = 'center'; + if ( isset( $attributes['align'] ) && in_array( $attributes['align'], array( 'left', 'right', 'wide', 'full' ), true ) ) { + $align = $attributes['align']; + } + $recent_posts = wp_get_recent_posts( array( 'numberposts' => $posts_to_show, 'post_status' => 'publish', @@ -43,8 +48,10 @@ function gutenberg_render_block_core_latest_posts( $attributes ) { $posts_content .= "{$post_title}\n"; } + $class = 'wp-block-latest-posts ' . esc_attr( 'align' . $align ); + $block_content = << + {$posts_content}
{ __( 'Shows a list of your site\'s most recent posts.' ) }