Try: "Link in Bio" Theme

[kjellr]

A simple Seedlet variant that comes with a one-pager headstart content akin to a typical linktr.ee site.

Desktop	Mobile

It comes with a "Large Buttons" block style for the Social Links block, to achieve that list of social links at the top. It's missing editor styles for this right now.

This still needs a bunch of refinement and testing. 😉

[jffng]

Awesome! Very cool to see how Seedlet can be quickly adapted for this kind of use case.

Is it possible to test the headstart annotations if the theme isn't activated for testing yet on wpcom?

[kjellr]

Is it possible to test the headstart annotations if the theme isn't activated for testing yet on wpcom?

Hmm — I'm not actually sure. 😄 @jeffikus or @allancole do you know?

[ianstewart]

Is it possible to test the headstart annotations if the theme isn't activated for testing yet on wpcom?

I think if it's in /pub on wpcom we can run headstart commands on it from the command-line. It shouldn't need to be network-activated.

[kjellr]

Ah ok, thanks. I can deploy this if we want, but I'm a little hesitant to deploy it until we know we want it? I'm not sure. 😄

Anyway, I'm going to share some additional notes + comps for this theme later this week, so we can decide then.

[jeffikus]

Yes, you can test them. We did it with the Varia based themes. @ianstewart is correct, as long as you can see it in terminal in the pub or premium folders it will work.

[kjellr]

Just noting a few things I know are missing here:

• Editor styles for the custom link block style
• Custom color support (It’ll need new annotations 🙃)
• IE11 styles (it looks like these aren't generated automatically).

[ianstewart]

I'm a little hesitant to deploy it until we know we want it?

How much of the theme could be turned into a Pattern?

[kjellr]

How much of the theme could be turned into a Pattern?

Currently, the main thing here that makes this theme unique is the block style for the social links block:

Without that being defined (whether in a theme or in a plugin that's loaded), the pattern would be pretty boring:

The big/full-width buttons are what makes this seem like a linktr.ee sort of thing.

[ianstewart]

Without that being defined (whether in a theme or in a plugin that's loaded), the pattern would be pretty boring …

Ah, yeah. Is that something that could be shipped up as an enhancement to the block itself? It reminds of me of navigation block issues.

It also makes me wonder if we could just reproduce this without the social links block too, as a pattern?

I think we could potentially do that on Dotcom because we have an icon block available there?

cc @iamtakashi for the pattern idea.

[iamtakashi]

I wonder if adding a full-width button style to the Button block would make sense. With full-width buttons, the pattern could just be a bunch of buttons to start with. (A crude example. Narrower default width like Seedlet would work better)

It might not be too much of a hard-sell... A full-width button isn't uncommon, especially in a confined space, and it's probably useful not just for this.

[kjellr]

I pushed some updates that change up the color scheme (still a work in progress) and base the patterns off the button block primarily.

I'll tackle more cleanup next week, but for now here are the four patterns it includes:

Default	Music	Podcast	News

That last one is clearly pretty broken, so I'll be giving it a little extra attention. I need to make the corner radius of the buttons in the first one match up with the other two too.

I'm also going to take a look at introducing a more interesting default background. Ideally, these backgrounds would be done completely in Gutenberg (and with block-based themes they will!), however for now folks will need to adjust the background in the Customizer. 😕

[kjellr]

Ok, @jeffikus: I think this is ready for someone else to commandeer for a little bit. I put all of the base scaffolding in place. The theme now includes all four of those patterns above, and basic (a little buggy) custom background support:

It uses the default "links" pattern by default, and supports three other ones:

Default	Music	Podcast	News

Each of these are just standard block patterns. I included a few block styles as well to help:

Buttons Block	Social Links Block

Here is an incomplete list of things that definitely do not work yet:

• The theme pulls the same stylesheet in for the frontend and the editor. This is fine except the background blur causes issues in the editor. We may need to have two separate stylesheets for that.
• The custom background does not get pulled into the editor.
• There are no IE styles generated.
• Color annotations need to be generated for this theme.
• And in general, it would be great to use Gutenberg entirely for the image, background, and title. But that may need to wait for FSE.

[kjellr]

I've updated to match the latest comps. Changes include:

• The background + colors are brighter and less dreary.
• The Music pattern (the theme default) now uses a real, live YouTube video.
• I re-built the Music pattern so that it appears in two columns on larger screens.
• The border radius for button patterns has been modified so that they work more nicely for multi-line buttons.
• The editor no longer loads CSS styles it doesn't use (the page header, footer, etc.)

Screenshots:

Mobile	Desktop

[iamtakashi]

I'm noting that we've requested an option for full-width button and/or control the width of buttons in Gutenberg. WordPress/gutenberg#24705

[scruffian]

@kjellr given the state of block based themes at this time, what do you think about making this a purely block based theme?

[kjellr]

given the state of block based themes at this time, what do you think about making this a purely block based theme?

It would be incredibly easy to do that. 😄 Way easier than all the stuff in this PR, frankly.

The main issue is that this wouldn't be available for users to try right away on WP.com. We'd need to hold off until block-based themes are available there. If that's ok with folks then I think it would make sense to make this fully block-based.

[kjellr]

Closing due to inactivity. 🕐