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

Jump to bottom

Blocks: Full Screen alignment/display option on several blocks #16385

Open
phpbits opened this issue Jul 2, 2019 · 19 comments · Fixed by #26615
Open

Blocks: Full Screen alignment/display option on several blocks #16385

phpbits opened this issue Jul 2, 2019 · 19 comments · Fixed by #26615
Assignees
@retrofox
Labels
[Feature] Blocks Overall functionality of blocks Good First Issue An issue that's suitable for someone looking to contribute for the first time Needs Dev Ready for, and needs developer efforts [Type] Enhancement A suggestion for improvement.

Comments

@phpbits
Copy link
Contributor

phpbits commented Jul 2, 2019

Is your feature request related to a problem? Please describe.
Would be really nice to have ability to set several blocks as full screen. It's a very powerful option to have on Cover and Media Text Blocks.

Tagging @mtias :)

Describe the solution you'd like
I've added this feature on EditorsKit plugin and here's the preview : https://twitter.com/phpbits/status/1143122996552335362
@swissspidy swissspidy added the [Feature] Block API API that allows to express the block paradigm. label Jul 2, 2019
@mtias
Copy link
Member

mtias commented Jul 3, 2019

I think this is pretty neat. It'd be interesting to see how this could work as an alignment option: "full screen". How do you handle that in the editor 100vh would be slightly more than what is visible (with the header toolbar, etc)?

@mtias
Copy link
Member

mtias commented Jul 5, 2019

@phpbits how do you feel about exploring how this might work within the alignments group?

@phpbits
Copy link
Contributor Author

phpbits commented Jul 5, 2019

@mtias Sorry for late response. I'm actually planning to explore this are next week. I'm just finishing up the custom classes for editorsKit which is almost done. I'm really sure this will work on the alignment group though, I'm just not sure which filter to use right now. I'll let you know how it goes. Thanks!

@phpbits
Copy link
Contributor Author

phpbits commented Jul 12, 2019

@mtias Just checked and it seems that there's now SlotFill available to register new alignment. It has to be manually added here : https://github.com/WordPress/gutenberg/blob/359858da0675943d8a759a0a7c03e7b3846536f5/packages/block-editor/src/components/block-alignment-toolbar/index.js . Thanks!

jasmussen pushed a commit that referenced this issue Jul 12, 2019
Try: Always collapse block alignments.
8f12cf0 
This PR makes the block alignments always be collapsed. This group would already collapse at mobile responsive breakpoints. In addition, this PR also adds a dropdown arrow.

This comes with a couple of benefit:

- It ensures that the block toolbar always fits even when the item is deeply nested inside columns.
- It affords a scalable method to show additional alignment options, such as those suggested in #16385.
- It scales to future ideas of allowing a theme to create CSS grid-based layouts, which could allow theme authors to create their own custom alignments such as "pull right" or others.
- It has labels, to be descriptive of such new alignments.

Noting that 3 is just an idea at this point, but the other items on the list can potentially benefit us today.
@jasmussen jasmussen mentioned this issue Jul 12, 2019
Merged
@mtias
Copy link
Member

mtias commented Jul 14, 2019

@phpbits yes, let's try to add it there directly as a new alignment and see how it feels.

@mtias mtias added the Good First Issue An issue that's suitable for someone looking to contribute for the first time label Jul 18, 2019
@retrofox
Copy link
Contributor

I'm going to work on this one. No guarantee, though.

@retrofox
Copy link
Contributor

My first question is which icon would we use?
Are these ones all icons available?
https://developer.wordpress.org/resource/dashicons

@retrofox
Copy link
Contributor

let's try to add it there directly as a new alignment and see how it feels.

It seems to be possible to work combined with the alignment options. For instance, it's possible to align the image at the right and turn on the full-screen mode:

  • align right - full screen off
    image

  • align right - full screen off
    image

@retrofox retrofox mentioned this issue Jul 22, 2019
Closed
@retrofox
Copy link
Contributor

hi @phpbits, 👋
Could you help me to understand what you mean with extensible?

@retrofox
Copy link
Contributor

@retrofox Is it possible to make the alignment extensible, similar to block styles?

I think I got it. Do you mean to be able to add this option to other blocks, right? For instance, add it paragraphs, etc. Is it right?

