Add 404 template #56

cliffralessio · 2024-08-19T07:40:16Z

Description

<-- This pull request introduces a new 404 error page pattern for the Twenty Twenty-Five WordPress theme. -->

Image License and Source

<-- Image License: Pexels License-->
<-- Image Source: https://www.pexels.com/-->

Pexels License Summary
<-- The images on Pexels can be used for free. -->
<-- Commercial and non-commercial use is allowed. -->
<-- Attribution is not required, but giving credit to the photographer is appreciated. -->

Co-authored-by: cliffralessio [email protected]

…five into trunk

github-actions · 2024-08-19T07:40:28Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: cliffralessio <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: juanfra <[email protected]>
Co-authored-by: tanvirulhaque <[email protected]>
Co-authored-by: huzaifaalmesbah <[email protected]>
Co-authored-by: mukeshpanchal27 <[email protected]>
Co-authored-by: shail-mehta <[email protected]>
Co-authored-by: rejaulalomkhan <[email protected]>
Co-authored-by: kafleg <[email protected]>
Co-authored-by: beafialho <[email protected]>
Co-authored-by: up1512001 <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

patterns/hidden-404.php

…five into trunk

shail-mehta · 2024-08-19T12:06:41Z

@cliffralessio Thanks for the PR.

Could you please remove this class wp-image-17 in
patterns/hidden-404.php file line no 13?

patterns/hidden-404.php

rejaulalomkhan · 2024-08-19T17:30:11Z

@cliffralessio Thanks for making progress in resolving this issue.

templates/404.html

patterns/hidden-404.php

juanfra

Great progress @cliffralessio, thanks for working on this!

There are some presets already merged that you can make use of. I left some comments about a few things that are repeated throughout the code. If you re-base the branch with the latest changes in trunk you'll have the chance to use the linter and catch many of the issues that are currently happening.

The other thing that I'd like to ask is if you can please use tabs instead of spaces for the blank spaces, so that we're consistent with that across default themes.

patterns/hidden-404.php

templates/404.html

cliffralessio · 2024-08-21T08:08:43Z

@juanfra Thank you for helping me, this is my first contribution and I know I am making many mistakes, but on the other hand, thanks to you and @carolinan I am learning a lot!

patterns/hidden-404.php

rejaulalomkhan · 2024-08-21T14:50:36Z

Could we add a meaningful 404-related image name instead of this image-from-rawpixel-id-13029755-jpeg.webp

juanfra

Thank you for working on this @cliffralessio - There has been a lot of progress! the code looks way better, but the design is not there quite yet. When checking your branch I can see that the content area is not taking the full width and it's shown in a narrow column.

I'm sharing a screencast showing how you can adjust some of the configurations of the different blocks you have to get closer. Please let me know if I can be of help; we're almost there 🏅

404-template.mov

cliffralessio · 2024-08-23T15:32:50Z

@juanfra Thank you for your help, I followed your instructions but I am not sure about one thing.

When I see my template from a 1440px device everything is fine but, when I see it from a larger device my tamplate is always on the left of the screen. Is everything okay?

carolinan · 2024-08-24T01:15:50Z

templates/404.html

+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->
+


Please change this file to using tabs, not spaces, and remove the trailing space at the end.
The last line of the file should be empty.

Suggested change

carolinan · 2024-08-24T02:39:52Z

Even on smaller screens, the horizontal spacing is too large. It is getting the left and right spacing from both the template and the pattern.

Try removing the left and right padding from the columns block.

The block gap between the two columns could be larger to better match the design.

cliffralessio · 2024-08-24T08:25:40Z

This is what I mean.

I think the whole pattern should be in the center of the screen, shouldn't it?

beafialho · 2024-08-26T10:42:56Z

Thank you for your work @cliffralessio! I gave it a go with the row block and was able to achieve the design. But when I test it on mobile it doesn't look good. Somehow the same is happening with the grid block.

404.mp4

Here's the markup in case there's something wrong with what I'm doing:

