Opened 3 weeks ago
Last modified 3 weeks ago
#65907 assigned enhancement
Restore the revisions easter egg
| Reported by: | adamsilverstein | Owned by: | adamsilverstein |
|---|---|---|---|
| Priority: | normal | Milestone: | Awaiting Review |
| Component: | Editor | Version: | |
| Severity: | normal | Keywords: | has-patch |
| Cc: | Focuses: |
Description
This PR restores the admin easter egg WordPress used to trigger by comparing a revision to itself. It shipped for about a decade until it came out in [24820] (see #24852) when the revisions UI was rewritten and the "compare a revision to itself" state stopped existing and it became impossible to trigger.
This PR restores the easter egg behind the command palette, so it can be triggered by typing a phrase into the palette. The phrase is a well known WordPress phrase which I won't divuldge here in order to not ruin the surprise for anyone who wants to find it themselves.
The phrase is compared through the a Dvorak/QWERTY substitution cipher so it is possible to deduce it from the source code with a little bit of work.
Notes on the code
The JavaScript here is a rewrite of the original which no longer depends on jQuery.
A few other things needed updating after twelve years:
<blink>andtext-decoration: blinkare replaced with a CSS@keyframesblink, plus aprefers-reduced-motionguard.- The original took over the document, rewriting
html/bodyCSS and stripping nodes out of the page's first<p>. The scene now renders into its own overlay and touches nothing on the admin page. - The overlay is marked
aria-hidden. Without it, text typed one character at a time lands in the accessibility tree one node at a time.
Note: only a small loader is added to admin pages. The scene itself is fetched at the moment it is invoked, so a normal admin load carries nothing else.
Change History (7)
This ticket was mentioned in PR #13152 on WordPress/wordpress-develop by @adamsilverstein.
3 weeks ago
#1
- Keywords has-patch added
@adamsilverstein commented on PR #13152:
3 weeks ago
#2
Calling the files easter-egg-* is probably a bit too obvious, maybe we can come up with something a bit less so.
@adamsilverstein commented on PR #13152:
3 weeks ago
#3
Agreed. Renamed to teletype.js and teletype-loader.js in b2150a3 - named for what they do rather than for what they are, since the loader's src shows up in the markup of every admin page that loads the palette. The script handle, config global and overlay class follow. Docblocks still say plainly what this is, and minification strips those so they never reach a production page.
#5
@
3 weeks ago
This easily leads to bad experiences.
- The 'Self-comparison' and 'infinite loop' lines do not fit well outside the original context of comparing a revision to itself.
- A self-destruct countdown simply does not belong in production code. ticket:15262#comment:4 mentions the possibility of getting a call from a customer who thinks the site has been hacked, but it can be even worse if they're afraid to tell you or if they think a hacker left some residual effect after closing the command palette, hitting the back button, etc.
- The closing sentence, "Don't let this happen again," can sound threatening.
- All the text is in English, without using a
langattribute. Translating it probably is unnecessary when the key phrase is also in English, but this can be triggered by people with a different profile language (plus English speakers who do not get the joke or the movie reference). - You can use the
Esckey or click anywhere to exit, but there is no visible indication of a way out. - Blind screen reader users would have no idea what is happening, and those who can see would hear nothing.
- When I used the key phrase as a post title, with or without spaces, the command palette included an option to edit the post. When I pressed Enter, either with the cursor in the text field or when I scrolled down to the edit command, it played the Easter egg instead of going to the post editor.
If the Matrix part is worth adding again, it could have a very noticeable blue pill-shaped Exit button. Also, the paragraph text needs to be larger than 13 pixels.
However, I would prefer to leave all of it out. "There will be opportunities for other easter eggs. This one has had its decade."
#6
@
3 weeks ago
- Owner set to
- Status new → assigned
This easily leads to bad experiences.
Not that easily!
Your points about the language and tone (self-destruct) are fair.
If the Matrix part is worth adding again
Let's try that, the matrix part was my favorite part.
I'll try something a bit gentler for the intro sentence, that makes it a bit clearer that site is doing a quick (and whimsical) maintenance cycle and will return shortly. No need for concern!
I do remember hearing the original one had caused som panic and I see no reason to repeat that. I'm aiming for fun and whimsical and maybe a bit nerdy.
The closing sentence ... can sound threatening.
Good point. I will leave off the closing sentence entirely running the matrix effect for a few seconds then switching back to the editor seems like enough shenanigans for one egg.
Blind screen reader users would have no idea what is happening, and those who can see would hear nothing.
Good point. I can try adding some spoken accompaniment/narration so nobody is left out.
When I used the key phrase as a post title, with or without spaces, the command palette included an option to edit the post. When I pressed Enter, either with the cursor in the text field or when I scrolled down to the edit command, it played the Easter egg instead of going to the post editor.
Oops! that sounds like a bug - thanks for pointing that out. I'm trying to be a bit too clever in hiding the trigger string from the quickfill list which would make it far to easy to discover.
One other idea I had for a trigger was more of a konami code with a modifier key, but I want to have the triggering mechanism be more clearly intentional
You can use the Esc key or click anywhere to exit, but there is no visible indication of a way out.
it could have a very noticeable blue pill-shaped Exit button.
Fun
Also, the paragraph text needs to be larger than 13 pixels.
Ok, got it.
However, I would prefer to leave all of it out. "There will be opportunities for other easter eggs. This one has had its decade."
Right, lets leave the old thing out, that was probably a bad idea - lets add something new :)
Appreciate the feedback!
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)
## Description
Restores the admin easter egg WordPress used to trigger by comparing a revision to itself. It shipped for about a decade and came out in [24820] (see #24852) when the revisions UI was rewritten and the "compare a revision to itself" state stopped existing. It was not removed because anyone objected to it, only because its doorway disappeared.
The command palette is the new doorway. No command is registered: a registered command shows up in the results the moment its phrase matches, which hands the egg to anyone who happens to type near it. Instead a keydown handler watches for Enter while the palette is open and acts on the phrase itself. The palette shows its ordinary "No results found." state throughout, so typing the phrase looks exactly like a search that missed.
The phrase is compared through the same Dvorak/QWERTY substitution cipher the original used, so it is not a readable string in the admin bundle. It can be worked out from the source with a little effort, which seems like about the right amount.
## Notes on the payload
The 2013 original shipped as a Dean Edwards packed blob, which is what #15262 was about. Rather than reship that, it is unpacked here into readable source and no longer depends on jQuery - the original only used
$.each,$.inArray,.hide(),.show(),.animate(), and some manual child removal. Shipped output is minified by the normal build, so nothing changes visually.Timings, dialogue, and staging are faithful to the original. A few things needed updating after twelve years:
<blink>andtext-decoration: blinkare both gone from browsers. Replaced with a CSS@keyframesblink, plus aprefers-reduced-motionguard.html/bodyCSS and stripping nodes out of the page's first<p>. The scene now renders into its own overlay and touches nothing on the admin page.aria-hidden. Without it, text typed one character at a time lands in the accessibility tree one node at a time.Only a small loader is added to admin pages. The scene itself is fetched at the moment it is invoked, so a normal admin load carries nothing else.
## How has this been tested
Also verified:
grunt jshint:coreandgrunt typecheck:jspass,phpcsis clean.## Types of changes
src/js/_enqueues/admin/easter-egg.js, fetched on demand.src/js/_enqueues/admin/easter-egg-loader.js, enqueued with the command palette.wp_enqueue_command_palette_assets().admin-jsbuild map.## Open questions
## AI Use
Both the code and this description came out of a back and forth with 🤖 Claude Code. I will review and test.