@retrofox retrofox mentioned this issue Jul 24, 2019
Closed
4 tasks
gziolo pushed a commit that referenced this issue Jul 25, 2019
@gziolo
Try: Always collapse block alignments.
4ee5511 
This PR makes the block alignments always be collapsed. This group would already collapse at mobile responsive breakpoints. In addition, this PR also adds a dropdown arrow.

This comes with a couple of benefit:

- It ensures that the block toolbar always fits even when the item is deeply nested inside columns.
- It affords a scalable method to show additional alignment options, such as those suggested in #16385.
- It scales to future ideas of allowing a theme to create CSS grid-based layouts, which could allow theme authors to create their own custom alignments such as "pull right" or others.
- It has labels, to be descriptive of such new alignments.

Noting that 3 is just an idea at this point, but the other items on the list can potentially benefit us today.
gziolo pushed a commit that referenced this issue Jul 26, 2019
@gziolo
Try: Always collapse block alignments. (#16557)
79d7847 
* Try: Always collapse block alignments.

This PR makes the block alignments always be collapsed. This group would already collapse at mobile responsive breakpoints. In addition, this PR also adds a dropdown arrow.

This comes with a couple of benefit:

- It ensures that the block toolbar always fits even when the item is deeply nested inside columns.
- It affords a scalable method to show additional alignment options, such as those suggested in #16385.
- It scales to future ideas of allowing a theme to create CSS grid-based layouts, which could allow theme authors to create their own custom alignments such as "pull right" or others.
- It has labels, to be descriptive of such new alignments.

Noting that 3 is just an idea at this point, but the other items on the list can potentially benefit us today.

* Refactor alignment toolbars to be collapsed by default

* Add arrow indicator to the Edit tabel dropdown menu

* Update snapshot tests to work with updated components

* Update failing e2e tests to work after UI changes introduced
@paaljoachim paaljoachim mentioned this issue Jul 28, 2019
Open
@phpbits
Copy link
Contributor Author

phpbits commented Jul 29, 2019

@retrofox I've actually had a second thought and removed my comment sorry. I just thought it'll be better if we can easily add alignment like registerBlockStyle but it should be different issue than this one.

@retrofox
Copy link
Contributor

I've updated the PR this morning: #16738 👋

@gziolo gziolo added the Needs Dev Ready for, and needs developer efforts label Oct 21, 2019
@kjellr
Copy link
Contributor

kjellr commented May 20, 2020

Just noting that I'd love to see this resurrected. A fullscreen alignment would be excellent for use in certain block patterns.

@mtias
Copy link
Member

mtias commented Jun 8, 2020

Now that we have vh unit support at the component level it seems we could make the alignment be a shortcut to it. cc @ItsJonQ

@retrofox retrofox mentioned this issue Oct 30, 2020
Merged
6 tasks
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Oct 30, 2020
@retrofox
Copy link
Contributor

Now that we have vh unit support at the component level it seems we could make the alignment be a shortcut to it. cc @ItsJonQ

tackled here #26615

@retrofox
Copy link
Contributor

re-open...

@retrofox retrofox reopened this Nov 23, 2020
@melchoyce
Copy link
Contributor

Can we add vh to the Media & Text block as well?

@retrofox
Copy link
Contributor

retrofox commented Mar 2, 2021

Can we add vh to the Media & Text block as well?

something talked with @jasmussen too if I'm not wrong. Thoughts?

@jasmussen
Copy link
Contributor

Can we add vh to the Media & Text block as well?

It looks like the first step would be to add a general height control to the Media & Text block, that's not present yet.

@melchoyce melchoyce mentioned this issue Jun 8, 2021
Open
@gziolo gziolo changed the title Full Screen alignment/display option on several blocks Blocks: Full Screen alignment/display option on several blocks Feb 26, 2023
@gziolo gziolo added [Feature] Blocks Overall functionality of blocks and removed [Feature] Block API API that allows to express the block paradigm. [Status] In Progress Tracking issues with work in progress labels Feb 26, 2023
@jordesign jordesign added the [Type] Enhancement A suggestion for improvement. label Aug 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@retrofox retrofox

Labels
[Feature] Blocks Overall functionality of blocks Good First Issue An issue that's suitable for someone looking to contribute for the first time Needs Dev Ready for, and needs developer efforts [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Full Height Alignment Toolbar: Implementation + Cover integration. WordPress/gutenberg
10 participants
@retrofox @mtias @gziolo @swissspidy @kjellr @jasmussen @jordesign @melchoyce @phpbits and others