Skip to content

Commit 735e94a

Browse files
youknowriadyouknowriad
authored
TinyMCE per block: Disable arrow buttons for moving blocks when necessary (#210)
1 parent 7686b0e commit 735e94a

13 files changed

Lines changed: 101 additions & 81 deletions

File tree

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

Lines changed: 1 addition & 0 deletions
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‎

Lines changed: 39 additions & 36 deletions
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‎

Lines changed: 2 additions & 2 deletions
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‎

Lines changed: 2 additions & 2 deletions
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‎

Lines changed: 2 additions & 2 deletions
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‎

Lines changed: 2 additions & 2 deletions
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‎

Lines changed: 3 additions & 2 deletions
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 renamed to tinymce-per-block/src/controls/block-arrangement/index.js

Lines changed: 10 additions & 3 deletions
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‎

Lines changed: 32 additions & 0 deletions
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‎

Lines changed: 1 addition & 1 deletion
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;

0 commit comments

Comments
 (0)
⚡