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

proof of concept at getting snap to grid #16748

Open
wants to merge 6 commits into
base: master
from

Conversation

@senadir
Copy link
Contributor

commented Jul 25, 2019

This is an early stage draft PR to see how can we implement snap to grid into Gutenberg.

I will follow this PR with a RFC later that have all the technical details of how will snapping work, possible behaviors and problems.

for now this PR only adds:

  • simple snapping to the Image block
  • it define a fixed grid with fixed stops
  • only support left align snapping
  • doesn't support full width snapping

the main things I thing we should consider is defining:

  • how should we calculate the grid columns & stops
  • how should the technical integration & data sharing be (for now I'm using core/block-editor with a couple of actions/selectors to see if the grid should be visible or not)

future things we should consider are:

  • how can theme authors define a custom grid
  • how should we handle things like responsiveness
  • accessibility, both keyboard & screen reader

this is a live prototype I made that doesn't use Gutenberg components, vanilla react, it should be a good basis to see how does snapping work
https://gutenberg-snapping.netlify.com/

and this is a gif of how the snapping work in Gutenberg
snapping

@mapk

This comment has been minimized.

Copy link
Contributor

commented Jul 31, 2019

Related to #16271 There are questions in the issue that should also be discussed further in relation to this PR. It's looking wonderful!

@senadir

This comment has been minimized.

Copy link
Contributor Author

commented Jul 31, 2019

@mapk I'm surprised that this is the first time I'm seeing that issue 😅 I actually prepared (not finished) a RFC that addresses most of those questions & possible approaches to them, I will share it as soon as I finish it and will contribute to that issue

@youknowriad
Copy link
Contributor

left a comment

How do you think this fits with the general idea of adding specific "grid lines" for the wide and full alignments?

How can we make it possible to resize to the "wide" grid line and automatically switch the block alignment to "wide" in that case?...

{ 'block-editor-block-list__layout--grid-visible': isGridVisible }
) }
>
{ this.generateGridLines() }

This comment has been minimized.

Copy link
@youknowriad

youknowriad Aug 5, 2019

Contributor

Could this be a separate component?


// snap gap is sued to snap the image to the line when it sizes approach this point
gap: 20,
},

This comment has been minimized.

Copy link
@youknowriad

youknowriad Aug 5, 2019

Contributor

What would be the perfect API here? I feel the "gap" shouldn't be part of the API and just an implementation detail. and maybe instead of gridStops, we'd just provide the number of columns in the main area?

I also think the same config should be possible to override in InnerBlocks I feel each inner block area could potentially define its own "grid".

slug: 'vivid-red',
color: '#cf2e2e',
},
{ name: __( 'Vivid red' ), slug: 'vivid-red', color: '#cf2e2e' },

This comment has been minimized.

Copy link
@youknowriad

youknowriad Aug 5, 2019

Contributor

I guess automatic code style change. Should we revert?

@@ -879,6 +880,7 @@ export class ImageEdit extends Component {
left: showLeftHandle,
} }
onResizeStart={ () => {
this.props.showGrid();

This comment has been minimized.

Copy link
@youknowriad

youknowriad Aug 5, 2019

Contributor

I think several blocks could make use of ResizableBox and the grid config together should we create a component that is already bound to reuse between the blocks that make use of it GridResizableBox or something?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.