Add some whimsical fun with an easter egg

[adamsilverstein]

Description

Adds an admin easter egg behind the command palette, picking up the Matrix scene WordPress used to play when you compared a revision to itself. That one shipped for about a decade and came out in [24820] (see #24852) when the revisions UI was rewritten and 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.

That empty state is also the condition. The palette's search field is a combobox, so while any command matches, one of them is the active option and Enter belongs to it - the handler checks aria-activedescendant and stands down whenever the palette has something to run. Without that check, a post that happened to be titled with the phrase could never be opened from the palette, which @sabernhardt hit in https://core.trac.wordpress.org/ticket/65907#comment:5.

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.

The two files are named for what they do - teletype.js and teletype-loader.js - rather than for what they are. The loader is enqueued by name on every admin screen with the palette, so its src is right there in the markup, and a filename with "easter egg" in it gives away most of the fun before anyone goes looking. The docblocks still say plainly what this is; minification strips them, so they never reach a production page.

Trac ticket: https://core.trac.wordpress.org/ticket/65907

What changed after feedback on the ticket

@sabernhardt made a strong case that a faithful restoration lands badly, and most of it is addressed here:

• The self-destruct countdown is gone. The site now announces a routine maintenance cycle and counts down to the Matrix instead, so nobody watching has reason to think they have been hacked.
• "Self-comparison detected." no longer describes how the egg is reached. It is "Self-reference detected." now, which was @swissspidy's suggestion in review.
• The closing line, "Don't let this happen again.", is dropped. The scene holds on the last Matrix line for a few seconds, then takes itself down and hands the admin page back.
• The Matrix act now actually looks like the Matrix. The original was green text on black and nothing else, so the falling glyph rain everyone pictures is drawn on a canvas behind the dialogue. It sits out a prefers-reduced-motion: reduce preference.
• There is a visible way out now: the blue pill-shaped Exit button, top right, present from the first frame. Escape and a click anywhere still work.
• The overlay carries lang="en", since the dialogue is English whatever the profile language is set to.
• Screen reader users get the egg rather than forty-five seconds of silence. See below.

Accessibility

The first version was aria-hidden end to end. That made the typing bearable, but it also meant a blind user pressed Enter and got nothing at all, while focus stayed on an admin page they could no longer see. Reworked:

• The overlay is a role="dialog" with aria-modal="true", labelled "A WordPress easter egg. Press Escape to leave." It takes focus when it opens and hands focus back to wherever it came from on the way out.
• The typing surface keeps aria-hidden, since a character at a time is not something anyone wants read to them. Each line is instead handed whole to a polite live region as it begins typing, so the narration keeps pace with the screen rather than trailing it.
• The rain is described once, when the lights go out: "The screen goes black. Green code rains down it." The canvas itself is aria-hidden.
• Tab is trapped on the Exit button, so nobody winds up tabbing an interface hidden behind the overlay.

Screenshots

Act one, before the lights go out:

The Matrix act, with the rain running behind the dialogue:

Notes on the payload

Staging and timings follow the original. A few things needed updating after twelve years:

• <blink> and text-decoration: blink are both gone from browsers. Replaced with a CSS @keyframes blink, plus a prefers-reduced-motion guard.
• The original took over the document, rewriting html/body CSS 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 typed line and the rain canvas are both marked aria-hidden. Without that, text typed one character at a time lands in the accessibility tree one node at a time. The live region described above carries the dialogue instead.
• Scrolling is locked while the scene plays. Otherwise the page behind it stays scrollable and leaves a scrollbar strip down the side.

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

1. Open any admin screen and press Cmd/Ctrl+K.
2. Type the phrase. The palette will say "No results found." the whole time, which is expected. Press Enter anyway.
3. The scene runs for about 45 seconds and then clears itself. Esc or a click dismisses it at any point.

Worth a reviewer's eye, since the handler runs in capture phase:

• Ordinary palette commands still run, including when the search text is the phrase itself. Publish a post titled with the phrase, search for it, and Enter should open the post rather than the egg.
• Enter on a genuinely empty search does nothing.
• The payload is not requested until the egg is invoked.
• No console errors on normal admin screens.

The scene itself was driven in a standalone harness rather than in wp-admin, which is where the screenshots above come from. Confirmed there:

• The rain canvas is created at the right moment, sized to the viewport, and the glyphs draw. No canvas is created at all when prefers-reduced-motion: reduce matches.
• The live region receives all nine lines, in order, as whole lines - the three of act one, the countdown, the rain description, and the three Matrix lines.
• Focus lands on the overlay when it opens and returns to the previously focused element on exit, whether the scene ends on its own or is dismissed with Escape.
• Tab moves to the Exit button and stays there.
• Scroll locking is undone and the injected style element is removed on every exit path.

The palette handler still wants a pass on a real admin screen, and the narration is worth hearing through an actual screen reader rather than trusting the live region contract.

grunt jshint:corejs, grunt typecheck:js, and phpcs on script-loader.php all pass on the current branch.

Types of changes

• Add the scene as src/js/_enqueues/admin/teletype.js, fetched on demand.
• Add the loader as src/js/_enqueues/admin/teletype-loader.js, enqueued with the command palette.
• Register and enqueue the loader in wp_enqueue_command_palette_assets().
• Add both files to the Gruntfile admin-js build map.
• Draw the falling glyph rain on a canvas during the Matrix act, skipped under reduced motion.
• Make the overlay a labelled modal dialog that manages focus, narrate whole lines through a live region, and add the Exit control.

Suggested commit message

Administration: Leave a light on behind the command palette.

Sometimes the command palette has nothing to offer and says, politely, "No results found." This changeset gives that quiet corner a tenant: a teletype that answers the right words when Enter is pressed anyway.

The screen goes white and a cursor types, one letter at a time, announcing a routine maintenance cycle. It counts down, the lights go out, green glyphs rain behind the glass, and the cursor fades back up to greet the current user by name.

No command is registered, so nothing turns up in search. When the palette has a real result waiting, the teletype steps aside and that result opens as usual.

The scene is a considerate guest. An Exit button is present from the first frame, Escape leaves at any point, each line is narrated to a live region, and the rain sits out `prefers-reduced-motion`. Only a small loader is enqueued on admin screens; the scene itself is fetched when invoked. On exit, the dashboard and its focus are restored as they were.

The previous teletype, retired in [24820], has been informed and is very proud.

Green rain on black glass -
a palette that finds nothing
knows your name. Wake up.

Follow-up to [8306], [24820].

Props swissspidy, sabernhardt, westonruter, peterwilsoncc.
Fixes #65907. See #24852.

AI Use

🤖 Claude Code wrote the code here and drafted this description and the suggested commit message, working from the discussion on the ticket. I will review and test.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props adamsilverstein, peterwilsoncc, swissspidy, annezazu.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[adamsilverstein]

Calling the files easter-egg-* is probably a bit too obvious, maybe we can come up with something a bit less so.

[adamsilverstein]

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.

[adamsilverstein]

I did some cleanup on the doc blocks to make the easter egg less obvious to casual observers, instead linking to the trac ticket where any sleuth can readily uncover the full details.

[annezazu]

Love this. Just tested it out and it works great! I think the command palette is an excellent spot for it too.

[adamsilverstein]

Happy if you want to craft the commit message @aaronjorbin ;)

