wordpress / twentytwentythree Goto Github PK

Now that this should be possible (#42662), we should match the Search template to the designs.

And another one:

Screenshot:

Figma link:
https://www.figma.com/file/Fft6s8KS3I0BUcwu4ybdLd/TT3-Variation-%22Dusk%22?node-id=2%3A9

JSON:
variation-dusk.json.zip

Notice</b>: Undefined index: button in <b>C:\laragon\www\tt3\wp-includes\class-wp-theme-json.php</b> on line <b>1482

Go to pages > add new and you will see the list of notice.

Make sure debug mode is enabled from wp-config.php file.

It would be nice to browse the style variations in the correct order. That would be left to right: Default > Example 2 > Example 3 > Example 4.

Also, there's a typo in "Example 2".

We need a screenshot for the base theme :D

Screenshot:

Figma File:
https://www.figma.com/file/4ww4vOJJD38ozSZyd8UUfF/TT3-Variation-%22Salmon%22?node-id=2%3A9

JSON:
variation-salmon.json.zip

It is common for the default themes to be compatible with WordPress versions below the version the theme is first included in.

This theme's minimum required version is set to 5.9, but the theme can not be activated on 5.9.3:

The package could not be installed. The theme is missing the index.php file.
Theme installation failed.

The theme could include an index.php file without causing conflicts for 6.1.
But are there other 6.1 features that are breaking on 5.9?

• The spacing CSS variables are not working. So it depends if you consider that breaking or not.
• "Elements" hover and focus styles do not work.
• Font family options do not work.
• The patterns folder does not work on 5.9. So the theme has no footer and no 404 page content.

Updating templates to include new features like the "no results" block for the queries and the new comments blocks also depends on increasing the version.

Add code linting to make sure WordPress Coding Standards are maintained during the development.

Tasks:

• Add Stylelint for CSS linting.
• Add PHPCS for PHP CS and linting.
• Add required GitHub workflows to run linting on PRs.

Need Discussion:

• Add pre-commit hook
• Is config for JS linting required?

It would be nice to remove the site logo from the default header, so we can have this instead:

This is my contribution to the TT3 style variations:

Screenshot:

Figma link:
https://www.figma.com/file/NV8HsXUVEmTZNCrCOZdJcd/TT3-Variation-%22Maresa%22?node-id=0%3A1

JSON:
variation-maresa.json.zip

As this is the first time I'm working with style variations, please let me know if I'm missing something.

Currently, the 'small' font size is set to 1rem, but as we're using fluid typography and we have set no min or max value, this font size preset scales to a very small size at smaller resolutions (12px).

I think we should add at least a min value to the 'small' size, maybe around 14px / 0.9rem?

It looks like the root padding is applied twice in a query block:

Screenshot:

Figma:
https://www.figma.com/file/X9roJpG5KECqJLpdYYXL2e/TT3-Variation-%22Bantam%22?node-id=409%3A214

JSON:
variation-bantam.json.zip

The 404 page pattern needs to be updated to match the design.

Screenshot:

Figma:
https://www.figma.com/file/4Westbc4Hp3NIiWlRsXOzY/TT3-Variation-%22Sea%22?node-id=409%3A214

JSON:
variation-sea.json.zip

Across the templates, the format var(--wp--preset--spacing--90) is used inside the JSON block comment.
For the code in the template to match the code of new blocks added in the block editor, this format should be used: var:preset|spacing|numeric-value
See #55 (comment)

Should the single-no-separators.html remain in the theme, but without the separator above the post meta?

The page does not have separators, I suggest removing the template.

As TT3 is focused on style variations, it would be good to remove as many opinionated styles from the block markup as possible. There are a few places where this is happening, but sometimes it can be difficult where unique styles have been required. Here's an example of where we have done this previously: #31

This issue is to track where we could consider moving these settings, and encourage discussion around this for each area:

• 404 pattern: #93
• Search template: #103
• Home template: #94

Proposal for consideration:

• TT3 theme - with 2-4 style variations, and
• TT3 child theme - with a handful of community-contributed style variations

Possible benefits:

• Test the limits of current WordPress theme APIs
• Encourage further creative expression by encouraging more fonts and even Patterns included

Possible drawbacks:

• Harder to onboard new contributors with two different repos/projects
• Maintenance - related to above. Two projects to maintain.
• Possible that the TT3 child theme may be underutilized (low install numbers) and impact morale of contributors.
• Shift in timeline and progress, but this could potentially be a benefit too: faster ship times with separation of concerns.

Just opening this up to discussion and consideration. Thanks!

Screenshot:

Figma:
https://www.figma.com/file/525rrh1C6wK7LsYJotXve6/TT3-Variation-%22Lolipop%22-(Copy)?node-id=2%3A9

• Can we keep the #345C00 color to the links in paragraphs only?

• Also, let's match the links with TT2: 1px underline thickness and a text-underline-offset:.25ch with the same hover effect.

Opening up an issue to track the creation of a demo site. I've handled the paperwork of getting a *.wordpress.net site for the past few years and happy to continue if desired.

I'd get the site setup, keep it up to date with Core/Gutenberg/plugins/TT3 code. A themer would go in to actually setup the demo site as desired.

Can we add the typeface IBM Plex Mono to the font assets? Thank you!

Given the likelihood that variations from community authors will use different Google fonts, at least one of the example variations should demonstrate how it is loaded in its theme.json file such as:

	"title": "Example X",
	"settings": {
		"color": {
			"palette": [
				{
					"color": "#ffd875",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#000000",
					"name": "Contrast",
					"slug": "contrast"
				},
				{
					"color": "#ffffff",
					"name": "Primary",
					"slug": "primary"
				},
				{
					"color": "#000000",
					"name": "Secondary",
					"slug": "secondary"
				},
				{
					"color": "#F6F6F6",
					"name": "Tertiary",
					"slug": "tertiary"
				}
			]
		},
		"typography": {
			"fontFamilies": [
				{
					"fontFace": [
						{
							"fontFamily": "Open Sans",
							"fontStretch": "normal",
							"fontStyle": "normal",
							"fontWeight": "200 900",
							"src": [
								"file:./assets/fonts/open-sans/OpenSans-Regular.ttf"
							]
						},
						{
							"fontFamily": "Open Sans",
							"fontStretch": "normal",
							"fontStyle": "italic",
							"fontWeight": "200 900",
							"src": [
								"file:./assets/fonts/open-sans/OpenSans-Italic.ttf"
							]
						}
					],
					"fontFamily": "\"Open Sans\", sans-serif",
					"name": "Open Sans",
					"slug": "open-sans"
				}
			]
		}
	},
	"styles": {
		"blocks": {
			"core/separator": {
				"border": {
					"width": "2px"
				}
			}
		},
		"elements": {
			"button": {
				"border": {
					"radius": "5px"
				}
			}
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--open-sans)"
		}
	},
	"version": 2,
	"$schema": "https://schemas.wp.org/trunk/theme.json"
}```

Twenty Twenty-Three Figma Mockups

The figma file link in the readme file is either not linking to anything or inacessable. Can this resource be enabled for read-only by default?

Currently the archive template is a query block with a list style view. It should match the Figma design instead, using a 2 x 3 layout:

There are a few details from the Figma that should be refined in the templates:

Page & Single

• The Post Featured Image should come before the Post Title
• There should not be a separator between the Post Title and the Post Content

Single

• The post meta should be split into a row and wide aligned, with the Post Date, Category and Author on the left, and the Tags on the right.

Figma reference here

We should consider using more generic font-family slugs (i.e. body, heading, etc) instead of slugs that are specific to the font family that is registered within settings.typography.fontFamilies.

The fonts loaded within settings.typography.fontFamilies are only available on the active style, resulting in CSS variables

Why:

If a the parent theme.json file registers a font, like DM Sans, and uses a slug of dm-sans — whenever we switch styles we're left with an undefined CSS variable output wherever we used "fontFamily": "var(--wp--preset--font-family--system-font)".

Also resulting in none of the parent theme.json's font family values will carry over to subsequent styles.

Below is a screenshot of the CSS generated if you have a specific font-family slug from the parent theme.json that is not available (different font) from a style variation.

Proposal:

Instead if we used body and heading slugs, then those CSS variables will be meaningful within other style variations. A heading with "fontFamily": "var(--wp--preset--font-family--heading)", assigned to it, still maintains the style variant's fontFamily that has the slug of heading.

Having a style that actually inherits the parent style seems the best foot forward in my opinion. And even if we end up not having fontFamilies within the parent theme.json, we should still have these consistent values across the theme — from variation to variation. Example: if I choose my theme's heading font (DM Sans) then switch styles, then that style variation's heading font should take over wherever I used the previous one.

What do you think?

Screenshot:

Currently, the theme uses the deprecated post comments block: <!-- wp:post-comments /-->.
I suggest using the new comments query and related blocks instead.
I also recommend that this is added as a template part to reduce code duplication.

The comment query requires WordPress 6.0, and depends on #24

Guide.pdf

Screenshot:

Figma:
https://www.figma.com/file/2CPz5M7rq4pX1o5Gx3urQA/TT3-Variation-%22Funky%22?node-id=2%3A9

JSON:
variation-funky.json.zip

The current spacing is using the new spacing size presets from Gutenberg, however, the sizes are incorrect. They should match the spacing sizes used in Twenty Twenty-Two and the new Twenty Twenty-Three designs.

The font files for Source Serif Pro are twice in the theme, once in the fonts folder itself, and once in the source-serif-pro subfolder. The theme.json file references the files in the source-serif-pro folder, so I guess it's safe to remove the files in the fonts folder.

The style variation thumbnail previews don't currently reflect the fonts used in each variation. The smaller Aa Aa preview that appears on hover looks correct, but the larger text on hover and the Aa text in the main preview are not displaying properly:

Notice: Error when decoding a JSON file at path /sites/twentyTwentyThree/styles/example-five.json: Syntax error in /Sites/TwentyTwentyThree_site/app/public/wp-includes/functions.php on line 4548

I noticed that the font size and hover/focus/active is different on the submenu and home link compared to the "core/navigation-link", which is styled in theme.json.

Is it possible to place these styles directly on the navigation block instead of the child block?
If not, I think that if we are going to style one of them, we have to style and test all the child blocks.

The search form is using the default medium font size, compared to the navigation link which uses the small font size.

In the image:
First, from the left side, there are two regular navigation links that are using size small.
Next is a sub menu, which uses the default medium size.
And then a page link and the search form.

Currently, the theme.json declares base and contrast colors that match the background and text colors of the site. To be consistent with Twenty Twenty-Two, the Colors inside the Figma Styles page, and a majority of themes (Poe, Blockbase, Vivre, Pendant, Extendable, Lyna, Gutenify, eStory, Lawson...), we should consider using the background and foreground slugs along with the "Background" and "Foreground" names.

Moreover, having the same color slugs as Twenty Twenty-Two would allow users to easily switch from Twenty Twenty-Two to Twenty Twenty-Three.

The H4 is larger than the H3 heading.

The theme should follow core best practices and add context to the sample texts.
See WordPress/gutenberg#43409

The default footer pattern uses a category called "footer", but this category is not registered.

Currently, the style.css and functions.php files are only required to add the following CSS:

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

I don't believe we'll need to add any other CSS, so it's a shame to include these files just to handle font-smoothing. Unfortunately, the current system font we're using looks significantly worse without the above CSS.

A solution could be to choose a different default font, but that may require bundling more font files.

Another idea could be to add a theme.json setting that opts-in to font-smoothing, however this has been discussed previously: WordPress/gutenberg#35934

Would love to hear any more ideas.

Screenshot:

Figma:
https://www.figma.com/file/CqspxoBojdP0say5PdNcYU/TT3-Variation-%22Pastel%22?node-id=0%3A1

JSON:
variation-mint.json.zip

Originally discussed here - #22 (comment)

This issue is to list and track any Gutenberg issues that would benefit Twenty Twenty-Three and its variations.

Required for base theme (WP 6.1):

• WordPress/gutenberg#41142
• WordPress/gutenberg#42847
• WordPress/gutenberg#40085
• WordPress/gutenberg#43088
• WordPress/gutenberg#42594
• WordPress/gutenberg#43466
• WordPress/gutenberg#43925
• WordPress/gutenberg#44144
• WordPress/gutenberg#44262

NOT required, but nice to have for style variations:

• WordPress/gutenberg#43676
• WordPress/gutenberg#43660
• WordPress/gutenberg#42794 (allow variations to style 'outline' buttons)
• WordPress/gutenberg#40699
• WordPress/gutenberg#43395
• WordPress/gutenberg#43405
• WordPress/gutenberg#42105 (allow variations to use gradient backgrounds)
• WordPress/gutenberg#41972
• WordPress/gutenberg#43523
• WordPress/gutenberg#43347
• WordPress/gutenberg#36122
• WordPress/gutenberg#43816
• WordPress/gutenberg#43627
• WordPress/gutenberg#44428
• WordPress/gutenberg#27809

Following button states should match with figma.

Current:

Hover: (outline button background)

Focus: (dashed outline for both buttons)

Expected:

With the no results block, the theme can conditionally display blocks when a query returns no results.
Without this block, a search that has no results for example, displays an empty page.

The block requires WordPress 6.0 and depends on #24

Update:

• JSON file is here: https://github.com/justintadlock/tt3-rough-draft/blob/master/theme.json
• Raw: https://raw.githubusercontent.com/justintadlock/tt3-rough-draft/master/theme.json

Like its title, this variation is still very much a rough draft. However, I wanted to go ahead and share progress in case others were looking at how to override certain things (there's quite a bit of experimentation in there).

It took me a bit to learn some of the newer stuff. I haven't tackled fluid typography yet, but it's coming. I also need to look into mapping some custom slugs to TT3's existing slugs for things like font sizes.

Current progress is saved as a child theme in this repo (easy to install and test this way): https://github.com/justintadlock/tt3-rough-draft

Screenshot

The following is a screenshot of a single post (no separators template) with various blocks:

Currently the home template is a query block list-style view. It should match the Figma mockup:

Screenshot:

Figma Link:
https://www.figma.com/file/CHvE6JTndoOlNMN76JjRUT/TT3-Variation-%22Pastel%22?node-id=2%3A9

JSON:
variation-pastel.json.zip

Not sure if we are able to change a bit header and footer backgrounds or do we need to stick to the default Figma file as it is and play just with the colors and fonts? Can we submit more than one variation :)?