1 |
|
2 |
|
3 |
|
4 | import { get, times } from 'lodash';
|
5 |
|
6 | /**
|
7 | * WordPress dependencies
|
8 | */
|
9 | import { createBlock } from '@wordpress/blocks';
|
10 | import { __ } from '@wordpress/i18n';
|
11 | import { PanelBody, RangeControl } from '@wordpress/components';
|
12 | import { Fragment } from '@wordpress/element';
|
13 | import {
|
14 | BlockControls,
|
15 | BlockAlignmentToolbar,
|
16 | InspectorControls,
|
17 | RichText,
|
18 | } from '@wordpress/block-editor';
|
19 | import deprecated from '@wordpress/deprecated';
|
20 |
|
21 | export const name = 'core/text-columns';
|
22 |
|
23 | export const settings = {
|
24 |
|
25 | supports: {
|
26 | inserter: false,
|
27 | },
|
28 |
|
29 | title: __( 'Text Columns (deprecated)' ),
|
30 |
|
31 | description: __( 'This block is deprecated. Please use the Columns block instead.' ),
|
32 |
|
33 | icon: 'columns',
|
34 |
|
35 | category: 'layout',
|
36 |
|
37 | attributes: {
|
38 | content: {
|
39 | type: 'array',
|
40 | source: 'query',
|
41 | selector: 'p',
|
42 | query: {
|
43 | children: {
|
44 | type: 'string',
|
45 | source: 'html',
|
46 | },
|
47 | },
|
48 | default: [ {}, {} ],
|
49 | },
|
50 | columns: {
|
51 | type: 'number',
|
52 | default: 2,
|
53 | },
|
54 | width: {
|
55 | type: 'string',
|
56 | },
|
57 | },
|
58 |
|
59 | transforms: {
|
60 | to: [
|
61 | {
|
62 | type: 'block',
|
63 | blocks: [ 'core/columns' ],
|
64 | transform: ( { className, columns, content, width } ) => (
|
65 | createBlock(
|
66 | 'core/columns',
|
67 | {
|
68 | align: ( 'wide' === width || 'full' === width ) ? width : undefined,
|
69 | className,
|
70 | columns,
|
71 | },
|
72 | content.map( ( { children } ) =>
|
73 | createBlock(
|
74 | 'core/column',
|
75 | {},
|
76 | [ createBlock( 'core/paragraph', { content: children } ) ]
|
77 | )
|
78 | )
|
79 | )
|
80 | ),
|
81 | },
|
82 | ],
|
83 | },
|
84 |
|
85 | getEditWrapperProps( attributes ) {
|
86 | const { width } = attributes;
|
87 | if ( 'wide' === width || 'full' === width ) {
|
88 | return { 'data-align': width };
|
89 | }
|
90 | },
|
91 |
|
92 | edit: ( ( { attributes, setAttributes, className } ) => {
|
93 | const { width, content, columns } = attributes;
|
94 |
|
95 | deprecated( 'The Text Columns block', {
|
96 | alternative: 'the Columns block',
|
97 | plugin: 'Gutenberg',
|
98 | } );
|
99 |
|
100 | return (
|
101 | <Fragment>
|
102 | <BlockControls>
|
103 | <BlockAlignmentToolbar
|
104 | value={ width }
|
105 | onChange={ ( nextWidth ) => setAttributes( { width: nextWidth } ) }
|
106 | controls={ [ 'center', 'wide', 'full' ] }
|
107 | />
|
108 | </BlockControls>
|
109 | <InspectorControls>
|
110 | <PanelBody>
|
111 | <RangeControl
|
112 | label={ __( 'Columns' ) }
|
113 | value={ columns }
|
114 | onChange={ ( value ) => setAttributes( { columns: value } ) }
|
115 | min={ 2 }
|
116 | max={ 4 }
|
117 | required
|
118 | />
|
119 | </PanelBody>
|
120 | </InspectorControls>
|
121 | <div className={ `${ className } align${ width } columns-${ columns }` }>
|
122 | { times( columns, ( index ) => {
|
123 | return (
|
124 | <div className="wp-block-column" key={ `column-${ index }` }>
|
125 | <RichText
|
126 | tagName="p"
|
127 | value={ get( content, [ index, 'children' ] ) }
|
128 | onChange={ ( nextContent ) => {
|
129 | setAttributes( {
|
130 | content: [
|
131 | ...content.slice( 0, index ),
|
132 | { children: nextContent },
|
133 | ...content.slice( index + 1 ),
|
134 | ],
|
135 | } );
|
136 | } }
|
137 | placeholder={ __( 'New Column' ) }
|
138 | />
|
139 | </div>
|
140 | );
|
141 | } ) }
|
142 | </div>
|
143 | </Fragment>
|
144 | );
|
145 | } ),
|
146 |
|
147 | save( { attributes } ) {
|
148 | const { width, content, columns } = attributes;
|
149 | return (
|
150 | <div className={ `align${ width } columns-${ columns }` }>
|
151 | { times( columns, ( index ) =>
|
152 | <div className="wp-block-column" key={ `column-${ index }` }>
|
153 | <RichText.Content tagName="p" value={ get( content, [ index, 'children' ] ) } />
|
154 | </div>
|
155 | ) }
|
156 | </div>
|
157 | );
|
158 | },
|
159 | };
|