<main class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"bottom","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:image {"id":10,"width":"810px","height":"auto","sizeSlug":"full","linkDestination":"none","style":{"layout":{"rowSpan":1,"columnSpan":2}}} -->
<figure class="wp-block-image size-full is-resized"><img src="http://tt5.local/wp-content/uploads/2024/08/image-404.webp" alt="" class="wp-image-10" style="width:810px;height:auto"/></figure>
<!-- /wp:image -->

<!-- wp:group {"style":{"layout":{"columnSpan":7,"rowSpan":1}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"bottom","justifyContent":"stretch","flexWrap":"wrap"}} -->
<div class="wp-block-group"><!-- wp:heading {"style":{"layout":{"columnSpan":8,"rowSpan":1}}} -->
<h2 class="wp-block-heading">Page not found</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The page you are looking for doesn’t exist, or it has been moved. Please try searching using the form below.</p>
<!-- /wp:paragraph -->

<!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Type something...","width":null,"widthUnit":"%","buttonText":"Search","style":{"border":{"radius":"100px"}}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group --></main>
<!-- /wp:group -->

mukeshpanchal27 · 2024-08-26T11:33:32Z

patterns/hidden-404.php

+	<div class="wp-block-columns alignwide" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)">
+		<!-- wp:column {"width":"40%"} -->
+		<div class="wp-block-column" style="flex-basis:40%">
+			<!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"is-resized"} -->


Suggested change





Image is not resized and linked.

These are the default values when you add an image in the block editor.
If they are removed, the editor has to manually add the class name and change the markup to this:

Please motivate why it should be removed?

cliffralessio · 2024-08-26T11:51:35Z

