annezazu 7:53 pm on August 9, 2023
Tags: fse-testing-call ( 28 )

FSE Program Testing Call #25: Let’s start from the beginning

This post is the twenty-fifth call for testing as part of the Full Site Editing Outreach Program. For more information about this experimental program, please review this FAQ for helpful details. To properly join the fun, please head to #fse-outreach-experiment in Make Slack for future testing announcements, helpful posts, and more will be shared there.

Overview

WordPress 6.3 just launched this week, bringing with it the ability to build out all parts of your site without leaving the Site Editor. While we’ve tested everything leading up to the release, it’s time now to see how all of the pieces are landing with a fresh take, especially with all of the fixes found during the betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. and RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. periods, and to look ahead to where 6.4 aims to iterate.

To do this, this call for testing will go through a “starting from scratch” experience, from changing styles, using and creating patterns, creating a few pages, and setting up a menu. As part of this, you’ll explore new tools, like the Command Palette, and well loved tools, like List View. This test is intentionally more open ended to encourage exploration and to gather user experience feedback. It’s ultimately not about testing individual, new features and is more centered on testing how the features continue to come together.

Since the 6.4 cycle is a bit shorter than others, this call for testing will only be open for two weeks rather than three so additional testing can occur as more features and refinements are released.

Testing Instructions

To use a prebuilt test site:

Open this link only once: https://app.instawp.io/launch?t=fse-testing-call-25&d=v2
Please do not repeatedly open this link as it creates a new site each time and there’s a limit of 50 sites that can be created.
This will launch a site for you to use for up to 24 hours. Select “Magic Login” to log in to the wp-admin dashboard.
Save the link to your site so you can access it again during the test.

To set up your own test site:

Have a test site using the latest version of WordPress. It’s important this is not a production/live site.
Install and activate the Twenty Twenty Three by going to Appearances > Themes.
Install and activate Gutenberg 16.4 or the latest version of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ after 16.4.

If you have any issues with manual setup, just comment on the post or pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” me (@annezazu) in WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

What follows are open ended tasks to complete, intentionally listed without detailed instructions in order to better stress test what’s been shipped in 6.3 and discover where the experience can be clarified:

Pick and save a new style variation.
Add a border to all Image blocks on your site and change the size of all H2 headings using Styles.
Create an “About” page and turn on the Top Toolbar setting. Copy and paste content from this Google Doc, noting any issues in pasting with the format or content.
Create a “Resume” page with a few different headings and use the Table of Contents blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. to better organize the page.
Change the size and alignment of the Page title in your Pages template.
At various points, use the Command Palette to either navigate between parts of your site or open various tools, like List View, or settings, like Top Toolbar.
Create a menu that just lists your About page, a link to your WordPress.org profile with the Social Icons block, and a Search block.
Create a synced pattern that details how to get in touch with you and add it to your “About” and “Resume” pages where you see fit.
Duplicate the synced pattern from the Patterns section and make an unsynced version.

If you’d like to go further and have time to do so, please explore the following: creating pages and editing the template surrounding the page & building and inserting more patterns, synced and unsynced.

If you get stuck at any point, please note it in the comments with details around where you tried to attempt to complete the task.

What to notice:

Did the experience crash at any point?
Did the saving experience work properly?
What did you find particularly confusing or frustrating about the experience?
What did you especially enjoy or appreciate about the experience?
What would have made this experience easier for site building and for writing new content?
Did you find that what you created matched what you saw on your site?
Did it work using Keyboard only?
Did it work using a screen reader?
Did it work while using just a mobile device? Shout out to @nomadskateboarding for this addition!

Leave Feedback by August 23, 2023

#fse-testing-call

Saifullah Nakih 3:54 pm on August 10, 2023

Everything went great for my editing experience; there were no crashes or anything like that. Everything is going great till now. GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ version Gutenberg 16.4 is much faster than the previous One.
- annezazu 8:11 pm on August 15, 2023
  
  Hey there. Thanks so much @mdsaifullahnakih for contributing! Do you mind providing more insight into what went well or any feedback specifically about the experience? It all helps.
md_quer 12:22 pm on August 13, 2023

The only thing to mention is for me is the command palette:

The command palette ist not satisfying for me. It works , but for me the problem are the keywords. I could not find > top toolbar or list view.
As a normal user i would expect a keyword like – list view – should open the list view, or keyword – top toolbar – , should open top toolbar, that does not work for me.

It is try and error, like, i try it with – T – or – S – or something like that and i am looking what it shows me 🙂

