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

Block API: Reimplement align as common extension #4069

Merged
merged 6 commits into from
Feb 16, 2018
Merged

Conversation

aduth
Copy link
Member

@aduth aduth commented Dec 18, 2017

This pull request seeks to explore a refactoring of block alignment as a common supports feature, responsible for managing:

  • Attribute definition
  • Rendering toolbar controls
  • Rendering editor wrapper control with additional props
  • Serializing with alignleft etc. class name

Included is a single ported example to demonstrate the new behavior. See the Audio block changes for an example of how this can help simplify common alignment behavior. This is part of an effort toward eliminating getEditWrapperProps altogether.

Implementation notes:

A new block API getBlockSupport has been added, complementing hasBlockSupport and intended to be used in cases where a block support is defined as a non-boolean type (mimicking ...args of add_theme_support), used to allow granular control of specific supported alignments.

The theme supports feature for wide alignment has been renamed with these changes from wide-images to wide-align to better reflect that wide alignment can apply to other block types (audio, etc).

Testing instructions:

Verify that there are no regressions in the alignment behavior of the Audio block.

Ensure unit tests pass:

npm test

@aduth aduth added [Feature] Block API API that allows to express the block paradigm. [Feature] Extensibility The ability to extend blocks or the editing experience labels Dec 18, 2017
return [
validAlignments.length > 0 && props.focus && (
<BlockControls key="controls">
<BlockAlignmentToolbar
Copy link
Member

Choose a reason for hiding this comment

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

Given that we support the configuration of the supported aligns via an array, we need some way to pass the validAlignments to the BlockAlignmentToolbar. If we set support for align: [ 'center', 'right' ], left align continues to appear although it does not take effect because class and data-align prop is not set. Given that left align is disabled in that case we should not show it.

Copy link
Member Author

Choose a reason for hiding this comment

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

Given that we support the configuration of the supported aligns via an array, we need some way to pass the validAlignments to the BlockAlignmentToolbar.

An easy enough fix. See 9a2db6e.

@gziolo gziolo added the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Feb 15, 2018
@gziolo
Copy link
Member

gziolo commented Feb 15, 2018

@aduth do you plan to finish this PR or is it no longer relevant? 2 months has passed, there has been tons of changes in the meantime :)

@aduth
Copy link
Member Author

aduth commented Feb 15, 2018

@aduth do you plan to finish this PR

You make it sound as though it was incomplete 😄

But yes, it has languished and would need an update.

I think it's still worth pursuing personally.

@gziolo gziolo removed the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Feb 15, 2018
Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

I updated code to work with the latest code refactoring around focus property. This all works as advertised and is ready to go 👍 Nice one. I like how flexible this solution is.

@@ -471,9 +471,12 @@ export class BlockListBlock extends Component {
const { onMouseLeave, onReplace } = this.props;

// Determine whether the block has props to apply to the wrapper.
let wrapperProps;
let wrapperProps = this.props.wrapperProps;
Copy link
Member

Choose a reason for hiding this comment

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

@aduth, do I assume correctly that we should be able to remove this if statement as soon as we migrate all blocks to use supports?

Copy link
Member Author

Choose a reason for hiding this comment

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

My hope is that we can remove getEditWrapperProps at some point, yes.

@gziolo gziolo merged commit c8f8c9b into master Feb 16, 2018
@gziolo gziolo deleted the update/wide-align-hook branch February 16, 2018 10:04
// Explicitly defined array set of valid alignments
const blockAlign = getBlockSupport( blockName, 'align' );
if ( Array.isArray( blockAlign ) ) {
return blockAlign;
Copy link
Member

Choose a reason for hiding this comment

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

Do we want to allow custom values here? At the moment you can pass anything :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block API API that allows to express the block paradigm. [Feature] Extensibility The ability to extend blocks or the editing experience
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants