Add feature banner to Front Page. #37

StevenDufresne · 2022-11-08T04:08:29Z

Fixes: #26

This PR uses a query block with perPage=1 and sticky posts = only to retrieve a post to display as the featured site on the homepage.

Notes

There is currently an issue with sticky posts not respecting the per-page attribute. As a result, we need to patch query_loop_block_query_vars.
There can only be 1 sticky post. (Although we could improve this to choose the latest)
Couldn't do this 100% in the block editor.
- Tried a cover block, but couldn't control the image position without combatting a lot of CSS.
The current implementation can only accommodate site names of 27 characters or less.
- I think this is okay for launch. We can spend more time but it will be more custom CSS and it's yet to be seen as to whether it's necessary.
This uses an SVG, and therefore need to add some svg upload code.
h1 is added with "showcase" and class=screen-reader-text
Since we are using a query block, it creates a list, do we care?

Screenshots

Mobile	Table	Desktop

How to test

Copy the SVG code below into a file and upload it to your environment.
Replace the broken image with your uploaded version.
Visit /

SVG

<?xml version="1.0" encoding="utf-8"?>
<svg width="772" height="167" viewBox="0 0 772 167" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32.2 166.2C22.2 166.2 13.8667 164.4 7.2 160.8C0.533334 157.067 -4.53333 151.533 -8 144.2C-11.3333 136.733 -13.2667 127.267 -13.8 115.8L14.6 111C14.8667 117.667 15.5333 123.267 16.6 127.8C17.8 132.2 19.5333 135.533 21.8 137.8C24.2 139.933 27.1333 141 30.6 141C34.8667 141 37.7333 139.667 39.2 137C40.8 134.333 41.6 131.267 41.6 127.8C41.6 121 39.9333 115.333 36.6 110.8C33.4 106.133 29.1333 101.467 23.8 96.8L7 82.2C1 77.1333 -3.93333 71.4 -7.8 65C-11.5333 58.6 -13.4 50.7333 -13.4 41.4C-13.4 28.0667 -9.53333 17.8667 -1.8 10.8C6.06667 3.59999 16.8 -1.04904e-05 30.4 -1.04904e-05C38.5333 -1.04904e-05 45.2 1.33333 50.4 4C55.6 6.66666 59.6 10.2667 62.4 14.8C65.3333 19.2 67.3333 24.0667 68.4 29.4C69.6 34.6 70.3333 39.8 70.6 45L42.4 49.2C42.1333 44.2667 41.6667 39.9333 41 36.2C40.4667 32.4667 39.2667 29.5333 37.4 27.4C35.6667 25.2667 33 24.2 29.4 24.2C25.5333 24.2 22.6667 25.6667 20.8 28.6C18.9333 31.4 18 34.5333 18 38C18 43.7333 19.2667 48.4667 21.8 52.2C24.4667 55.8 28.0667 59.6 32.6 63.6L49 78C55.8 83.8667 61.6 90.6 66.4 98.2C71.3333 105.667 73.8 114.933 73.8 126C73.8 133.6 72.0667 140.467 68.6 146.6C65.1333 152.733 60.2667 157.533 54 161C47.8667 164.467 40.6 166.2 32.2 166.2ZM79.5766 164L79.5766 1.99999L112.577 1.99999V68.6H141.177V1.99999L174.177 1.99999L174.177 164H141.177V92.2H112.577V164H79.5766ZM232.298 166.2C220.432 166.2 211.032 164.067 204.098 159.8C197.165 155.533 192.165 149.467 189.098 141.6C186.165 133.6 184.698 124.067 184.698 113L184.698 52.6C184.698 41.5333 186.165 32.0667 189.098 24.2C192.165 16.3333 197.165 10.3333 204.098 6.19999C211.032 2.06666 220.432 -1.04904e-05 232.298 -1.04904e-05C244.298 -1.04904e-05 253.765 2.13332 260.698 6.39999C267.765 10.5333 272.765 16.5333 275.698 24.4C278.765 32.1333 280.298 41.5333 280.298 52.6V113C280.298 124.067 278.765 133.6 275.698 141.6C272.765 149.467 267.765 155.533 260.698 159.8C253.765 164.067 244.298 166.2 232.298 166.2ZM232.298 142.4C236.565 142.4 239.698 141.467 241.698 139.6C243.698 137.6 245.032 135 245.698 131.8C246.365 128.467 246.698 124.933 246.698 121.2V44.6C246.698 40.8667 246.365 37.4 245.698 34.2C245.032 31 243.698 28.4667 241.698 26.6C239.698 24.6 236.565 23.6 232.298 23.6C228.298 23.6 225.298 24.6 223.298 26.6C221.298 28.4667 219.965 31 219.298 34.2C218.632 37.4 218.298 40.8667 218.298 44.6L218.298 121.2C218.298 124.933 218.565 128.467 219.098 131.8C219.765 135 221.098 137.6 223.098 139.6C225.098 141.467 228.165 142.4 232.298 142.4ZM304.933 164L283.933 1.99999L311.933 1.99999L323.133 101L337.333 2.2L359.533 2.2L374.333 100.8L385.533 1.99999L413.133 1.99999L392.333 164H364.333L348.533 61.4L333.533 164H304.933ZM463.567 166.2C451.567 166.2 442.034 163.933 434.967 159.4C428.034 154.867 423.167 148.6 420.367 140.6C417.567 132.467 416.167 123.067 416.167 112.4V54.2C416.167 43 417.567 33.4 420.367 25.4C423.167 17.2667 428.034 11 434.967 6.59999C442.034 2.19999 451.567 -1.04904e-05 463.567 -1.04904e-05C475.167 -1.04904e-05 484.234 1.93333 490.767 5.8C497.434 9.66666 502.101 15.1333 504.767 22.2C507.567 29.2667 508.967 37.4667 508.967 46.8V60.4H476.967V45.2C476.967 41.4667 476.767 38 476.367 34.8C475.967 31.4667 474.834 28.8 472.967 26.8C471.234 24.6667 468.167 23.6 463.767 23.6C459.367 23.6 456.167 24.6667 454.167 26.8C452.167 28.9333 450.901 31.7333 450.367 35.2C449.834 38.5333 449.567 42.2667 449.567 46.4V120C449.567 124.533 449.901 128.533 450.567 132C451.367 135.333 452.767 137.933 454.767 139.8C456.901 141.533 459.901 142.4 463.767 142.4C468.034 142.4 471.034 141.4 472.767 139.4C474.634 137.267 475.767 134.467 476.167 131C476.701 127.533 476.967 123.867 476.967 120V104.2H508.967V117.6C508.967 127.067 507.634 135.467 504.967 142.8C502.301 150 497.701 155.733 491.167 160C484.634 164.133 475.434 166.2 463.567 166.2ZM509.114 164L540.514 1.99999L577.114 1.99999L608.314 164L577.714 164L571.914 128.4H546.314L540.114 164H509.114ZM549.314 108.2L568.714 108.2L558.914 42.8L549.314 108.2ZM653.559 166.2C643.559 166.2 635.226 164.4 628.559 160.8C621.893 157.067 616.826 151.533 613.359 144.2C610.026 136.733 608.093 127.267 607.559 115.8L635.959 111C636.226 117.667 636.893 123.267 637.959 127.8C639.159 132.2 640.893 135.533 643.159 137.8C645.559 139.933 648.493 141 651.959 141C656.226 141 659.093 139.667 660.559 137C662.159 134.333 662.959 131.267 662.959 127.8C662.959 121 661.293 115.333 657.959 110.8C654.759 106.133 650.493 101.467 645.159 96.8L628.359 82.2C622.359 77.1333 617.426 71.4 613.559 65C609.826 58.6 607.959 50.7333 607.959 41.4C607.959 28.0667 611.826 17.8667 619.559 10.8C627.426 3.59999 638.159 -1.04904e-05 651.759 -1.04904e-05C659.893 -1.04904e-05 666.559 1.33333 671.759 4C676.959 6.66666 680.959 10.2667 683.759 14.8C686.693 19.2 688.693 24.0667 689.759 29.4C690.959 34.6 691.693 39.8 691.959 45L663.759 49.2C663.493 44.2667 663.026 39.9333 662.359 36.2C661.826 32.4667 660.626 29.5333 658.759 27.4C657.026 25.2667 654.359 24.2 650.759 24.2C646.893 24.2 644.026 25.6667 642.159 28.6C640.293 31.4 639.359 34.5333 639.359 38C639.359 43.7333 640.626 48.4667 643.159 52.2C645.826 55.8 649.426 59.6 653.959 63.6L670.359 78C677.159 83.8667 682.959 90.6 687.759 98.2C692.693 105.667 695.159 114.933 695.159 126C695.159 133.6 693.426 140.467 689.959 146.6C686.493 152.733 681.626 157.533 675.359 161C669.226 164.467 661.959 166.2 653.559 166.2ZM700.536 164V1.99999L771.136 1.99999V24.8L733.536 24.8V67.8H762.536V90.8H733.536V141.6H771.536V164H700.536Z" fill="white"/>
</svg>

StevenDufresne · 2022-11-09T04:01:59Z

source/wp-content/themes/wporg-showcase-2022/src/style/style.scss

+@media (min-width: 782px) {
+	.wporg-hero-details {
+		padding-top: 0;
+		margin-top: -64px !important;


This is a bit sensitive. Can't think of a better way.

renintw

Tested and looks good! 👍

renintw · 2022-11-10T16:02:28Z

Since we are using a query block, it creates a list, do we care?

Not so sure about this, any potential problems you found that might happen by using it?
I saw that we've already limited it to only 1 sticky post and the style/screen reader looks ok.

StevenDufresne · 2022-11-11T00:14:03Z

source/wp-content/themes/wporg-showcase-2022/functions.php

+ * @return array The enhanced allowed mime types.
+ */
+function wporg_add_svg_to_upload_mimes( $upload_mimes ) {
+	if ( current_user_can( 'manage_options' ) ) {


@dd32 Does this make any sense? To allow SVG uploads but lock it down to admins?

In all honesty, this doesn't belong in the theme, and I'm not sure the context of adding it.

There's also something to say that this should be using unfiltered_upload, but that isn't available to anyone on WordPress.org.

I think I'd rather enable a plugin such as https://wordpress.org/plugins/safe-svg/ (or one of the others) on the site instead if SVG upload is required.

Yeah fair, I'll avoid adding SVG support.

I think we'll need SVG support eventually, so I've added a low-priority issue over in mu-plugins: WordPress/wporg-mu-plugins#300

StevenDufresne force-pushed the try/mast-head branch from 70284fa to ade8629 Compare November 9, 2022 03:47

StevenDufresne changed the title ~~First attempt at mast-head.~~ Add feature banner to Front Page. Nov 9, 2022

StevenDufresne commented Nov 9, 2022

View reviewed changes

StevenDufresne requested review from adamwoodnz, renintw and ryelle November 9, 2022 04:02

renintw approved these changes Nov 10, 2022

View reviewed changes

StevenDufresne added 8 commits November 11, 2022 09:01

First attempt at mast-head.

a6f66a2

Allow for sticky posts.

812b25b

Add in query control for mast head.

8234792

Update the header and control expansion of hero bg.

eec8fd8

Use an svg.

a7e2ca1

Rebuild using css and svg image.

2ab6a52

Run lint.

2d2bf4f

Update the copy of doc.

c45a0d7

StevenDufresne force-pushed the try/mast-head branch from 72d04a7 to c45a0d7 Compare November 11, 2022 00:02

StevenDufresne added 2 commits November 11, 2022 09:05

Fix rebase conflict.

6079f7f

Add svg img and functions that allows it.

22f0026

StevenDufresne commented Nov 11, 2022

View reviewed changes

StevenDufresne added 2 commits November 14, 2022 08:50

Remove the ability to upload svg.

36dd722

Use showcase images from cdn.

08e776a

StevenDufresne merged commit 3743822 into main Nov 14, 2022

ryelle mentioned this pull request Nov 15, 2022

Allow SVG uploads WordPress/wporg-mu-plugins#300

Open

ryelle deleted the try/mast-head branch November 22, 2022 16:34

ryelle mentioned this pull request Aug 14, 2023

Homepage: Add hero section for random featured site #145

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add feature banner to Front Page. #37

Add feature banner to Front Page. #37

StevenDufresne commented Nov 8, 2022 •

edited

Loading

StevenDufresne Nov 9, 2022

renintw left a comment

renintw commented Nov 10, 2022

StevenDufresne Nov 11, 2022

dd32 Nov 11, 2022 •

edited

Loading

StevenDufresne Nov 13, 2022

ryelle Nov 15, 2022

StevenDufresne Nov 16, 2022

Add feature banner to Front Page. #37

Add feature banner to Front Page. #37

Conversation

StevenDufresne commented Nov 8, 2022 • edited Loading

Notes

Screenshots

How to test

StevenDufresne Nov 9, 2022

Choose a reason for hiding this comment

renintw left a comment

Choose a reason for hiding this comment

renintw commented Nov 10, 2022

StevenDufresne Nov 11, 2022

Choose a reason for hiding this comment

dd32 Nov 11, 2022 • edited Loading

Choose a reason for hiding this comment

StevenDufresne Nov 13, 2022

Choose a reason for hiding this comment

ryelle Nov 15, 2022

Choose a reason for hiding this comment

StevenDufresne Nov 16, 2022

Choose a reason for hiding this comment

StevenDufresne commented Nov 8, 2022 •

edited

Loading

dd32 Nov 11, 2022 •

edited

Loading