Skip to content

Conversation

@mikachan
Copy link
Member

This adds a placeholder screenshot to the boilerplate theme, which is used in the 'create blank theme' option of the plugin.

I think the benefit of this is that it gives users a basic image to work off, including the image type and dimensions.

Closes #169.

@mikachan mikachan added the enhancement New feature or request label Jan 26, 2023
@mikachan mikachan self-assigned this Jan 26, 2023
@jffng
Copy link
Contributor

jffng commented Jan 27, 2023

Thanks for picking it up!

What do you think about designing something very light for this, nodding to the fact that the theme was generated by create block theme? cc @beafialho.

@mikachan
Copy link
Member Author

Yeah, I like that idea! I also thought about that but then I thought the plain image was simpler. It would be great if we could design something light with a nod to create block theme.

@beafialho
Copy link

Thanks for tagging me! Do you have any sort of visual reference of what you mean? I don't think I'm visualizing it. Where would this screenshot show up in the plugin?

@mikachan
Copy link
Member Author

This is for a placeholder screenshot for an exported theme from the plugin. So it would show up in Appearance > Themes:

image

At the moment, the one I added is just that blank, transparent image.

@beafialho
Copy link

Thanks @mikachan! Since @henriqueiamarino designed the logo for the plugin, he'll follow up with this placeholder screenshot.

@matiasbenedetto
Copy link
Contributor

matiasbenedetto commented Jan 27, 2023

What do you think about having a dynamically generated image as a default screenshot image? This dynamically generated image could feature some of the characteristics of the theme as the typography and the palette. We could have a base design that we can dynamically modify using these visual tokens from the theme and the data from the data form.

There is an example I mocked up quickly in the browser. It isn't lovely, but to exemplify the idea:

image

@mikachan
Copy link
Member Author

That would be awesome, I really like your mockup!

One issue with that style of screenshot is if it's intended to be uploaded to the dotorg theme directory, then I don't think this follows the guidelines of accurately showing the theme design - I think ideally it's meant to represent the theme as it looks when activated (see WordPress/twentytwentythree#163 (comment) for more info).

We have this same issue with the blank screenshot or a screenshot with the Create Block Theme logo though too.

Maybe we just need to make it obvious that the screenshot needs to be replaced if uploading to the directory.

@matiasbenedetto
Copy link
Contributor

One issue with that style of screenshot is if it's intended to be uploaded to the dotorg theme directory, then I don't think this follows the guidelines of accurately showing the theme design

Ohh, good catch. Encouraging theme creators to upload the themes to the wordpress.org directory is desirable, so I guess that adding the dynamically created image won't make sense if the theme creators could not use the generated images to distribute the themes in the directory.

@henriqueiamarino
Copy link

henriqueiamarino commented Jan 27, 2023

@mikachan @matiasbenedetto @beafialho I was thinking in something simple like that, what do you think?

CreateBlockTheme Placeholder
placeholder screenshot

@matiasbenedetto
Copy link
Contributor

Would @henriqueiamarino 's design be allowed in the themes directory as screenshot image?

@mikachan
Copy link
Member Author

Would @henriqueiamarino 's design be allowed in the themes directory as screenshot image?

No, this wouldn't be allowed either, but I think it's more obvious that this is a placeholder image rather than the final screenshot.

@MaggieCabrera
Copy link
Contributor

Would @henriqueiamarino 's design be allowed in the themes directory as screenshot image?

no, but it's more obvious that it needs replacing since it's not specific to the theme. As I see it there's 3 options:

  • leave it transparent
  • use Henrique's design
  • generate a screenshot of the theme using canvas (the way dotcom does previews or how we preview the patterns on dotorg)

Only option 3 is valid for the directory

@mikachan
Copy link
Member Author

I think we could go with @henriqueiamarino's design for now, and maybe explore using canvas in a separate PR?

@beafialho
Copy link

@mikachan @matiasbenedetto @beafialho I was thinking in something simple like that, what do you think?

I'm not sure about the pixelated area 😕 it looks like a bug to me.

@henriqueiamarino
Copy link

Oh @beafialho do you think it gets better with bigger pixels? Because that was pretty the idea of the art — use 'logo blocks' to form a noise, a piece of visual information.

@beafialho
Copy link

Oh @beafialho do you think it gets better with bigger pixels?

Perhaps that can work!

@henriqueiamarino
Copy link

Oh @beafialho do you think it gets better with bigger pixels?

Perhaps that can work!

Updated!

@mikachan
Copy link
Member Author

Updated!

I've added the screenshot from this comment: #193 (comment). Is that correct?

Copy link
Member

@madhusudhand madhusudhand left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Compressed the screenshot to 51KB and pushed the commit.

LGTM!

@mikachan mikachan merged commit 58e2e00 into trunk Feb 2, 2023
@mikachan mikachan deleted the add/boilerplate-screenshot branch February 2, 2023 11:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Include a basic theme thumbnail image with boilerplate theme

8 participants