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

Unify how editor alignments are applied across blocks #21822

Merged
merged 9 commits into from
Apr 24, 2020
Merged

Unify how editor alignments are applied across blocks #21822

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d945522
Unify how editor alignments are applied across blocks
youknowriad Apr 23, 2020
2a2069c
Remove is-block-content
youknowriad Apr 23, 2020
93f4883
Remove useless selector
youknowriad Apr 23, 2020
cd4d52f
Restore unrelated change
youknowriad Apr 23, 2020
09fc8f7
Make aligned block selectable
ellatrix Apr 23, 2020
f9906fb
Revert is-resized styles
ellatrix Apr 23, 2020
30daa4d
Restore other image styles
ellatrix Apr 23, 2020
b8a7228
Fix is-resized and center image alignments
youknowriad Apr 24, 2020
470bd22
Simplify block wrapper
youknowriad Apr 24, 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
34 changes: 29 additions & 5 deletions packages/block-editor/src/components/block-list/block-wrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,16 @@ import { BlockContext } from './block';
import ELEMENTS from './block-elements';

const BlockComponent = forwardRef(
( { children, tagName = 'div', __unstableIsHtml, ...props }, wrapper ) => {
(
{
children,
tagName = 'div',
__unstableIsHtml,
wrapperProps: parentWrapperProps,
Copy link
Contributor Author

@youknowriad youknowriad Apr 23, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

This is just needed for the image block now, but we can remove it if ever we refactor it to use the "align" hook instead of a custom implementation.

Copy link
Member

@ellatrix ellatrix Apr 23, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

Can we not use the block context for this?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm not sure how you'd do so, retrieve the context value, alter it and add a new provider? It would work but it's also not great code either, I'd rather remove this at some point (after the image refactor).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Actually, we can probably use getEditPropsWrapper

Copy link
Member

Choose a reason for hiding this comment

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

I meant adding it to useContext( BlockContext ) below

...props
},
wrapper
) => {
const onSelectionStart = useContext( Context );
const [ , setBlockNodes ] = useContext( BlockNodes );
const {
Expand All @@ -49,7 +58,7 @@ const BlockComponent = forwardRef(
name,
mode,
blockTitle,
wrapperProps,
wrapperProps: contextWrapperProps,
} = useContext( BlockContext );
const { initialPosition } = useSelect(
( select ) => {
Expand All @@ -69,7 +78,11 @@ const BlockComponent = forwardRef(
'core/block-editor'
);
const fallbackRef = useRef();

const wrapperProps = {
...contextWrapperProps,
...parentWrapperProps,
};
const isAligned = wrapperProps && !! wrapperProps[ 'data-align' ];
wrapper = wrapper || fallbackRef;

// Provide the selected node, or the first and last nodes of a multi-
Expand Down Expand Up @@ -196,13 +209,24 @@ const BlockComponent = forwardRef(
const blockElementId = `block-${ clientId }${ htmlSuffix }`;
const Animated = animated[ tagName ];

// For aligned blocks, provide a wrapper element so the block can be
// positioned relative to the block column. This is enabled with the
// .is-block-content className.
const blockEdit = isAligned ? (
<div { ...props } className="is-block-content">
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
{ children }
</div>
) : (
children
);

return (
<Animated
// Overrideable props.
aria-label={ blockLabel }
role="group"
{ ...wrapperProps }
{ ...props }
{ ...( ! isAligned ? props : {} ) }
id={ blockElementId }
ref={ wrapper }
className={ classnames(
Expand All @@ -224,7 +248,7 @@ const BlockComponent = forwardRef(
...animationStyle,
} }
>
{ children }
{ blockEdit }
</Animated>
);
}
Expand Down
7 changes: 0 additions & 7 deletions packages/block-editor/src/components/block-list/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,13 +144,6 @@ function BlockListBlock( {
/>
);

// For aligned blocks, provide a wrapper element so the block can be
// positioned relative to the block column. This is enabled with the
// .is-block-content className.
if ( ! lightBlockWrapper && isAligned ) {
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
blockEdit = <div className="is-block-content">{ blockEdit }</div>;
}

if ( mode !== 'visual' ) {
blockEdit = <div style={ { display: 'none' } }>{ blockEdit }</div>;
}
Expand Down
1 change: 0 additions & 1 deletion packages/block-library/src/button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ export const settings = {
},
supports: {
align: true,
alignWide: false,
reusable: false,
lightBlockWrapper: true,
__experimentalColor: { gradients: true },
Expand Down
1 change: 0 additions & 1 deletion packages/block-library/src/button/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ $blocks-button__height: 56px;
cursor: pointer;
display: inline-block;
font-size: $big-font-size;
margin: 0;
padding: 12px 24px;
text-align: center;
text-decoration: none;
Expand Down
7 changes: 4 additions & 3 deletions packages/block-library/src/buttons/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import {
__experimentalAlignmentHookSettingsProvider as AlignmentHookSettingsProvider,
InnerBlocks,
__experimentalBlock as Block,
} from '@wordpress/block-editor';

/**
Expand All @@ -19,17 +20,17 @@ const alignmentHooksSetting = {
isEmbedButton: true,
};

function ButtonsEdit( { className } ) {
function ButtonsEdit() {
return (
<div className={ className }>
<Block.div>
<AlignmentHookSettingsProvider value={ alignmentHooksSetting }>
<InnerBlocks
allowedBlocks={ ALLOWED_BLOCKS }
template={ BUTTONS_TEMPLATE }
__experimentalMoverDirection="horizontal"
/>
</AlignmentHookSettingsProvider>
</div>
</Block.div>
);
}

Expand Down
6 changes: 3 additions & 3 deletions packages/block-library/src/buttons/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@
}

.wp-block-buttons {
&[data-align="center"] .block-editor-block-list__layout {
&[data-align="center"] > .is-block-content {
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}

&[data-align="right"] .block-editor-block-list__layout {
&[data-align="right"] > .is-block-content {
display: flex;
justify-content: flex-end;
}

.block-editor-block-list__layout > div:last-child {
.block-list-appender {
display: inline-block;
}
}
1 change: 1 addition & 0 deletions packages/block-library/src/buttons/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export const settings = {
supports: {
align: true,
alignWide: false,
lightBlockWrapper: true,
},
transforms,
edit,
Expand Down
Loading