I took the demo with the link here on this site above.

I like the new patterns section with synced and unsynced patterns 👍

PS: Select “Magic Login” to log in to the wp-admin dashboard.
how does this work, i could not login again to :
admin : user name or e-mail ( with my wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ profile )
password : Magic Login
sorry for this question ..
- Saifullah Nakih 2:57 pm on August 13, 2023
  
  That link only works for 24 hours as they mentioned in their guidelines
- annezazu 8:16 pm on August 15, 2023
  
  The command palette ist not satisfying for me. It works , but for me the problem are the keywords. I could not find > top toolbar or list view.
  As a normal user i would expect a keyword like – list view – should open the list view, or keyword – top toolbar – , should open top toolbar, that does not work for me.
  
  It is try and error, like, i try it with – T – or – S – or something like that and i am looking what it shows me 🙂
  
  Thanks so much for this detailed feedback! I’ve added it to an open issue on this exact topic around keyword support for the command palette. Since this is your first contribution, expect a Test Contributor badge on your profile when this call for testing completes.
  
  PS: Select “Magic Login” to log in to the wp-admin dashboard.
  how does this work, i could not login again to :
  
  As noted, this is only available for 24 hours!
jordesign 4:41 am on August 14, 2023
Pick and save a new style variation.
- When entering style decisions from the Site Browser and then closing the revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. – I end up editing the index template (instead of back at the site browser).
  https://github.com/WordPress/gutenberg/issues/53616
Add a border to all Image blocks on your site and change the size of all H2 headings using Styles.
- Using the Style Book – I was hoping to be able to make changes to the H2 specifically while viewing a preview. It wasn’t made clear anywhere what the hierarchy of editing headings was to edit the ‘Heading’ element for styles that go across all headings, but could then make individual changes to different headings under Typography > Headings.
Top Toolbar
- I found some display issues with the toolbar and publishing tools on some screen sizes. Reported in this existing issue.
  https://github.com/WordPress/gutenberg/issues/52688
At various points, use the Command Palette to either navigate between parts of your site or open various tools, like List View, or settings, like Top Toolbar.
- I found the autosuggest/listings to be varied in their accuracy. Some of them didn’t make much sense in their order compared to the actual search query.
  https://snipboard.io/jnSqNX.jpg
- annezazu 8:30 pm on August 15, 2023
  
  @jordesign thanks for diving in and for contributing to your fourth call for testing. I deeply appreciate the extra effort to open up issues and link to current related ones. To follow up on the remaining items, I want to note the following:
  
  Using the Style Book – I was hoping to be able to make changes to the H2 specifically while viewing a preview. It wasn’t made clear anywhere what the hierarchy of editing headings was to edit the ‘Heading’ element for styles that go across all headings, but could then make individual changes to different headings under Typography > Headings.
  
  I added your feedback to an issue around offering a more isolated individual editing experience for different style items. This might need a new issue but, for now, I think the mechanism would be the same.
  
  I found the autosuggest/listings to be varied in their accuracy. Some of them didn’t make much sense in their order compared to the actual search query.
  https://snipboard.io/jnSqNX.jpg
  
  I added your feedback to an issue around adding keyword support to the command palette.
Paal Joachim Romdahl 8:02 pm on August 15, 2023

Using WP 6.3. GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party 16.4. Theme Twenty Twenty Three.
I am writing it out with as much clarity as I can. Some might not be understood and that is alright.

Pick and save a new style variation.

I went to the Editor. Noticed the Styles area and selected it.
I miss having the opportunity to customize the styles seen. As one clicks a style and everything the style contains is added. I wondered right away how to undo and noticed the undo (revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.) button just below. That brought me to Global styles revisions. I noticed the right side Revisions and could then select the last saved version just before selecting the style. I miss having a simple undo button similar to the Post Editor top left/right undo buttons (as it just requires one click when undoing). As clicking the undo button is a quick way to just undo a change without having to go into the more complex Revisions panel.

I selected a style and saved it.

Add a border to all Image blocks on your site and change the size of all H2 headings using Styles.

In Styles I clicked the pencil icon to edit styles.
Noticed in the Styles sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. panel Blocks > Selected Image.
I added a red border, 4 px and adjusted the Radius to become 18. I saw the changes above to the default image. Ourside the rounded corners is seen a black background.
I wondered where the Save button was. Left the Image blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. area. Noticed the Save button on the top and clicked it. Custom Styles showed up. I saved the Custom Styles.

