Skip to content
New issue

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

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add/147 table block (alternate vision) #850

Merged
merged 52 commits into from
Jul 3, 2017
Merged
Changes from 1 commit
Commits
Show all changes
52 commits
Select commit Hold shift + click to select a range
c3f6fb5
Added table block
tiny-james May 3, 2017
2c1fab0
Merge branch 'master' into add/147-table-block
tiny-james May 4, 2017
7eda289
Some exploratory work to see if table functions can be called
tiny-james May 4, 2017
f0fc3cf
Merge branch 'master' into add/147-table-block
tiny-james May 10, 2017
462528f
Pass out the editor on setup and use it for execCommand
tiny-james May 22, 2017
5bc3a62
Renamed table to table2 to avoid collision on merge
tiny-james May 22, 2017
5d8bec7
Merge branch 'master' into add/147-table-block
tiny-james May 22, 2017
172eb3d
Add table plugin via getSettings; fix linter issues
tiny-james May 22, 2017
fbaf6a9
Added temporary icons
tiny-james May 22, 2017
6347878
Added css to show table selection
tiny-james May 22, 2017
55c999a
Merge branch 'master' into add/147-table-block
tiny-james May 22, 2017
e591c31
Moved controls into a menu
tiny-james May 23, 2017
7af4bba
Changed the icon used by the menu
tiny-james May 23, 2017
4f8c24c
Merge branch 'master' into add/147-table-block
androb May 23, 2017
3ec4f0b
Merge branch 'master' into add/147-table-block
tiny-james May 23, 2017
183bb4d
Added the alignment modes and matched the styling of the existing table
tiny-james May 24, 2017
10d42e1
Merge remote-tracking branch 'origin/add/147-table-block' into add/14…
androb May 24, 2017
a1826f6
Merge branch 'master' into add/147-table-block
tiny-james May 26, 2017
6d1ba0f
Added serialization test
tiny-james May 26, 2017
c02da21
Merge branch 'master' into add/147-table-block
tiny-james May 30, 2017
97c3e9d
Merge branch 'master' into add/147-table-block
tiny-james May 31, 2017
e60070b
Moved the editor object into react component private state
tiny-james May 31, 2017
9a1ef91
Fixed unused import
tiny-james May 31, 2017
3ec9506
Fixed spaces used for indenting in toolbar-menu/style.scss
tiny-james May 31, 2017
bd1a183
Move alternate table block to formatting category to match existing t…
tiny-james Jun 1, 2017
ed2d5a5
Vendor the table plugin
tiny-james Jun 1, 2017
e4871d3
Removed class and style attributes from table
tiny-james Jun 1, 2017
2249999
Merge branch 'master' into add/147-table-block
tiny-james Jun 1, 2017
a15a781
Fixed spaces in indentation of table2/style.scss
tiny-james Jun 1, 2017
95c353d
Removed the comments with the unscaled SVG paths
tiny-james Jun 1, 2017
d01937b
Merge branch 'master' into add/147-table-block
tiny-james Jun 1, 2017
7b08fa1
Updated for rename of registerBlock to registerBlockType
tiny-james Jun 2, 2017
f067183
Merge branch 'master' into add/147-table-block
tiny-james Jun 26, 2017
be1791b
Fixed use of now removed title variable in dashicons
tiny-james Jun 26, 2017
2f6d3e4
Readded block alignment toolbar
tiny-james Jun 26, 2017
9d62f49
Used block controls rather than specialized block menu
tiny-james Jun 26, 2017
6d87fcd
Fix php lint error
tiny-james Jun 26, 2017
3494440
Updated table 2 serialization tests
tiny-james Jun 26, 2017
27b6f01
Removed some dead code and moved the alignment toolbar to the index
tiny-james Jun 26, 2017
13fdec5
Merge branch 'master' into add/147-table-block
tiny-james Jun 27, 2017
45ea9ac
Navigate the toolbar menu with key events.
tiny-james Jun 27, 2017
fc27514
Renamed to TinyMCE Table
tiny-james Jun 27, 2017
e9db8b7
Merge branch 'master' into add/147-table-block
tiny-james Jun 28, 2017
79808f6
Merge branch 'master' into add/147-table-block
tiny-james Jun 30, 2017
0404c87
Restyled toolbar menu and improved keyboard behaviour.
tiny-james Jun 30, 2017
07c5262
Merge branch 'master' into add/147-table-block
tiny-james Jun 30, 2017
b9cdc9d
Updated table2 serialization tests to match new naming scheme
tiny-james Jun 30, 2017
0cb4cf5
Added className prop to table
tiny-james Jul 3, 2017
fca185c
Merge branch 'master' into add/147-table-block
tiny-james Jul 3, 2017
dc0dfcf
Moved table styling into .wp-block-table-2 class
tiny-james Jul 3, 2017
9daaef9
Change ToolbarMenu so it can be a subcomponent of a toolbar.
tiny-james Jul 3, 2017
c133e8e
Renamed ToolbarMenu to DropdownMenu
tiny-james Jul 3, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Used block controls rather than specialized block menu
  • Loading branch information
