I spent about an hour yesterday recreating Twitter’s interface in WordPress, using just the Site Editing tools that shipped in 5.9. It turned out to be a fun example of what’s possible with these new features. 🙌
Update 1/29/2022:
A few people asked for details on how I made this. This was all created without editing any code whatsoever! It was built and customized using standard blocks that are built right into WordPress 5.9.
Since that’s the case, the entire template can be pasted in as a block pattern. Here’s an example of me pasting it into a fresh install:
If anyone would like to give this a spin, I shared the block markup on GitHub:
https://gist.github.com/kjellr/0b8bd4c99b3b684b7f075cded133f33b
As shown in the video above, all you should need to do is remove any existing blocks in your template (I recommend using your “Home” template). Then copy, paste, and customize from there. A few tips if you’re interested in trying this out:
- The user icon is your Site Logo
- The user display name is your Site Title
- The list of tweets is your list of posts. In order to ensure that links work correctly in the feed, it pulls in your actual post content. It works best with short posts. 😉
- In the Global Styles sidebar panel, I suggest changing the default font size to 15px. That’ll make sure all the paragraphs in your post content match Twitter’s default size.
- This should generally work with any block theme, but for best results I recommend using it with Twenty Twenty-Two.
I hope that’s helpful for folks! I’m excited by the possibilities that the site editor opens up. 🎉