Selected Heading. Noticed it was the wrong area. Excited blocks and went to Typography. Clicked Headings. Selected H2. Expected to see the standard S – M – L – XL – XXL. Custom was automatically on.
I clicked to exit custom and noticed the standard size bar (S-M-L etc). I do not know which of the sizes were default. I changed it to M. Saved and exited Styles.

Create an “About” page and turn on the Top Toolbar setting. Copy and paste content from this Google Doc, noting any issues in pasting with the format or content.

Clicked to create an About page and noticed the canvas background was black. Which is likely from the style I had selected. Turned on the Top Toolbar. Went to the Google doc. Held down cmd+A to select all the text and copied it into the About page. It looks like all the text was pasted in correctly.
Btw I noticed that cmd+A also works well in Gutenberg.

NB! The top Toolbar actually covers the S in blue Save draft text link. When a block is selected.

Create a “Resume” page with a few different headings and use the Table of Contents block to better organize the page.

Made a new Resume page. Made a few different Heading blocks. Added the Table of Contents block. Noticed the nice organization. Saved the page as a draft. Viewed the preview. But it looks like the block does not work on previews only after the page has been published. As the preview does not have the correct structure. https://bluewinddesign.com/?page_id=385 (previewed page). Clicking one of the headings in the Table of Contents block the link anchor looks like this: https://bluewinddesign.com/resume/#head-3 . It went to a 404 page.

I went back and published the Resume page and then Viewed the page. The anchor links now work.

Change the size and alignment of the Page title in your Pages template.

Editor. Went to Templates (I initially wanted to click the Pages link seen in the Design section/top level.)
Templates. Clicked the Page template. Noticed a “”This is the Post Content block…..” information in the canvas area. Moved the cursor over the Post Content block text and noticed it grew a little and became blurry (CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. effect it seems). That was weird. The Page template that I have does not have a Page title so I clicked the in page blue + inserter button. Wrote page title. Block did not show up. I wrote title. Only patterns were seen. So I clicked the Browse all button. There I right away saw the Title block show up. I clicked to add it to the Page template. Changed alignment and noticed on the right that Styles was open. I found the Title block in Styles and changed the Size from the default value which I do not know what is to now Large.
I noticed the change in the Page template.

At various points, use the Command Palette to either navigate between parts of your site or open various tools, like List View, or settings, like Top Toolbar.

Clicking into the area where it said Page (As I was in the Page template). Where it says Type a command or search. I typed list. Toggle block inspector came up. I have no idea what that is. I typed post and lots of different options was seen. I typed 404 and the Page: 404 showed up. I typed help and no results were found. Typing help it could perhaps be helpful to have a doc page show up that one can click and have it open in a new tab. I typed options and nothing showed up. Upon having typed only optio then the Open editor preferences showed up.

Create a menu that just lists your About page, a link to your WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ profile with the Social Icons block, and a Search block.

I added a new menu below the HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.. Removed the search and a few pages that showed up. Empty nav. I clicked the + and began to write About. It could not be found. I had to click Page link and then the word about. In the Nav I clicked the + and selected Social Icons. The + inside the Social icon was hidden because of the black background that came with the style I had selected, but I noticed an empty area before where it said “Click plus to add” So I clicked the black invisible + sign. Selected WordPress. Went to wp.org and found my profile. https://profiles.wordpress.org/paaljoachim/ Added it into the Social block W icon.
Clicked outside the social icons block and clicked the outlined grey inserter button and added a Search block. NB. The Search block did not work correctly. Clicking to change the button position had no effect. It was a bit weird. It might have to do with the site…

Hmm I happen to add an existing Nav block and clear that out without thinking that I had to create a new nav. So I went to the Header nav and selected another nav to be used there. Then used the newly created Nav just below the Header.

Create a synced pattern that details how to get in touch with you and add it to your “About” and “Resume” pages where you see fit.

I exited the Page template and went back to the root Design section. Selected Pages. Found the Resume page. Clicked into it. Began writing and then added an image. The image was too large so I wanted to go into Resolution and change it from Large to a lower value. Instead I went into Aspect Ratio. Hmm that did not make it smaller. I typed into the Width box where it said Auto and wrote 100. The image is now smaller. I am wondering where the size drop down is? To select full, large, medium, small, thumbnail. Instead these options are inside the Resolution dropdown and that can be very confusing.

Creating a synced pattern: I selected the text and image. Clicked the 3 dot drop down menu and selected
Create pattern/reusable block. Called it “In touch” left Syncing on and clicked Create. Should Create instead be Save? Created and now the alignment controls are gone. There are lots of discussion in an issue for that.
Save the Resume page.

