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

[beafialho]

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).

footer.mp4

[andrewserong]

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]

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]

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]

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]

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]

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

[tellthemachines]

@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]

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

[tellthemachines]

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]

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]

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:

Will look into it further.

[brentlogan]

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]

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]

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]

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]

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!