Content updates from Page Editor

[github-actions]

The content has changed in the Page Editor.
Please review, merge, and deploy.

[ryelle]

@annezazu Was this change from your video walkthrough edits?

[annezazu]

Yes! The only thing that's changing here are renaming two group blocks in the page (so it matches with the rest of the page). No front end changes should be in place.

[annezazu]

Jumping back in here to share a video of what the /blocks changes should look like:

blocks.iteration.mov

Let me know if there are any questions or concerns! It looks a bit different than what's in the editor so I wanted to make sure we're good to go.

[ryelle]

Here's a screenshot of what it will look like from this branch:

Has this been reviewed by anyone else?

[annezazu]

That's right! @jasmussen can you look this over once more to be certain? I'd love another set of eyes.

[jasmussen]

Looks good at a glance. Are you able to provide a quick screenshot of mobile? In the editor, the "edge spacing" variable? In the editor I think it behaves differently on the frontend. Just want to make sure it isn't 80px wide in the mobile space.

Also a quick glance from @marko-srb if he has time, would be useful. This mini-iteration, which is not meant to preclude a future update, is highly based on his work.

[ryelle]

I'm pretty sure the direct preview links aren't working anymore (but there it is, just in case), so you can also preview it yourself by going in to the page editor and clicking preview from there.

That said, here's the mobile screenshot:

[jasmussen]

That looks correct, thank you!

To give a bit more context to this work, it is based on material created for #318, and this particular iteration was shared in Design Share 55 this morning. It has taken a couple of days of work to put together, so it is intentionally a light update. I will defer to you and Anne on when to put this live!

[annezazu]

Ready to ship whenever <3

[marko-srb]

Just wanted to let you know that I got time to review this (although a bit late) and that I am ok with almost all the updates. One tiny thing is:

The intersection between two titles isn't nice when its one color — that's because the titles are below eachother and they lose a sense of differentiation/new area, it seems like its part of one thing/block but off, because of spacing... The quickest fix would be to adjust bottom part background to the reminder of dark bg below.

How does that work?

CC: @ryelle , @annezazu , @jasmussen

[jasmussen]

Yep, I can make that change 👍 👍

[jasmussen]

Okay, made a change and updated the edited blocks page. It now looks like this:

I'm aware that's not 100% to what you showed, Marko, but unfortunately it was remarkably tricky to make the layout where the illustration is cropped on the right alone. And so to work on the larger screen sizes, as well as mobile, I had to un-crop the right side. Hope this works for you!

[annezazu]

That looks great to me :) Can we ship?

[ryelle]

That looks great to me :) Can we ship?

Yep! I'll get this deployed shortly.

[jasmussen]

Thank you, nice work. One thing I noticed, on the mobile breakpoint, the illustration disappears:

With the zero bottom margin, it looks a bit tight. There appears to be some custom CSS that hides this:

@media (max-width: 781px) {
    #intro .wp-block-column:last-child {
        display: none;
    }
}

If we can remove that, it would look like this, which works pretty well:

I'll go ahead and open a new issue just to be sure it's captured. Thanks again.

[ndiego]

I noticed that the link on the "Create a block" button is linking to an old URL. We have a redirect in place, so everything works, but I have updated it to the correct link in the Editor: https://developer.wordpress.org/block-editor/getting-started/tutorial/. This is a low priority, but whenever #440 is resolved, can we sync this change as well?