Clicked into the Command area cmd-K. Wrote “About” but it could not locate the page. I wrote page and selected to “”Open pages” In the left sidebar Pages I could locate the About page. Clicked into it to add the Synced pattern. I did not know what to write (pretending that I had forgot what I had named it) I wrote reusable and the Synced pattern showed up and I selected it. Saved the page.

Duplicate the synced pattern from the Patterns section and make an unsynced version.

Exited the About page and went back to the Design section and clicked Patterns. Noticed a nice and clear area showing “my patterns”. Clicked the 3 dots and duplicated the synced version. There are now two synced patterns one with a (Copy) in its name. I wondered what to do now.
I clicked the copy. It opened in the canvas. I saw not method to adjust the syncing there. I clicked the W.
Aha! The left black sidebar showed up. Which showed the title, info about the pattern, details etc.
I clicked the pencil. That opened the canvas again. Hmm I tried clicking where it said Fully synced. That did not work. Hmm I do not know how to make it unsynced. There is no option in the Pattern right settings when seeing the full pattern. It just shows the title.

—- There is no option under My patterns 3 dot dropdown next to a pattern to sync or unsync. (The drop down says Rename, Duplicate and Delete)
—- There is no option to sync/unsync I could see when selecting the pattern.
—- Not possible to click the Fully synced pattern details to change the option.

The last task I failed at. I have not yet looked it up how this is done.
- annezazu 3:24 pm on August 24, 2023
  
  Thanks so much for writing out your various steps and how each went. It’s helpful to get a sense of the mindset.
  
  As clicking the undo button is a quick way to just undo a change without having to go into the more complex RevisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. panel.
  
  Of note, you can still use undo/redo 🙂
  
  NB! The top Toolbar actually covers the S in blue Save draft text link. When a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. is selected.
  
  Excellent call out. This is related to a PR that was recently merged: https://github.com/WordPress/gutenberg/pull/53526 This was included in 16.5 which I just updated the test sites to but you would have used the 16.4 version.
  
  But it looks like the block does not work on previews only after the page has been published. As the preview does not have the correct structure. https://bluewinddesign.com/?page_id=385 (previewed page). Clicking one of the headings in the Table of Contents block the link anchor looks like this: https://bluewinddesign.com/resume/#head-3 . It went to a 404 page.
  
  Ah ha, this replicated a known issue and I’ve added your feedback there: https://github.com/WordPress/gutenberg/issues/43595#issuecomment-1691857575
  
  Clicked outside the social icons block and clicked the outlined grey inserter button and added a Search block. NB. The Search block did not work correctly. Clicking to change the button position had no effect. It was a bit weird. It might have to do with the site…
  
  I imagine this is related to the following issue: https://github.com/WordPress/gutenberg/issues/53038
  
  I typed into the Width box where it said Auto and wrote 100. The image is now smaller. I am wondering where the size drop down is? To select full, large, medium, small, thumbnail. Instead these options are inside the Resolution dropdown and that can be very confusing.
  
  I’ll include this as part of usability feedback and note this related discussion: https://github.com/WordPress/gutenberg/issues/48618
  
  I typed help and no results were found. Typing help it could perhaps be helpful to have a doc page show up that one can click and have it open in a new tab. I typed options and nothing showed up. Upon having typed only optio then the Open editor preferences showed up.
  
  Noted on this relevant issue: https://github.com/WordPress/gutenberg/issues/52380#issuecomment-1691870185
  
  Create pattern/reusable block. Called it “In touch” left Syncing on and clicked Create. Should Create instead be Save? Created and now the alignment controls are gone. There are lots of discussion in an issue for that.
  
  For good measure 🙂 https://github.com/WordPress/gutenberg/issues/8288
  
  Clicked into the Command area cmd-K. Wrote “About” but it could not locate the page. I wrote page and selected to “”Open pages” In the left sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. Pages I could locate the About page.
  
  I couldn’t replicate this. I’m not quite sure what’s going on there!
  
  —- There is no option under My patterns 3 dot dropdown next to a pattern to sync or unsync. (The drop down says Rename, Duplicate and Delete)
  —- There is no option to sync/unsync I could see when selecting the pattern.
  —- Not possible to click the Fully synced pattern details to change the option.
  
  You cannot change sync status after a pattern has been created. This was done intentionally! The only way is to duplicate the pattern and set a different sync status. This was added to the test to help see how difficult that is (and what we might be able to do). I’ll note it for usability feedback.
