/gutenberg

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Add "Text Columns" block. #2117

Merged
merged 4 commits into from Aug 8, 2017
Commits
Jump to file or symbol
Failed to load files and symbols.
+202 −0
Split
View
1 blocks/library/index.js
@@ -18,4 +18,5 @@ import './latest-posts';
import './categories';
import './cover-image';
import './cover-text';
+import './text-columns';
import './verse';
View
31 blocks/library/text-columns/block.scss
@@ -0,0 +1,31 @@
+.wp-block-text-columns {
+ display: flex;
+
+ &.aligncenter {
+ display: flex;
+ }
+
+ .wp-block-text-columns__column {
+ box-sizing: border-box;
+ margin: 0 16px;
+ padding: 0;
+
+ &:first-child {
+ margin-left: 0;
+ }
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+
+ &.columns-2 .wp-block-text-columns__column {
+ width: calc( 100% / 2 );
+ }
+ &.columns-3 .wp-block-text-columns__column {
+ width: calc( 100% / 3 );
+ }
+ &.columns-4 .wp-block-text-columns__column {
+ width: calc( 100% / 4 );
+ }
+}
View
113 blocks/library/text-columns/index.js
@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import { times } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './block.scss';
+import './style.scss';
+import { registerBlockType, query as hpq } from '../../api';
+import BlockControls from '../../block-controls';
+import BlockAlignmentToolbar from '../../block-alignment-toolbar';
+import RangeControl from '../../inspector-controls/range-control';
+import Editable from '../../editable';
+import InspectorControls from '../../inspector-controls';
+import BlockDescription from '../../block-description';
+
+const { children, query } = hpq;
+
+registerBlockType( 'core/text-columns', {
+ title: __( 'Text Columns' ),
+
+ icon: 'columns',
+
+ category: 'layout',
+
+ attributes: {
+ content: query( 'p', children() ),
+ },
+
+ defaultAttributes: {
+ columns: 2,
+ content: [ [], [] ],
+ },
+
+ getEditWrapperProps( attributes ) {
+ const { width } = attributes;
+ if ( 'wide' === width || 'full' === width ) {
+ return { 'data-align': width };
+ }
+ },
+
+ edit( { attributes, setAttributes, className, focus, setFocus } ) {
+ const { width, content, columns } = attributes;
+
+ return [
+ focus && (
+ <BlockControls key="controls">
+ <BlockAlignmentToolbar
+ value={ width }
+ onChange={ ( nextWidth ) => setAttributes( { width: nextWidth } ) }
+ controls={ [ 'center', 'wide', 'full' ] }
+ />
+ </BlockControls>
+ ),
+ focus && (
+ <InspectorControls key="inspector">
+ <BlockDescription>
+ <p>{ __( 'Text. Great things start here.' ) }</p>
+ </BlockDescription>
+ <RangeControl
+ label={ __( 'Columns' ) }
+ value={ columns }
+ onChange={ ( event ) => setAttributes( { columns: event.target.value } ) }
+ min="2"
+ max="4"
+ />
+ </InspectorControls>
+ ),
+ <div className={ `${ className } align${ width } columns-${ columns }` } key="block">
+ { times( columns, ( index ) =>
+ <div className="wp-block-text-columns__column" key={ `column-${ index }` }>
+ <Editable
+ tagName="p"
+ value={ content && content[ index ] }
+ onChange={ ( nextContent ) => {
+ setAttributes( {
+ content: [
+ ...content.slice( 0, index ),
+ nextContent,
+ ...content.slice( index + 1 ),
+ ],
+ } );
+ } }
+ focus={ focus && focus.column === index }
+ onFocus={ () => setFocus( { column: index } ) }
+ placeholder={ __( 'New Column' ) }
+ />
+ </div>
+ ) }
+ </div>,
+ ];
+ },
+
+ save( { attributes } ) {
+ const { width, content, columns } = attributes;
+ return (
+ <div className={ `align${ width } columns-${ columns }` }>
+ { times( columns, ( index ) =>
+ <div className="wp-block-text-columns__column" key={ `column-${ index }` }>
+ <p>{ content && content[ index ] }</p>
+ </div>
+ ) }
+ </div>
+ );
+ },
+} );
View
5 blocks/library/text-columns/style.scss
@@ -0,0 +1,5 @@
+.wp-block-text-columns {
+ .blocks-editable__tinymce:focus {
+ box-shadow: $button-focus-style;
+ }
+}
View
10 blocks/test/fixtures/core__text-columns.html
@@ -0,0 +1,10 @@
+<!-- wp:core/text-columns {"width":"center"} -->
+<div class="wp-block-text-columns aligncenter columns-2">
+ <div class="wp-block-text-columns__column">
+ <p>One</p>
+ </div>
+ <div class="wp-block-text-columns__column">
+ <p>Two</p>
+ </div>
+</div>
+<!-- /wp:core/text-columns -->
View
19 blocks/test/fixtures/core__text-columns.json
@@ -0,0 +1,19 @@
+[
+ {
+ "attributes": {
+ "columns": 2,
+ "content": [
+ [
+ "One"
+ ],
+ [
+ "Two"
+ ]
+ ],
+ "width": "center"
+ },
+ "isValid": true,
+ "name": "core/text-columns",
+ "uid": "_uid_0"
+ }
+]
View
13 blocks/test/fixtures/core__text-columns.parsed.json
@@ -0,0 +1,13 @@
+[
+ {
+ "blockName": "core/text-columns",
+ "attrs": {
+ "width": "center"
+ },
+ "rawContent": "\n<div class=\"wp-block-text-columns aligncenter columns-2\">\n <div class=\"wp-block-text-columns__column\">\n <p>One</p>\n </div>\n <div class=\"wp-block-text-columns__column\">\n <p>Two</p>\n </div>\n</div>\n"
+ },
+ {
+ "attrs": {},
+ "rawContent": "\n"
+ }
+]
View
10 blocks/test/fixtures/core__text-columns.serialized.html
@@ -0,0 +1,10 @@
+<!-- wp:core/text-columns {"width":"center"} -->
+<div class="wp-block-text-columns aligncenter columns-2">
+ <div class="wp-block-text-columns__column">
+ <p>One</p>
+ </div>
+ <div class="wp-block-text-columns__column">
+ <p>Two</p>
+ </div>
+</div>
+<!-- /wp:core/text-columns -->