@beafialho I think it doesn't work because you are using a fixed size for the width:
<!-- wp:image {“id”:10, “width”: “810px”

carolinan · 2024-08-30T03:28:34Z

If this design is blocked, should we try a different design?

cliffralessio · 2024-08-30T06:16:10Z

Why is it blocked?

carolinan · 2024-08-30T07:33:03Z

I am reading comments from two people who are unable to make the design work well on all screen sizes.
So an option would be to change the design, instead of not progressing on the implementation of the current design.

beafialho · 2024-08-30T15:31:11Z

If it doesn't work with the row, nor the grid block, I tried with columns block. It achieves the design and it works across screen sizes 🎉 I believe this should solve it:

404.mp4

<!-- wp:group {"tagName":"main","metadata":{"name":"Page not found"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"default"}} -->
<main class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)"><!-- wp:columns {"verticalAlignment":null,"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"var:preset|spacing|50"}}}} -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":10,"scale":"cover","sizeSlug":"full","linkDestination":"none","style":{"layout":{"rowSpan":1,"columnSpan":2}}} -->
<figure class="wp-block-image size-full"><img src="http://tt5.local/wp-content/uploads/2024/08/image-404.webp" alt="" class="wp-image-10" style="object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"bottom"} -->
<div class="wp-block-column is-vertically-aligned-bottom"><!-- wp:group {"style":{"layout":{"columnSpan":7,"rowSpan":1}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:heading {"style":{"layout":{"columnSpan":8,"rowSpan":1}}} -->
<h2 class="wp-block-heading">Page not found</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The page you are looking for doesn’t exist, or it has been moved. Please try searching using the form below.</p>
<!-- /wp:paragraph -->

<!-- wp:search {"label":"Search","showLabel":false,"placeholder":"Type something...","buttonText":"Search","style":{"border":{"radius":"999px"}}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></main>
<!-- /wp:group -->

templates/404.html

carolinan · 2024-09-01T12:50:50Z

The following changes needs to be made:

Solve the merge conflict in the readme.txt file.
Copy the new markup from the comment by Bea above:

The opening and closing of the main element must be in the HTML file: But without the meta data, which you must remove:

<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"default"}} -->
<main class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">

</main>
<!-- /wp:group -->

Meaning the columns block must be in the PHP file, replacing the current markup.

In the columns, the source of the image must be updated, because when copy-pasting the pattern, the previous PHP code is lost.

carolinan · 2024-09-03T05:18:55Z

patterns/hidden-404.php

+		<!-- wp:group {"style":{"layout":{"columnSpan":7,"rowSpan":1}},"layout":{"type":"default"}} -->
+		<div class="wp-block-group">
+			<!-- wp:heading {"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"500"}}} -->
+			<h3 class="wp-block-heading" style="font-style:normal;font-weight:500">


The main heading on the page should be an H1.

carolinan · 2024-09-03T05:20:12Z

I am not able to do a git pull for this PR, it is getting rejected.

From https://github.com/WordPress/twentytwentyfive
 ! [rejected]        refs/pull/56/head -> cliffralessio/trunk  (non-fast-forward)
failed to run git: exit status 1

For the sake of speed, I'll try to create a new PR and merge it asap.

cliffralessio and others added 3 commits August 16, 2024 12:45

add patterns fold with hidden-404 file

ac98cc6

Merge branch 'trunk' of https://github.com/cliffralessio/twentytwenty…

3e54b37

…five into trunk

Merge branch 'WordPress:trunk' into trunk

d004fa7

carolinan reviewed Aug 19, 2024

View reviewed changes

patterns/hidden-404.php Outdated Show resolved Hide resolved

This comment was marked as resolved.

Sign in to view

cliffralessio added 2 commits August 19, 2024 10:36

Add 404 template

6f57c9a

Merge branch 'trunk' of https://github.com/cliffralessio/twentytwenty…

fb0e4f1

…five into trunk

juanfra linked an issue Aug 19, 2024 that may be closed by this pull request

Add 404 template #39

Closed

Remove class wp-image-17 in

a22ce28

patterns/hidden-404.php

carolinan reviewed Aug 20, 2024

View reviewed changes

templates/404.html Outdated Show resolved Hide resolved

carolinan reviewed Aug 20, 2024

View reviewed changes

templates/404.html Outdated Show resolved Hide resolved

carolinan reviewed Aug 20, 2024

View reviewed changes

patterns/hidden-404.php Outdated Show resolved Hide resolved

This comment was marked as resolved.

Sign in to view

cliffralessio added 2 commits August 20, 2024 09:16

Change image with that in figma file and correct some extra blank line

be6e9be

Add License link on readme.txt

bc20c43

juanfra reviewed Aug 20, 2024

View reviewed changes

patterns/hidden-404.php Outdated Show resolved Hide resolved

patterns/hidden-404.php Outdated Show resolved Hide resolved

patterns/hidden-404.php Outdated Show resolved Hide resolved

templates/404.html Outdated Show resolved Hide resolved

cliffralessio added 5 commits August 21, 2024 09:48

Adding some spacing presets and correcting some closures in php

95824ff

Fixed formatting issues

8a9d981

Removed @Package affiunto by mistake

162cda6

Fixed error Lint:PHP

7e6bc47

fixed another error in php

bb57283

tanvirulhaque reviewed Aug 21, 2024

View reviewed changes

patterns/hidden-404.php Outdated Show resolved Hide resolved

Remove Id from image block tag

b84ad70

huzaifaalmesbah reviewed Aug 21, 2024

View reviewed changes

patterns/hidden-404.php Outdated Show resolved Hide resolved

huzaifaalmesbah reviewed Aug 21, 2024

View reviewed changes

patterns/hidden-404.php Outdated Show resolved Hide resolved

juanfra reviewed Aug 23, 2024

View reviewed changes

change some designe issues

92a7e09

carolinan reviewed Aug 24, 2024

View reviewed changes

This comment was marked as resolved.

Sign in to view

cliffralessio added 2 commits August 24, 2024 10:11

Remove spaces in the final line

8aa0103

Remove left and right padding from the columns block

dc89319

fixed phpcs

0a1f258

carolinan added the [Status] Needs Design Feedback Needs general design feedback. label Aug 24, 2024

This comment was marked as resolved.

Sign in to view

mukeshpanchal27 reviewed Aug 26, 2024

View reviewed changes

Change custom color on search button and link and className on image

bd99b05

shail-mehta reviewed Sep 1, 2024

View reviewed changes

templates/404.html Outdated Show resolved Hide resolved

cliffralessio and others added 4 commits September 1, 2024 17:52

Merge branch 'trunk' into trunk

3b87500

Change layout in columns

b43222b

Fix php error

4728aa0

Merge branch 'trunk' into trunk

193b800

carolinan reviewed Sep 3, 2024

View reviewed changes

carolinan mentioned this pull request Sep 3, 2024

Add 404 template with pattern #183

Merged

carolinan closed this Sep 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add 404 template #56

Add 404 template #56

cliffralessio commented Aug 19, 2024 •

edited

Loading

github-actions bot commented Aug 19, 2024 •

edited

Loading

This comment was marked as resolved.

shail-mehta commented Aug 19, 2024

rejaulalomkhan commented Aug 19, 2024

This comment was marked as resolved.

juanfra left a comment

cliffralessio commented Aug 21, 2024

rejaulalomkhan commented Aug 21, 2024

juanfra left a comment

cliffralessio commented Aug 23, 2024

carolinan Aug 24, 2024

carolinan commented Aug 24, 2024 •

edited

Loading

This comment was marked as resolved.

cliffralessio commented Aug 24, 2024

beafialho commented Aug 26, 2024 •

edited

Loading

This comment was marked as resolved.

mukeshpanchal27 Aug 26, 2024

carolinan Aug 26, 2024 •

edited

Loading

cliffralessio commented Aug 26, 2024 •

edited by carolinan

Loading

carolinan commented Aug 30, 2024

cliffralessio commented Aug 30, 2024

carolinan commented Aug 30, 2024

beafialho commented Aug 30, 2024

carolinan commented Sep 1, 2024

carolinan Sep 3, 2024

carolinan commented Sep 3, 2024

		<!-- /wp:group -->

		<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->

	<!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"is-resized"} -->
	<!-- wp:image {"sizeSlug":"large"} -->

Add 404 template #56

Add 404 template #56

Conversation

cliffralessio commented Aug 19, 2024 • edited Loading

github-actions bot commented Aug 19, 2024 • edited Loading

This comment was marked as resolved.

shail-mehta commented Aug 19, 2024

rejaulalomkhan commented Aug 19, 2024

This comment was marked as resolved.

juanfra left a comment

Choose a reason for hiding this comment

cliffralessio commented Aug 21, 2024

rejaulalomkhan commented Aug 21, 2024

juanfra left a comment

Choose a reason for hiding this comment

cliffralessio commented Aug 23, 2024

carolinan Aug 24, 2024

Choose a reason for hiding this comment

carolinan commented Aug 24, 2024 • edited Loading

This comment was marked as resolved.

cliffralessio commented Aug 24, 2024

beafialho commented Aug 26, 2024 • edited Loading

This comment was marked as resolved.

mukeshpanchal27 Aug 26, 2024

Choose a reason for hiding this comment

carolinan Aug 26, 2024 • edited Loading

Choose a reason for hiding this comment

cliffralessio commented Aug 26, 2024 • edited by carolinan Loading

carolinan commented Aug 30, 2024

cliffralessio commented Aug 30, 2024

carolinan commented Aug 30, 2024

beafialho commented Aug 30, 2024

carolinan commented Sep 1, 2024

carolinan Sep 3, 2024

Choose a reason for hiding this comment

carolinan commented Sep 3, 2024

cliffralessio commented Aug 19, 2024 •

edited

Loading

github-actions bot commented Aug 19, 2024 •

edited

Loading

carolinan commented Aug 24, 2024 •

edited

Loading

beafialho commented Aug 26, 2024 •

edited

Loading

carolinan Aug 26, 2024 •

edited

Loading

cliffralessio commented Aug 26, 2024 •

edited by carolinan

Loading