md_quer 5:21 am on August 16, 2023

I did it like so :

Go to patterns, open the synced pattern you created,
got to the three dots, and go to duplicate.

Click the duplicate,
then scroll down to ” Vorlage erstellen ” – english – ” create pattern ” ( i think ), — the blue text – image – https://ibb.co/z2DXY9D

then turn off the blue button – so it ist unsynced – click -create.
see image – https://ibb.co/7yfWDPq

Then go to the patterns section, and there you have now the synced and unsynced pattern.
see – image – https://ibb.co/G9h7Fmm

no you can insert the unsynced duplicated pattern in about and resume page, and change some text, to see, if it works.
image
https://ibb.co/N2pJ51X
- annezazu 3:25 pm on August 24, 2023
  
  Yes! That’s the way one has to do that right now by duplicating and changing the sync status manually. Thanks for following up to share. This was intended to get feedback on how cumbersome this current experience might be.
- Paal Joachim Romdahl 12:52 am on August 28, 2023
  
  Hi @md_quer
  
  This is a very late response.
  Thank you very much for sharing the information.
  I went through the steps you mentioned. Hmm. This is very cumbersome. I would like to duplicate a pattern or select an original pattern. Then click it to go to the edit pattern screen. I would like to click the left side Details: Syncing – Fully synced and change this if I choose to do so. Changing from Fully synced to a standard pattern should show a warning if not duplicated and perhaps also ask if the current synced pattern should be duplicated.
  - md_quer 3:57 pm on August 28, 2023
    
    Yes i also think it ist complicated, how it works at the moment 😅🤷‍♀️.
    It ist like getting driving licence .. 😂
md_quer 5:25 am on August 16, 2023

i hope this could help
And sorry, i had now my own test environment and as a habit i took the german version. 😅
- annezazu 10:44 pm on August 29, 2023
  
  Just a note that I really appreciate you chiming in on other people’s responses <3 Thank you!
Koji Kuno 1:35 am on August 17, 2023

This is from a user who has some prior experience with the site editor.

Pick and save a new style variation. and Add a border to all Image blocks on your site and change the size of all H2 headings using Styles.

I already know about style variations and the styke book, and how to get to the Additional CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. panel. So I could complete the operation without hesitation.

However, I was not sure if a user unfamiliar with the site editor would be able to click on the label name ‘Styles’ and see ‘Style Variation’ and realise that ‘Style book’ and ‘Styles’ existed beyond that.

The current labelling and navigation is fine if it has already been considered. However, if ‘Style Variation’ were to appear after selecting ‘Styles’, and users did not notice the ‘Style book’ or ‘Styled’ icons, they would be disappointed and think, “I can’t change the style I switched to…”. I felt it would be a pity.

Create a “Resume” page with a few different headings and use the Table of Contents blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. to better organize the page.

I created a new page in Site Editor > Pages and titled it ‘Resume’.

I added content such as headings and text and tried to insert a table of contents block.

I wanted to insert the table of contents block between the title and the first block, so I moved the cursor to the page title with the mouse and pressed enter, but could not move it to the content area.

When creating pages in the block editor as before, I was able to bring the cursor to the top of the content using the same operation (strictly speaking, I was able to insert a paragraph block at the beginning), so I felt that a similar UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. would be fine.

Also, when creating and editing pages in the site editor, the only button present is the ‘Visit Site’ button, which means that the user has to move from the top page to the page each time. For pages that are not registered in the navigation, it would be necessary to add the slug to the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org, and it was felt that it would be easier to check the actual display of the page. The ‘View Page’ button exists in the old block editor, so it would be nice to have a similar experience. (My apologies if this has already been raised in an Issue)

Create a menu that just lists your About page, a link to your WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ profile with the Social Icons block, and a Search block.

We have added and edited menu items using the navigation block, but in the page link block and custom link block, when trying to edit the label name, the panel returns to the previous panel (the top panel of the navigation block) after entering one character, or when entering a URL once and trying to delete it all (e.g. h for httpsHTTPS HTTPS is an acronym for Hyper Text Transfer Protocol Secure. HTTPS is the secure version of HTTP, the protocol over which data is sent between your browser and the website that you are connected to. The 'S' at the end of HTTPS stands for 'Secure'. It means all communications between your browser and the website are encrypted. This is especially helpful for protecting sensitive data like banking information.), the first character cannot be deleted. When trying to delete a URL, only the first letter could be deleted (e.g. h for https).

