search

bobbingwide / thisis

ThisIs ... experimental Full Site Editing theme
GNU General Public License v3.0
1 stars 0 forks source link

Create a short video entitled "This is... Full Site Editing" to attempt to answer "What is Full Site Editing?" #1

Closed bobbingwide closed 3 years ago

bobbingwide commented 3 years ago

Imagine being able to create your ideal website from top to bottom using just one tool.

For WordPress development, the flavour of the year is Full Site Editing (FSE). This is the next stage in the development of the Gutenberg block editor. A lot of people ask "What is Full Site Editing?"

There are many different answers.

I intend to create a short video entitled "This is... Full Site Editing" in which I demonstrate the creation of a website using a Full Site Editing theme and the Site Editor.

This video will be an accompaniment/introduction to a talk I'm preparing entitled "A guide to the (Full) Site Editor, blocks, and themes".

The talk will have its first airing at the WordPress Portsmouth Online Meetup on 19th May 2021. It will either be a PowerPoint presentation or a site developed using the Site Editor (beta) with this FSE theme as the basis and the video.

Requirements

A video showing the development of a site using the Site Editor, demonstrating the components that will most likely be part of WordPress 5.8 and/or WordPress 5.9, using the bleeding edge version of Gutenberg and possibly some of my own plugins / theme logic.

Planned video duration: 2 minutes 31 seconds. Soundtrack: Bobbing Wide

Featuring: Fuzzy Duck, Ducky Fuzz and the other one. Use a simple image for the Site Logo - either bobbingwide or oik the blocks photo

Proposed solution

In a local development environment: primary s.b/wp55/thisis, secondary s.b/bwcom/thisis

Then create a front page template that can be used to:

As the site's being developed create content for each of the topics that could be relevant. Expect to create lots of links to other sites, videos, podcasts etc.

Limitations

Possibly attempt to

bobbingwide commented 3 years ago

Before doing any styling I tried to use the minimal theme created in #2. When I started to create the heading, the Site Editor didn't look at all right. I couldn't see the controls in blocks added into columns because they were hidden by the toolbar. And the outlining of the columns was a hardly visible white border.

image

bobbingwide commented 3 years ago

When it came to wanting to add the menu to the 3rd column I tried /menu, expecting it to be an alias for Navigation. I then created the Home page link in the menu. It created a draft page. How could I edit it? I decided to rename the Sample page to Home. On visiting the site the Home link didn't work. I had to revisit the Navigation block and edit the link to replace it with the correct link.

bobbingwide commented 3 years ago

It was a bit tricky creating the footer with a black background. image

bobbingwide commented 3 years ago

Use a simple image for the Site Logo - either bobbingwide or oik the blocks photo

Maybe create an SVG saying "this is...". Does Gutenberg support SVG's? Could we use Duotone over the top to create a different version in the footer?

bobbingwide commented 3 years ago

record snippets as often as possible.

I think it'll probably be easier to take a whole load of full screen captures of the site editor and the front end as the site is being developed. 2 minutes 31 is 151 seconds.

If the images change each second then that's 151 pages / slides. Time per image Pages
1 151
2 75
3 50
4 38
5 30

How many do we need?

bobbingwide commented 3 years ago

In order to allow this minimal theme to be used by others I need to be able to find a way of storing the intermediate and final templates and template parts and the screenshots for them somewhere safe while I go back and forth creating how ever many screenshots are necessary for the final video. I think I'll use .htm as the extension and store them in the block-templates and block-template part folders. It shouldn't be beyond the wit of man to make these available as "patterns", which I can load in, customise and then save as templates or template parts.

I could write a separate plugin to locate the patterns from the active / installed theme. See oik-patterns?

bobbingwide commented 3 years ago

I think I'll use .htm as the extension and store them in the block-templates and block-template part folders. It shouldn't be beyond the wit of man to make these available as "patterns", which I can load in, customise and then save as templates or template parts.

See #9

record snippets as often as possible.

There are three ways to do this.

  1. Take full size screenshots to include in the final video. Store in screenshots.
  2. Take screen captures of sections of the screen to include in posts and pages. Store in images.
  3. Take Camtasia, Zoom or streamed recordings to demonstrate certain functionality, pointing out feechurs while we're at it.

The videos will be published on my YouTube channel. https://www.youtube.com/c/HerbMiller/videos

bobbingwide commented 3 years ago

I've loaded a silent video - no words - just a backing track - to YouTube. The backing track is "Bobbing Wide", from the album "Blind Dog at St. Dunstans", by Caravan

The screenshots are now numbered 1 to 55. Each screenshot is displayed for 3 seconds. The last one stays for just a little longer.

It's currently unlisted. But here's the link.

https://youtu.be/Z2mAJJYoUDk

Now I have to add some narration.

bobbingwide commented 3 years ago

I added narration for the second version of the video. https://www.youtube.com/watch?v=hV6b92UdMQE It still wasn't anything like what I'd hoped for. I'll probably publish it anyway, but it won't be part of my presentation.

I wrote a new script, recorded it in several short sessions and put it onto the bobbing wide timeline. Then I took new screen captures to match what I'd said.

Spoiler alert.

This is Full Site Editing – a slideshow with Bobbing Wide

  1. Imagine being able to build a complete website
  2. either from scratch
  3. or from a quality approved theme,
  4. using just one tool.
  5. –
  6. Create a professional looking site,
  7. displayed the way you need it.
  8. with your own designs for header, footer, menus and widgets
  9. and dynamic content,
  10. –
  11. No expensive developer,
  12. no upfront costs and
  13. no yearly licence fees.
  14. –
  15. Modify the theme you love
  16. without any programming,
  17. using build components anybody can use.
  18. –
  19. Hand build your site using blocks
  20. or copy and adapt curated design patterns.
  21. There are hundreds to choose from.
  22. –
  23. Create and structure your own templates and template parts
  24. to display your content the way you want it.
  25. So that what you see is what your visitors get
  26. –
  27. Lovingly developed by hundreds,
  28. tested by thousands,
  29. used by millions,
  30. and reaching a global audience of billions…
  31. –
  32. this is not just editing
  33. –
  34. this is Full Site Editing

The new verson of the video is shorter ( 1 min 42 seconds ) and the message is a lot clearer.

https://www.youtube.com/watch?v=xT5GOjSEOPg

The backing track is still Bobbing Wide, from Blind Dog at St Dunstans, by Caravan.

Now, if I could get some other narrators for the sections between the hyphens, then it might be a bit less monotonous. Any volunteers?

bobbingwide commented 3 years ago

page.html and post.html

page.html has a sidebar consisting of the Page list block supplemented by:

post.htm is actually single-post.html

It's not clear why Gutenberg does this.

single post is also supplemented by

bobbingwide commented 3 years ago

404.html

Currently, 404 templates can't be added using the Site Editor. l'll have to create one manually.

bobbingwide commented 3 years ago

Then create a front page template that can be used to:

  1. Demonstrate all the known FSE blocks and variations
  2. Summarise all the known Experimental FSE themes

I didn't create the front page template but I did:

  1. List all the known FSE blocks and variations in https://sneak-peek.me/blocks/
  2. Summarise all the known Experimental FSE themes in https://sneak-peek.me/themes/ and catalogued them in https://blocks.wp-a2z.org/oik-themes/
bobbingwide commented 3 years ago

For other FSE videos, including WordCamp Europe videos, see my YouTube Playlist - FSE - WordPress Full Site Editing. https://www.youtube.com/playlist?list=PLH1DSPIOZenST1Dmsy-Zp3Wh1VJ7PT9Cp