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

Align footer to the bottom of the page when the page has no/little content #45117

Closed
beafialho opened this issue Oct 19, 2022 · 16 comments
Closed
Labels
[Block] Template Part Affects the Template Parts Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Layout Layout block support, its UI controls, and style output.

Comments

@beafialho
Copy link

Whenever I add a footer and a page has no content or little content, what happens is that the footer stands in the middle of the screen, which looks awkward and buggy.

It would be nice if there was a way to align the footer template part to the bottom of the page when there's little content. In case this looks similar to #30121, I do not mean to have the footer fixed on scroll (which would also be great for other type of designs).

Captura de ecrã 2022-10-19, às 14 43 34

footer.mp4
@beafialho beafialho added [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Block] Template Part Affects the Template Parts Block labels Oct 19, 2022
@andrewserong
Copy link
Contributor

Thanks for opening up a separate issue for this! Depending on how it's implemented, I wonder if a minimum height option for the post content block would help? So, rather than controlling this via the position of the footer, the post content block could be set to take up at least the required amount of space?

@andrewserong andrewserong added the [Feature] Layout Layout block support, its UI controls, and style output. label Oct 25, 2022
@andrewserong
Copy link
Contributor

andrewserong commented Oct 25, 2022

I've just added the Layout label, too, as I believe this is quite related to many of the other tasks surrounding block and page layouts 🙂

@beafialho
Copy link
Author

Depending on how it's implemented, I wonder if a minimum height option for the post content block would help? So, rather than controlling this via the position of the footer, the post content block could be set to take up at least the required amount of space?

Maybe something similar to "Toggle Full Height" in the Cover block could work!

I've just added the Layout label, too

Thank you!

@andrewserong
Copy link
Contributor

I've put up a new PR that looks at adding in a minHeight block support in #45300 (it mostly borrows from some earlier experiments).

@tellthemachines
Copy link
Contributor

Now that both #45300 and #45364 have been merged, it should be possible to:

  1. Wrap the whole template in a Stack block;
  2. Set a min-height of, say, 90vh on the Stack block;
  3. Assuming the blocks inside the Stack to be Header, Group content wrapper, and Footer: add a height of "fill" to the Group content wrapper (can be found under Dimensions in the block sidebar).

@beafialho can you check if this solves the problem?

@beafialho
Copy link
Author

@tellthemachines I tried testing this, without success, but from the discussion in #45364, it seems like it solves the problem.

@tellthemachines
Copy link
Contributor

@beafialho thanks for testing! Was there anything specific you came across that didn't work? The whole flow is not super intuitive 😅 but if anything's actually broken we should look into it before the next release.

@beafialho
Copy link
Author

@tellthemachines given my lack of knowledge to test, I just tried to use http://gutenberg.run/45364 but that didn't work 😕

@tellthemachines
Copy link
Contributor

Oh, sorry @beafialho, I should have been clearer! These changes were merged a while ago so you can test them in the Gutenberg plugin.

@brentlogan
Copy link

I tried the follow the instructions by @tellthemachines of Jan3, but failed. When I wrap the template (Header, Group, and Footer) in a stack, I'm able to set the min-height and fill, as described. Unfortunately, the stack constrains everything to content width and there's no control to turn that off. I can convert the stack to a group and fix the width, but then the fill no longer works.

It seems that the stack needs the "inner blocks use content width" toggle for this to work, at least for how my theme is configured.

@tellthemachines
Copy link
Contributor

Thanks for testing @brentlogan! The Stack block shouldn't apply content width to its children. I can't reproduce that exact issue locally on the latest trunk, but I'm seeing some weirdness around the Header width when testing with the TT3 Home template:
Screenshot 2023-01-12 at 12 32 34 pm
Will look into it further.

@brentlogan
Copy link

Cool, at least it's not just me. Thanks for confirming @tellthemachines. Btw, I tested using a Front template in TT3 and got weirdness for both the header and footer widths

@tellthemachines
Copy link
Contributor

The issue seems to be caused by the align-items property set on the Stack block by default, which was also noted as causing problems in #46133. I'll look into how viable it would be to remove align-items altogether from the default flex styles; if not, our next best way forward is to add some alignment controls to Stack and Row blocks that allow for setting the alignment of their children to stretch.

@tellthemachines
Copy link
Contributor

With #47134 merged, it's now possible to make Stack block children stretch to the full width of their parent, so the issue reported by @brentlogan should be fixed. Are we good to close this issue now?

@andrewserong
Copy link
Contributor

andrewserong commented Feb 6, 2023

Between the additional flex controls that were added in #47134, sizing controls on layout flex children in #45364, and the minimum height block support in #45300, I agree, I think we can close out this issue now, as there are a few different ways that users or themes can put together a template where the footer area sits toward the bottom of the screen / the post content area takes up a minimum part of the screen.

I'll close this out now — if there are follow-ups required for the above features, let's open up separate issues for investigating those follow-ups.

@brentlogan
Copy link

With Gutenberg 15.1.0 I was able to confirm that the issue I'd reported above is now resolved. I wanted to close the loop.

Thanks, everyone that made this possible!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Template Part Affects the Template Parts Block [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Layout Layout block support, its UI controls, and style output.
Projects
None yet
Development

No branches or pull requests

4 participants