single-post.html

Call #6 – Template editing and navigation block

These are the comments I wrote in response to Call #6: Stick the landing (pages).

5 comments

  1. After completing the 36 steps, I tried the Advanced Steps with the code for the PR. Unfortunately, the PR is built on 10.5.3, but TT1 blocks has already been changed to work with 10.6. Global styles isn’t loaded and this broke one of my cover blocks, the site logo and the footer menu. There still wasn’t enough visual indication of what was post content vs template content.
  2. I was able to partly reproduce the strangeness reported by @steve-pheriche dragging text selected from the block inserter into the content.

Until that moment I hadn’t realised I could drag and drop content like that… not just from the inserter, but from anywhere – dashboard menu items, the buttons at the bottom of this comment form, and the site logo from the live site.
2a. But I couldn’t drag the logo directly into the site logo.

  1. I think I’ve made this comment before. When I first created a new custom template I was surprised by its content. I’d become used to the Site editor copying the index template. While performing this test I thought, “Why can’t I pick the template upon which my new template should be modelled?” It makes sense to be able to use a template as a template. This would be a nice feature.
  2. It’s really really difficult to stop yourself dragging new blocks for the template into the Post Content block.
  3. Editing a page which has no content, but relies on the template, does feel weird.

Hey, that’s nice, I copied and pasted my comments into this post. Where I’d written 5 items on the wordpress.org comment form it appeared as two lists both starting from 1. Here the second ordered list above respected the start value of 3.

I also recorded some of my session. In total I recorded 18 minutes. I think I was dithering for half that time. Maybe I’ll try again.

WordCamp Outreach template

This is the final result, after playing with dragging and dropping content selected from anywhere on my screen.

Screen capture after Comment 2.
<!-- wp:cover {"url":"https://s.b/wp55/tt1/wp-content/uploads/sites/6/2021/05/FSE-is-FREE-scaled.jpg","id":459,"overlayColor":"purple","align":"full","style":{"color":{"duotone":["#E4D1D1","#28303D"]}}} -->
<div class="wp-block-cover alignfull has-purple-background-color has-background-dim"><img class="wp-block-cover__image-background wp-image-459" alt="" src="https://s.b/wp55/tt1/wp-content/uploads/sites/6/2021/05/FSE-is-FREE-scaled.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:post-title {"textAlign":"center"} /--></div></div>
<!-- /wp:cover -->

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

<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>My event is going to be Something better</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">Apply to speak</a></div>
<!-- /wp:button -->

<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">Apply to sponsor</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph -->
<p>lock to install and ad</p>
<!-- /wp:paragraph -->

<!-- wp:post-content /-->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:cover {"overlayColor":"red","align":"full"} -->
<div class="wp-block-cover alignfull has-red-background-color has-background-dim"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Money off...</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"contentJustification":"center"} -->
<div class="wp-block-buttons is-content-justification-center"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">Buy tickets</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:template-part {"slug":"template-part-2","theme":"tt1-blocks","align":"full","layout":{"inherit":true}} /-->

<!-- wp:paragraph -->
<p><a href="https://s.b/wp55/tt1/wp-admin/index.php"><br>Dashboard</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://make.wordpress.org/test/2021/05/12/fse-program-testing-call-6-stick-the-landing-pages/#">Reply</a></p>
<!-- /wp:paragraph -->

Foooter template part ( template-part-2 )

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:site-logo {"width":266} /-->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://sneak-peek.me/wp-content/uploads/sites/3/2021/05/thisislogoandtext.png" alt="ThisIs… Full Site Editing"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:navigation {"orientation":"horizontal","textColor":"white","backgroundColor":"gray","fontSize":"small"} -->
<!-- wp:navigation-link {"label":"About","type":"page","id":438,"url":"https://s.b/wp55/tt1/about/","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"Contact","type":"page","id":440,"url":"https://s.b/wp55/tt1/contact/","kind":"post-type"} /-->

<!-- wp:navigation-link {"label":"Code of Conduct","type":"page","id":442,"url":"https://s.b/wp55/tt1/code-of-conduct/","kind":"post-type"} /-->
<!-- /wp:navigation -->

<!-- wp:paragraph -->
<p>A&nbsp;<s>beginner’s guide</s><em>an introduction</em>, with Herb Miller</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Call #6 – take 4

In this video recording, take 4, I altered the script a bit. I wanted to see what it would be like if I put the content in the template into the post, making the template simpler, and making it easier to see the content in the editor.

I discovered some new feechurs.

  1. If you delete a custom template the assigned template doesn’t revert to Default ( 0:23 )
  2. I couldn’t find the template part I’d named “Foooter” ( 3 o’s ) using search. ( 2:00 )
  3. When you add a new button, focus doesn’t go into the button ( 4:45 )
  4. Because I’d was editing the content, rather than a template, I couldn’t easily select full width for the columns blocks ( 7:29 ).

I need to check these observations.

WordPress version: 5.7.2

Gutenberg version: 10.8.0

© Copyright Herb Miller, Bobbing Wide 2021