However, we attempted to reproduce the problem but were unable to find a reliable way to reproduce it, so we did not get as far as explicitly reporting it.
- annezazu 3:44 pm on August 24, 2023
  
  Hey there, @olein. Thank you so much for contributing to the FSE Outreach Program! I see it’s your first contribution so expect a Test Contributor badge added to your profile as a thank you for your efforts.
  
  However, I was not sure if a user unfamiliar with the site editor would be able to click on the label name ‘Styles’ and see ‘Style Variation’ and realise that ‘Style book’ and ‘Styles’ existed beyond that.
  
  Great point. Discoverability and presentation of the Style book are part of what’s being explored, design wise, for 6.4: https://github.com/WordPress/gutenberg/issues/53431#top
  
  I wanted to insert the table of contents blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. between the title and the first block, so I moved the cursor to the page title with the mouse and pressed enter, but could not move it to the content area.
  
  Ah ha! This dates back to a prior issue with block locking in general that I’ve commented on to include your feedback: https://github.com/WordPress/gutenberg/issues/42481#issuecomment-1691921578
  
  The ‘View Page’ button exists in the old block editor, so it would be nice to have a similar experience. (My apologies if this has already been raised in an Issue)
  
  Opened an issue for consideration! https://github.com/WordPress/gutenberg/issues/53919
  
  However, we attempted to reproduce the problem but were unable to find a reliable way to reproduce it, so we did not get as far as explicitly reporting it.
  
  Hmm thank you for writing out what you saw go wrong. I wasn’t able to reproduce either using 16.5 but I’ll look out for any related feedback in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ or otherwise indicating a deeper possible problem.
  - Koji Kuno 12:27 am on August 26, 2023
    
    Hi Anne, Thank you for youre reply.
    
    I see it’s your first contribution so expect a Test Contributor badge added to your profile as a thank you for your efforts.
    
    I’m looking foward to it! Thank you.
    
    And thank you for creating several GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issues and adding comments.
    
    I focus mainly on disseminating information and lectures on blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor and site editor within the Japanese language sphere.
    
    I am often made aware of new perspectives from users in these interactions.
    
    I will continue to participate in the testing programme as much as possible and share the information from the viewpoints I have gained.
    - annezazu 9:43 pm on August 26, 2023
      
      That makes me so happy to hear! Thank you for all you’re doing to bring information about the Site Editor to folks in the Japanese WordPress community. It’s a huge help.
Felipe Santos 11:44 pm on August 18, 2023

Hi Anne, here is my experience while testing. Thank you!

Context: I spent about 1-2 years away from primarily working with the Site Editor, so my experience here was partially like a “new user” in some areas. I tried using the prebuilt test site.

Pick and save a new style variation.

This worked well.

~~Something that could be useful here is to show a “demo page” with different kinds of blocks instead of just showing the front page.~~ After checking further, I realized that Style Book does something like that. In my opinion, Style Book should be the default option with a site preview alternative. Or at least highlight Style Book a bit more somehow.

Add a border to all Image blocks on your site and change the size of all H2 headings using Styles.

Adding the border was fine.

I couldn’t find a way to only change h2 without changing the other heading tags. It just seems to allow to generally edit the Headings blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.:

Full Size: https://d.pr/i/5dgfCC

Create an “About” page and turn on the Top Toolbar setting. Copy and paste content from this Google Doc, noting any issues in pasting with the format or content.

This works perfectly. The experience went smoothly here.

Create a “Resume” page with a few different headings and use the Table of Contents block to better organize the page.

Oh, this actually didn’t work: I can add the items to the table of content and publish/view the page, but I’m redirected to https://example.org/auto-draft/#the-heading-title when I click on one of the table links.

It looks like related to this issue: https://github.com/WordPress/gutenberg/issues/43595

Change the size and alignment of the Page title in your Pages template.

This changed really well — exactly how I would expect.

At various points, use the Command Palette to either navigate between parts of your site or open various tools, like List View, or settings, like Top Toolbar.

This also went generally well, but the List View wasn’t showing as an option to open on the Command Palette. Also, maybe something relevant would be the option to search a block name and edit its styles globally (not sure if maybe this was expected to show up as well).

Create a menu that just lists your About page, a link to your WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ profile with the Social Icons block, and a Search block.

The experience here was not super good while trying to add the social icons. I had to rely on the List View to make it all on the same row block (drag and drop was not working) — I feel like this is more difficult than it should be.

Also, I would only expect the search block to align horizontally with the other blocks as I already had the “Align Middle” option:

