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.

Sign up for GitHub

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

Show transforms as a vertical list #23028

Merged
merged 34 commits into from
Jun 22, 2020
Merged

Show transforms as a vertical list #23028

Changes from 1 commit
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
19374c2
Move Styles below transform options.
ntsekouras Jun 8, 2020
0aab098
revert preview in BlockStyles as they are reused
ntsekouras Jun 8, 2020
d6b93ab
Hide BlockStyles preview only from BlockTypes list.
ntsekouras Jun 8, 2020
577cfd2
Change BlockStyles position next to style options
ntsekouras Jun 9, 2020
8af59ea
Show Preview styles properly and on smaller viewports.
ntsekouras Jun 9, 2020
298275b
Add line break
ntsekouras Jun 9, 2020
8f11e28
Revert changes from other blocks and override in Block Switcher
ntsekouras Jun 9, 2020
baa6541
Add arrow navigation to blocks and BlockStyles
ntsekouras Jun 10, 2020
2a64cfe
Push a little polish.
jasmussen Jun 10, 2020
c9339fe
Fix scrolling window on arrow navigation
ntsekouras Jun 10, 2020
fc42b4b
Destructure items' properties
ntsekouras Jun 10, 2020
08e3b22
Fix aria role related e2e tests
ntsekouras Jun 11, 2020
a958a9e
reverse destructuring
ntsekouras Jun 11, 2020
6e092ff
Use DropdownMenu instead of Dropdown.
ntsekouras Jun 15, 2020
92fa685
Add class property to support the override styles with DropdownMenu
ntsekouras Jun 15, 2020
37ac84e
Add role attribute support for BlockStyleItem
ntsekouras Jun 15, 2020
a195fee
Add Preview to a Popover component.
ntsekouras Jun 15, 2020
2b44bf9
Added container elements to change Preview Popover position.
ntsekouras Jun 16, 2020
189b35a
Introduce 'skipchildrenfocus' attribute to Focusable.
ntsekouras Jun 16, 2020
938e1ef
Add filter for tabindex -1 in focusable
ntsekouras Jun 16, 2020
22f4141
revert BlockTypesList and remove extra role attribute
ntsekouras Jun 16, 2020
3101ccd
add the Styles Preview popover
ntsekouras Jun 16, 2020
7d7e864
Hide popover on mobile + move styles on top
ntsekouras Jun 18, 2020
adb4ed2
Add labels to MenuGroups
ntsekouras Jun 18, 2020
8273999
Wrap icon with BlockIcon
ntsekouras Jun 18, 2020
83045c3
minor Firefox style fix
ntsekouras Jun 18, 2020
c8ac83c
Rename BlockStyles role to itemRole
ntsekouras Jun 18, 2020
af166a7
turn PreviewBlockPopover to function component
ntsekouras Jun 19, 2020
b56c05d
Fix BlockSwitcher tests
ntsekouras Jun 19, 2020
0da2829
Adjust outer block with new Popover functionality
ntsekouras Jun 19, 2020
a64b44e
make skipFocus function more specific to our use case.
ntsekouras Jun 19, 2020
0cbba47
use toLowerCase fn
ntsekouras Jun 20, 2020
50cf323
fix BlockSwitcher e2e tests
ntsekouras Jun 20, 2020
2a2b2c8
add block menu default class + fix toolbar roving tabindex e2e tests
ntsekouras Jun 20, 2020
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
Added container elements to change Preview Popover position.
  • Loading branch information
@ntsekouras
ntsekouras committed Jun 20, 2020
commit 2b44bf9ccfc9002a2562f3a926e0104c5433b772
70 changes: 37 additions & 33 deletions packages/block-editor/src/components/block-switcher/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,35 +104,42 @@ export class BlockSwitcher extends Component {
}

const PreviewBlockPopover = (
<Popover
className="block-editor-block-switcher__preview__popover"
position="middle right"
>
<div className="block-editor-block-switcher__preview">
<div className="block-editor-block-switcher__preview-title">
{ __( 'Preview' ) }
</div>
<BlockPreview
viewportWidth={ 500 }
blocks={
hoveredBlockType.example
? getBlockFromExample( hoveredBlock.name, {
attributes: {
...hoveredBlockType.example
.attributes,
className: hoveredClassName,
},
innerBlocks:
hoveredBlockType.example
.innerBlocks,
} )
: cloneBlock( hoveredBlock, {
className: hoveredClassName,
} )
}
/>
<div className="block-editor-block-switcher__popover__preview__parent">
<div className="block-editor-block-switcher__popover__preview__container">
<Popover
className="block-editor-block-switcher__preview__popover"
position="bottom right"
>
<div className="block-editor-block-switcher__preview">
<div className="block-editor-block-switcher__preview-title">
{ __( 'Preview' ) }
</div>
<BlockPreview
viewportWidth={ 500 }
blocks={
hoveredBlockType.example
? getBlockFromExample(
hoveredBlock.name,
{
attributes: {
...hoveredBlockType
.example.attributes,
className: hoveredClassName,
},
innerBlocks:
hoveredBlockType.example
.innerBlocks,
}
)
: cloneBlock( hoveredBlock, {
className: hoveredClassName,
} )
}
/>
</div>
</Popover>
</div>
</Popover>
</div>
);

const blockSwitcherLabel =
Expand Down Expand Up @@ -175,6 +182,8 @@ export class BlockSwitcher extends Component {
( hasBlockStyles ||
hasPossibleBlockTransformations ) && (
<div className="block-editor-block-switcher__container">
{ hoveredClassName !== null &&
PreviewBlockPopover }
{ hasPossibleBlockTransformations && (
<BlockTransformationsMenu
possibleBlockTransformations={
Expand All @@ -201,13 +210,8 @@ export class BlockSwitcher extends Component {
}
role="menuitem"
/>
{ /* { hoveredClassName !==
null &&
PreviewBlock } */ }
</MenuGroup>
) }
{ hoveredClassName !== null &&
PreviewBlockPopover }
</div>
)
}
Expand Down