[peterwilsoncc]

I've added a couple of notes inline.

I might quickly push a few things but I won't change the strings as I think that will need further thought.

[peterwilsoncc]

To allow for translations this will need a translator comment linking to something like this https://jsbin.com/yiraraf/edit?html,js,console,output

Given there is going to need to be a link to a spoiler anyway, I think it best to put the keyword and strings inline and allow for the fact that nerds will go searching for spoilers.

For a nerd, it's a pretty low barrier for spoiling as is so I don't think it will lose a great deal.

[peterwilsoncc]

Docblock.

🔢 This applies for a few functions so I won't repeat myself. A few re missing @param annotations etc too,

[peterwilsoncc]

I've pushed the following:

• Moved CSS to the script loader to allow for code highlighting via HEREDOC
• Write up a bunch of docblocks. @adamsilverstein Are you able to do a logic check in case I've got some function purposes incorrect?

I didn't push any changes for i18n because I think we'll need some solutions figured out for that but I do think it's a blocker.

According to this completely random page on the internet, the Matrix has a lot of translation so there are canonical strings available for act two in lot of languages.

As with Howdy, %s some locales may wish to translate the trigger string to another phrase more popular in their local community. As a random idea, the Japanese community is quite proud of being the birthplace of wapuu so they may wish to use that.

As mentioned inline, I think it's fine to keep the strings in plain text and accept the low risk of spoilers that comes with.

[adamsilverstein]

As mentioned inline, I think it's fine to keep the strings in plain text and accept the low risk of spoilers that comes with.

I guess it looses a little of its geeky coded text appeal, but I'm fine just using the plain strings across the board and maybe even encouraging translators to have fun with it - give it their own local flavor as you suggested. I agree searching the codebase is geeky enough for this easter egg.

Maybe in a future egg we can get a bit more creative with the trigger (the original - comparing a revision to itself - was smart) and the egg itself to avoid needing translations.