Full Size: https://d.pr/i/6pZtH3

Create a synced pattern that details how to get in touch with you and add it to your “About” and “Resume” pages where you see fit.

Using the patterns was not a problem, but it was hard to drag and drop while having the Top Toolbar enabled — I had to use the List View again.

Duplicate the synced pattern from the Patterns section and make an unsynced version.

After checking for about 2-3 minutes, I really couldn’t find a way to change from Synced to Unsynced. Both for the original and duplicated.

I expected to have this option here somewhere:

Full Size: https://d.pr/i/g8LgCs
- annezazu 3:52 pm on August 24, 2023
  
  Hi @foosantos! Thanks for your first contribution to the FSE Outreach Program. Expect a Test Contributor badge to be added to your profile as a thank you for helping.
  
  Context: I spent about 1-2 years away from primarily working with the Site Editor, so my experience here was partially like a “new user” in some areas. I tried using the prebuilt test site.
  
  Thanks for sharing this additional context and framing on your feedback.
  
  In my opinion, Style Book should be the default option with a site preview alternative. Or at least highlight Style Book a bit more somehow.
  
  As mentioned above, discoverability and presentation of the Style book are part of what’s being explored, design wise, for 6.4: https://github.com/WordPress/gutenberg/issues/53431#top I agree and will note it in the recap summary.
  
  I couldn’t find a way to only change h2 without changing the other heading tags. It just seems to allow to generally edit the Headings blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.:
  
  Ah ha. It sounds like you edited Heading block under Styles > Blocks. To change h2, you have to head to typography. This is confusing and is part of why I wanted to test this current experience. I’ll note this in the usability recap as it’s something I imagine more users run into.
  
  Oh, this actually didn’t work: I can add the items to the table of content and publish/view the page, but I’m redirected to https://example.org/auto-draft/#the-heading-title when I click on one of the table links.
  
  Nice sleuthing and finding that related issue 🙂
  
  This also went generally well, but the List View wasn’t showing as an option to open on the Command Palette. Also, maybe something relevant would be the option to search a block name and edit its styles globally (not sure if maybe this was expected to show up as well).
  
  Passed on your feedback on this relevant issue: https://github.com/WordPress/gutenberg/issues/50407#issuecomment-1691956025 I agree with having List View but I imagine for Styles, it’ll be more about open to a specific block style rather than being able to edit from within the Command Palette (for now!).
  
  After checking for about 2-3 minutes, I really couldn’t find a way to change from Synced to Unsynced. Both for the original and duplicated.
  
  This was the trickiest part of the call for testing as the only way to do it is to duplicate the pattern and change the sync setting after the fact. It’s stumped a lot of folks but this is good feedback to have.
md_quer 9:36 am on August 19, 2023

Duplicate the synced pattern from the Patterns section and make an unsynced version.

This means : duplicate the synced pattern.

So i think the first thing to do is, open the synced pattern, click three vertical dots > duplicate.

Then click the duplicate, the three vertical dots , click > create pattern.
Give the new pattern the same name, like the unsynced pattern, with the addition ” unsynced “. So you can identify it in the patterns section.

Then go to patterns section an there you have your unsynced duplicated pattern. See image

See image

https://ibb.co/548xR27
md_quer 1:32 pm on August 19, 2023

Give the new pattern the same name, like the unsynced pattern, with the addition ” unsynced “. So you can identify it in the patterns section.

i forgot > remove the synced blue button
see image https://ibb.co/W63yhj5
Jos Velasco 5:03 pm on August 22, 2023
Hey, there:

Add a border to all Image blocks on your site and change the size of all H2 headings using Styles.
- Media & text blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. didn’t apply the border when I edited the image styles.
  The Media & text could be composed of sub-blocks to inherit the properties of a single image block like the Gallery block does now.