tiny-james committed Jun 26, 2017
commit 9d62f49a6654c93be40d170ffbc19234295a726d
22 changes: 0 additions & 22 deletions blocks/block-menu/index.js

This file was deleted.

5 changes: 5 additions & 0 deletions blocks/library/table2/style.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
.editor-visual-editor__block[data-type="core/table2"] {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should encourage the use of the new generated classNames for styling wp-block-table2

Copy link
Author

@BoardJames BoardJames Jul 3, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I have moved the table styles so they are a child of wp-block-table-2. I can't move the other styles though because the div with wp-block-table-2 class is not the same div that is selected by .editor-visual-editor__block[data-type="core/table2"].


.editor-visual-editor__block-controls > div {
display: flex;
}

table {
border-collapse: collapse;
width: 100%;
25 changes: 13 additions & 12 deletions blocks/library/table2/table-block.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Editable from '../../editable';
import BlockControls from '../../block-controls';
import BlockAlignmentToolbar from '../../block-alignment-toolbar';
import BlockMenu from '../../block-menu';
import { ToolbarMenu } from 'components';

function execCommand( command ) {
return ( editor ) => {
@@ -66,17 +66,6 @@ export default class TableBlock extends wp.element.Component {
/>
</BlockControls>
),
focus && (
<BlockMenu
key="menu"
icon="editor-table"
controls={
TABLE_CONTROLS.map( ( control ) => ( {
...control,
onClick: () => control.onClick( this.state.editor ),
} ) ) }
/>
),
<Editable
key="editor"
tagName="table"
@@ -90,6 +79,18 @@ export default class TableBlock extends wp.element.Component {
focus={ focus }
onFocus={ onFocus }
/>,
focus && (
<BlockControls key="menu">
<ToolbarMenu
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So if I understand correctly, the purpose of this component is to display a toolbar with a dropdown button.
What if I want to display several dropdown buttons in the same toolbar?

I think instead we'd probably want to refactor this to be able to do something like:

<Toolbar>
  <DropdownMenu />
  <DropdownMenu />
</Toolbar>

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have changed it so it nests inside a Toolbar and renamed it to DropdownMenu.

icon="editor-table"
controls={
TABLE_CONTROLS.map( ( control ) => ( {
...control,
onClick: () => control.onClick( this.state.editor ),
} ) ) }
/>
</BlockControls>
),
];
}
}
1 change: 0 additions & 1 deletion editor/modes/visual-editor/block.js
Original file line number Diff line number Diff line change
@@ -298,7 +298,6 @@ class VisualEditorBlock extends Component {
<div className="editor-visual-editor__block-controls">
<BlockSwitcher uid={ block.uid } />
<Slot name="Formatting.Toolbar" />
<Slot name="Formatting.ToolbarMenu" />
</div>
</CSSTransitionGroup>
}