Add starter content

[wordpress]

Add starter content

[melchoyce]

We chatted about this a bit in today's Slack meeting.

I’d love to explore including some female impressionists or abstract artists into whatever start content we end up packaging with the theme. In addition to @paaljoachim's above suggestion, we could explore:

• Lee Krasner
• Ethel Sands
• Mary Cassatt
• Berthe Morisot
• Lilla Cabot Perry

Any work we include will need to be in the public domain, or cc0.

@carolinan has also mentioned using work from community members, if that’s something any of our community artists would be interested in. If any community artists would be willing to make their work cc0 to be included in the theme, please let us know.

[paaljoachim]

Hilma Van Klint is an amazing abstract artist who's work was not to be shown before many years after her death.
https://en.wikipedia.org/wiki/Hilma_af_Klint
https://www.guggenheim.org/exhibition/hilma-af-klint

[ellenbauer]

In regards to community artwork, do you have any specific style in mind? Maybe we can go back to some of the artwork you initially saved in the Pinterest mood boards, @melchoyce and use this as inspiration?

In my opinion maybe something that is pretty minimal would work, so users can imagine their own content and don't feel they have to be artists/designers to use this theme. This is just a thought, what do you all think?

[melchoyce]

The Pinterest board, for reference: https://www.pinterest.com/melchoyce/tt1/digital-native/

Looks like most of the inspiration used photography, but there's two or three examples of illustrative work in there.

[carolinan]

Something like this?
It is still too much content. I don't want to tell you how many spacer blocks are used ;)

[pattonwebz]

Some nice starter content could be added but for sake of theme package size and simplicity very simple placeholder images is my suggestion. The starter content generally comes from the initial design files - I have not yet seen those files but I expect there is some sample content there that might be a good starting point for it.

@melchoyce what kind of placeholder contents have you used in the design files?

[melchoyce]

I've added this to the Beta 1 milestone, even thought it doesn't technically need to be finalized until Beta 4. This will make sure we have a draft by Beta 1 that we can spend some time refining.

[pattonwebz]

I like aiming to have an initial itteration of this in by beta 1. The earlier the better for the translators :)

[kjellr]

To keep things simple (and avoid new users having to delete a lot of opinionated starter content), I'd suggest that maybe the theme's starter content be limited to just the homepage design. This is pretty simple, but would allow them to start off with something really similar to what they saw on the theme screenshot.

[carolinan]

It needs to be compatible with GPL. Here is a list of possible licenses:
https://www.gnu.org/licenses/license-list.html

[kjellr]

Just noting that I've broken the images discussion out into its own ticket here: #243

Since the images effect more than just the starter content.

[carolinan]

For the title, lets move "Portfolio" out of it and just have "A new default theme for WordPress"

[melchoyce]

I spent some time today riffing off of @carolinan's idea, which you can see live at https://2021.wordpress.net/starter-content/.

I focused largely on brief instruction & education.

FWIW, I don't think we should include widgets within the starter content, just page content.

Here's the code output:

<!-- wp:heading {"align":"wide","fontSize":"gigantic","style":{"typography":{"lineHeight":"1.1"}}} -->
<h2 class="alignwide has-text-align-wide has-gigantic-font-size" style="line-height:1.1">Create your website with blocks</h2>
<!-- /wp:heading -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"verticalAlignment":"center","align":"wide","className":"is-style-twentytwentyone-columns-overlap"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center is-style-twentytwentyone-columns-overlap"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"align":"full","id":36,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><a href="https://2021.wordpress.net/roses-tremieres/"><img src="https://2021.wordpress.net/wp-content/uploads/2020/10/roses-tremieres-hollyhocks-1884-846x1024.jpg" alt="" class="wp-image-36"/></a></figure>
<!-- /wp:image -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:image {"align":"full","id":14,"sizeSlug":"large","linkDestination":"none","className":"is-style-twentytwentyone-image-frame"} -->
<figure class="wp-block-image alignfull size-large is-style-twentytwentyone-image-frame"><a href="https://2021.wordpress.net/in-the-bois-de-boulogne-2/"><img src="https://2021.wordpress.net/wp-content/uploads/2020/10/in-the-bois-de-boulogne-1024x842.jpg" alt="" class="wp-image-14"/></a></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:image {"id":75,"sizeSlug":"large","linkDestination":"none","className":"alignfull size-full is-style-twentytwentyone-border"} -->
<figure class="wp-block-image size-large alignfull size-full is-style-twentytwentyone-border"><a href="https://2021.wordpress.net/young-woman-in-mauve/"><img src="https://2021.wordpress.net/wp-content/uploads/2020/10/young-woman-in-mauve-828x1024.jpg" alt="" class="wp-image-75"/></a></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":50} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"verticalAlignment":"top","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top"} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:heading {"level":3} -->
<h3>Add block patterns</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To add a block pattern, select the Add Block button in the toolbar at the top of the editor. This button is a plus sign within a square. Underneath the search bar, you'll see some tabs, such as Blocks and Patterns. Select Patterns. Browse through the patterns and select one to add it to your content.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top"} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:heading {"level":3} -->
<h3>Frame your images</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Twenty Twenty-One comes with several block styles, including borders and frames for blocks like Image. Try it out by adding a new image block to your editor, and in the Editor sidebar, open the "Styles" panel and select the "Frame" block style. Your images will look like works of art!</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top"} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:heading {"level":3} -->
<h3>Overlap columns</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Another block style included with Twenty Twenty-One is an overlap for column blocks. This allows you to create stacked layouts like the gallery on this page. Add a columns block to your editor, and in the Editor sidebar, and in the "Styles" panel, select the "Overlap" block style.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:cover {"overlayColor":"green","contentPosition":"center center","align":"wide","className":"is-style-twentytwentyone-border"} -->
<div class="wp-block-cover alignwide has-green-background-color has-background-dim is-style-twentytwentyone-border"><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"fontSize":"huge"} -->
<p class="has-huge-font-size">Need help?</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":75} -->
<div style="height:75px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><a href="https://wordpress.org/support/article/twenty-twenty-one/">Read the Theme Documentation</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><a href="https://wordpress.org/support/theme/twentytwentyone/">Check out the Support Forums</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:cover -->