Skip to content

Commit 5037e59

Browse files
youknowriadyouknowriad
authored
TinyMCE per block: Disable arrow buttons for moving blocks when necessary (#210)
1 parent be75517 commit 5037e59

File tree

14 files changed

+114
-94
lines changed

14 files changed

+114
-94
lines changed

‎tinymce-per-block/build/app.js

+13-13
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tinymce-per-block/src/assets/stylesheets/main.scss

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
@import '~external/dashicons/style';
1111
@import '~renderers/block/block-list/style';
1212
@import '~renderers/html/html-editor/style';
13+
@import '~controls/block-arrangement/style';
1314
@import '~controls/editable-format-toolbar/style';
1415
@import '~controls/transform-block-toolbar/style';
1516
@import '~inserter/style';

‎tinymce-per-block/src/blocks/embed-block/form.js

+39-36
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ export default class EmbedBlockForm extends Component {
2323
};
2424

2525
render() {
26-
const { block, isSelected, change, moveCursorUp, moveCursorDown,
27-
remove, focusConfig, focus, moveBlockUp, moveBlockDown, appendBlock, unselect } = this.props;
26+
const { block, isSelected, change, moveCursorUp, moveCursorDown, first, last,
27+
remove, focusConfig, focus, moveBlockUp, moveBlockDown, appendBlock, select, unselect } = this.props;
2828

2929
const removePrevious = () => {
3030
if ( ! block.url ) {
@@ -43,7 +43,7 @@ export default class EmbedBlockForm extends Component {
4343

4444
return (
4545
<div className={ classNames( 'embed-block', block.align ) }>
46-
{ isSelected && <BlockArrangement block={ block }
46+
{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
4747
moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
4848
{ isSelected &&
4949
<div className="block-list__block-controls">
@@ -52,46 +52,49 @@ export default class EmbedBlockForm extends Component {
5252
</div>
5353
</div>
5454
}
55-
{ ! block.url &&
56-
<div className="embed-block__form">
57-
<div className="embed-block__title">
58-
<CloudOutline /> Embed URL
59-
</div>
60-
<EnhancedInputComponent
61-
ref={ this.bindInput }
62-
moveCursorUp={ moveCursorUp }
63-
removePrevious={ removePrevious }
64-
moveCursorDown={ moveCursorDown }
65-
value={ block.url }
66-
onChange={ ( value ) => change( { url: value } ) }
67-
focusConfig={ focusConfig }
68-
onFocusChange={ ( config ) => focus( config ) }
69-
placeholder="Paste URL to embed here..."
70-
/>
71-
</div>
72-
}
73-
{ block.url &&
74-
<div className="embed-block__content">
75-
<div dangerouslySetInnerHTML={ { __html: html } } />
76-
<div className="embed-block__caption">
55+
56+
<div onClick={ select }>
57+
{ ! block.url &&
58+
<div className="embed-block__form">
59+
<div className="embed-block__title">
60+
<CloudOutline /> Embed URL
61+
</div>
7762
<EnhancedInputComponent
78-
ref={ this.bindCaption }
63+
ref={ this.bindInput }
7964
moveCursorUp={ moveCursorUp }
8065
removePrevious={ removePrevious }
8166
moveCursorDown={ moveCursorDown }
82-
splitValue={ splitValue }
83-
value={ block.caption }
84-
onChange={ ( value ) => {
85-
change( { caption: value } );
86-
unselect();
87-
} }
88-
placeholder="Write caption"
67+
value={ block.url }
68+
onChange={ ( value ) => change( { url: value } ) }
8969
focusConfig={ focusConfig }
90-
onFocusChange={ focus }
70+
onFocusChange={ ( config ) => focus( config ) }
71+
placeholder="Paste URL to embed here..."
9172
/>
9273
</div>
93-
</div>
94-
}
74+
}
75+
{ block.url &&
76+
<div className="embed-block__content">
77+
<div dangerouslySetInnerHTML={ { __html: html } } />
78+
<div className="embed-block__caption">
79+
<EnhancedInputComponent
80+
ref={ this.bindCaption }
81+
moveCursorUp={ moveCursorUp }
82+
removePrevious={ removePrevious }
83+
moveCursorDown={ moveCursorDown }
84+
splitValue={ splitValue }
85+
value={ block.caption }
86+
onChange={ ( value ) => {
87+
change( { caption: value } );
88+
unselect();
89+
} }
90+
placeholder="Write caption"
91+
focusConfig={ focusConfig }
92+
onFocusChange={ focus }
93+
/>
94+
</div>
95+
</div>
96+
}
97+
</div>
9598
</div>
9699
);
97100
}

‎tinymce-per-block/src/blocks/heading-block/form.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default class HeadingBlockForm extends Component {
3333
};
3434

3535
render() {
36-
const { block, isSelected, moveBlockUp, moveBlockDown, select, transform } = this.props;
36+
const { block, isSelected, moveBlockUp, moveBlockDown, select, transform, first, last } = this.props;
3737
const sizes = [
3838
{ id: 'h1', icon: EditorHeading1Icon },
3939
{ id: 'h2', icon: EditorHeading2Icon },
@@ -42,7 +42,7 @@ export default class HeadingBlockForm extends Component {
4242

4343
return (
4444
<div>
45-
{ isSelected && <BlockArrangement block={ block }
45+
{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
4646
moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
4747
{ isSelected && (
4848
<div className="block-list__block-controls">

‎tinymce-per-block/src/blocks/html-block/form.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default class HtmlBlockForm extends Component {
3939
};
4040

4141
render() {
42-
const { block, isSelected, change, moveCursorUp, moveCursorDown, appendBlock,
42+
const { block, isSelected, change, moveCursorUp, moveCursorDown, appendBlock, first, last,
4343
mergeWithPrevious, remove, focusConfig, focus, moveBlockUp, moveBlockDown, select, unselect } = this.props;
4444
const splitValue = ( left, right ) => {
4545
change( { content: left } );
@@ -59,7 +59,7 @@ export default class HtmlBlockForm extends Component {
5959

6060
return (
6161
<div>
62-
{ isSelected && <BlockArrangement block={ block }
62+
{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
6363
moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
6464
{ isSelected && (
6565
<div className="block-list__block-controls">

‎tinymce-per-block/src/blocks/image-block/form.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default class ImageBlockForm extends Component {
1919
};
2020

2121
render() {
22-
const { block, change, moveCursorDown, moveCursorUp, remove, appendBlock,
22+
const { block, change, moveCursorDown, moveCursorUp, remove, appendBlock, first, last,
2323
isSelected, focusConfig, focus, moveBlockUp, moveBlockDown, select, unselect } = this.props;
2424
const removePrevious = () => {
2525
if ( ! block.caption ) {
@@ -36,7 +36,7 @@ export default class ImageBlockForm extends Component {
3636

3737
return (
3838
<div className={ classNames( 'image-block__form', block.align ) }>
39-
{ isSelected && <BlockArrangement block={ block }
39+
{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
4040
moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
4141
{ isSelected &&
4242
<div className="block-list__block-controls">

‎tinymce-per-block/src/blocks/quote-block/form.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export default class QuoteBlockForm extends Component {
5959
};
6060

6161
render() {
62-
const { block, change, moveCursorUp, moveCursorDown, remove,
62+
const { block, change, moveCursorUp, moveCursorDown, remove, first, last,
6363
mergeWithPrevious, appendBlock, isSelected, focusConfig, focus,
6464
moveBlockUp, moveBlockDown, select, unselect, transform } = this.props;
6565
const splitValue = ( left, right ) => {
@@ -76,7 +76,7 @@ export default class QuoteBlockForm extends Component {
7676

7777
return (
7878
<div>
79-
{ isSelected && <BlockArrangement block={ block }
79+
{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
8080
moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
8181
{ isSelected &&
8282
<div className="block-list__block-controls">

‎tinymce-per-block/src/blocks/text-block/form.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,16 @@ export default class TextBlockForm extends Component {
2929
};
3030

3131
render() {
32-
const { block, isSelected, focusConfig, moveBlockUp, moveBlockDown, replace, select, transform } = this.props;
32+
const { block, isSelected, focusConfig, moveBlockUp, moveBlockDown,
33+
replace, select, transform, first, last } = this.props;
3334
const selectedTextAlign = block.align || 'left';
3435
const style = {
3536
textAlign: selectedTextAlign
3637
};
3738

3839
return (
3940
<div>
40-
{ isSelected && <BlockArrangement block={ block }
41+
{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
4142
moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
4243
{ isSelected &&
4344
<div className="block-list__block-controls">

‎tinymce-per-block/src/controls/block-arrangement.js ‎tinymce-per-block/src/controls/block-arrangement/index.js

+10-3
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,25 @@
44
import { createElement } from 'wp-elements';
55
import { getBlock } from 'wp-blocks';
66
import { ArrowDownAlt2Icon, ArrowUpAlt2Icon } from 'dashicons';
7+
import classNames from 'classnames';
78

8-
export default function BlockArrangement( { block, moveBlockUp, moveBlockDown } ) {
9+
export default function BlockArrangement( { block, moveBlockUp, moveBlockDown, first, last } ) {
910
const blockDefinition = getBlock( block.blockType );
1011
const Icon = blockDefinition.icon;
1112

1213
return (
1314
<div className="block-list__block-arrangement">
1415
<div className="block-list__movement-controls">
15-
<button className="block-list__block-arrange-control" onClick={ moveBlockUp }>
16+
<button
17+
className={ classNames( 'block-list__block-arrange-control', { 'is-disabled': first } ) }
18+
onClick={ moveBlockUp }
19+
>
1620
<ArrowUpAlt2Icon />
1721
</button>
18-
<button className="block-list__block-arrange-control" onClick={ moveBlockDown }>
22+
<button
23+
className={ classNames( 'block-list__block-arrange-control', { 'is-disabled': last } ) }
24+
onClick={ moveBlockDown }
25+
>
1926
<ArrowDownAlt2Icon />
2027
</button>
2128
</div>

‎tinymce-per-block/src/controls/block-arrangement/style.scss

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.block-list__block-arrangement {
2+
@include animate_fade;
3+
position: absolute;
4+
top: 10px;
5+
left: -65px;
6+
display: flex;
7+
align-items: center;
8+
}
9+
10+
.block-list__type-controls {
11+
margin-left: 0.6rem;
12+
}
13+
14+
.block-list__block-arrange-control {
15+
display: block;
16+
padding: 0;
17+
border: none;
18+
outline: none;
19+
background: none;
20+
color: $gray-dark-300;
21+
cursor: pointer;
22+
23+
&.is-disabled {
24+
color: $gray-light;
25+
}
26+
27+
.dashicon {
28+
display: block;
29+
height: 20px;
30+
width: 20px;
31+
}
32+
}

‎tinymce-per-block/src/controls/transform-block-toolbar/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
.transform-block-toolbar__arrow {
1010
display: inline-block;
1111
vertical-align: middle;
12-
border: 6px dashed $gray-dark-900;
12+
border: 6px dashed #6d7882;
1313
height: 0;
1414
line-height: 0;
1515
width: 0;

‎tinymce-per-block/src/renderers/block/block-list/_style.scss

-29
Original file line numberDiff line numberDiff line change
@@ -82,32 +82,3 @@
8282
height: 24px;
8383
}
8484
}
85-
86-
.block-list__block-arrangement {
87-
@include animate_fade;
88-
position: absolute;
89-
top: 10px;
90-
left: -65px;
91-
display: flex;
92-
align-items: center;
93-
}
94-
95-
.block-list__type-controls {
96-
margin-left: 0.6rem;
97-
}
98-
99-
.block-list__block-arrange-control {
100-
display: block;
101-
padding: 0;
102-
border: none;
103-
outline: none;
104-
background: none;
105-
color: $gray-dark-300;
106-
cursor: pointer;
107-
108-
.dashicon {
109-
display: block;
110-
height: 20px;
111-
width: 20px;
112-
}
113-
}

‎tinymce-per-block/src/renderers/block/block-list/block.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default class BlockListBlock extends Component {
1919
}
2020

2121
render() {
22-
const { block, isSelected, focusConfig } = this.props;
22+
const { block, isSelected, focusConfig, first, last } = this.props;
2323
const blockDefinition = getBlock( block.blockType );
2424
if ( ! blockDefinition ) {
2525
return null;
@@ -122,6 +122,8 @@ export default class BlockListBlock extends Component {
122122
{ ...state }
123123
isSelected={ isSelected }
124124
focusConfig={ focusConfig }
125+
first={ first }
126+
last={ last }
125127
/>
126128
</div>
127129
);

‎tinymce-per-block/src/renderers/block/block-list/index.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,10 @@ class BlockList extends Component {
238238
isSelected={ selectedUID === block.uid }
239239
focusConfig={ isFocused ? focusConfig : null }
240240
executeCommand={ ( command ) => this.executeCommand( block.uid, command ) }
241-
block={ block } />
241+
block={ block }
242+
first={ index === 0 }
243+
last={ index === content.length - 1 }
244+
/>
242245
);
243246
} ) }
244247
</div>

0 commit comments

Comments
 (0)