Create an “About” page and turn on the Top Toolbar setting. Copy and paste content from this Google Doc, noting any issues in pasting with the format or content.
- After creating the page from the Site editor, clicking the Type / to choose a block does not make the vertical text cursor | start blinking. You see it only after you start typing or pasting something like the Google Doc’s content.
- Also, I still feel insufficient padding on the default paragraph block. The Type / to choose a block placeholder feels too close to the blue border. It is easy to read right now, and adding padding could make the text jump when you start typing, but it feels too tight for me.
At various points, use the Command Palette to either navigate between parts of your site or open various tools, like List View, or settings, like Top Toolbar.
- Toggling the list view from the Editor using the Command palette doesn’t work yet. I’d love to have the same advanced functions everywhere.
- Opening a template part like the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. using the command palette could jump directly to the editing view to skip a click.
I am happy the Editor keeps becoming more and more robust. Doing these tests helps to learn new features. I didn’t know you could toggle the sidebars with the Command palette!
- annezazu 4:34 pm on August 24, 2023
  
  Hey there @josvelasco! Thanks for your third contribution to the FSE Outreach program. It’s awesome to have repeat folks come through to continue to share their feedback.
  
  Media & text blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. didn’t apply the border when I edited the image styles.
  The Media & text could be composed of sub-blocks to inherit the properties of a single image block like the Gallery block does now.
  
  Great call out. There are a variety of issues related to this and part of it has to do with “media” covering a few different items, rather than just images. I’ll note this for usability feedback though as I know there are a number of features from images folks would want to use in media & text (duotone for example).
  
  After creating the page from the Site editor, clicking the Type / to choose a block does not make the vertical text cursor | start blinking. You see it only after you start typing or pasting something like the Google Doc’s content.
  
  Ah it’s hidden behind the block selection outline. That does make for a more awkward writing experience though. Once more, I’ll call this out in usability feedback as something to iterate on.
  
  Toggling the list view from the Editor using the Command palette doesn’t work yet. I’d love to have the same advanced functions everywhere.
  
  Noted here alongside someone else here who suggested the same:
  https://github.com/WordPress/gutenberg/issues/50407#issuecomment-1691956025
  
  Opening a template part like the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. using the command palette could jump directly to the editing view to skip a click.
  
  Right now, it’s intentional that the detail view is shown with the option to edit as someone might just need to check the details of a template part or template. If it were to change, either way it would add a click for someone. I’ll add this as usability feedback!
  - Jos Velasco 5:14 pm on August 24, 2023
    
    Thanks for your work, @annezazu.
    
    Would you prefer if I dug more into existing issues before posting? Or is my way of reporting enough?
    
    Greetings.
    - annezazu 9:41 pm on August 26, 2023
      
      Totally up to you! If folks have time and are interested, it helps but I also don’t want that to be a requirement for folks to participate in these calls for testing.
  - annezazu 5:23 pm on August 28, 2023
    
    Opening a template part like the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. using the command palette could jump directly to the editing view to skip a click.
    
    Revisited this after chatting with a designer and decided to open an issue: https://github.com/WordPress/gutenberg/issues/53999
    
    Thanks again for your feedback 🙂
Ed Beck 4:02 pm on August 28, 2023
Two piece of feedback on the current state of things.
1. I’ve been trying to use the new command palette, but I honestly don’t know what to do there.
I’ve used it successfully to switch to different pages, but I don’t know what the primary purpose of the command palette is supposed to be so I have no idea if I’m leveraging its capabilities at all.
1. In general I feel like all aspects of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ have been improved by recent updates. One aspect that I’m struggling with recently is the Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop., specifically when I want to inherit (most) settings and change one thing.
An example: What if I was creating a repository for books. In my repository, I have utilized categories or tags. What if I want my Query Loop to display in A -> Z format instead of most recent? Currently, the settings in Query Loop must be “Inherit all settings” OR “Create all settings brand new.” I noticed in the most recent version of gutenberg that to solve other issues, an “inherit” setting was created, to better identify spacing issues. I wondered if the same treatment could be done to the query loop.

To solve my example problem, I could set almost every setting to “Inherit” and then just change the show order to A -> Z.

Another use case that could benefit from this would be highly designed blog rolls. I noticed in the preview figma for the anticipated “twenty twenty-four” theme that the creator wanted to use a magazine style view, utilizing the offset feature to have different query loops show different views of the posts. It would be very useful if we could create our categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. pages to utilize the offset feature, while inheriting almost all other settings from the archive template or category template.
- annezazu 11:28 pm on August 29, 2023
  
  Thanks for responding as always! I’m going to include your feedback around the Command Palette in the summary and have followed up in slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. around the latter comments around the Query Loop block. Since this landed after the call for testing finished, I am not going to include the latter in the recap but I also want to make sure to follow up and get to the bottom of what you’re describing!

Welcome

Weekly Meetings (Calendar)

FSE Program Testing Call #25: Let’s start from the beginning

Overview

Testing Instructions

What to notice:

Leave Feedback by August 23, 2023

Welcome

Weekly Meetings (Calendar)

Overview

Testing Instructions

What to notice:

Leave Feedback by August 23, 2023

Share this: