Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add copy & expand buttons to syntax-highlighted code blocks #2652

Merged
merged 2 commits into from
Jul 10, 2024

Conversation

ryelle
Copy link
Contributor

@ryelle ryelle commented Jul 9, 2024

Fixes #2572 — This adds the copy & expand buttons from Developer to the code blocks on Learn. I started from the function-reference.js script, but removed the jQuery dependency & other developer-custom code.

This "block" is not actually a block, it's just using the folder structure for the build process. On init, it registers a script and style, and when the code block is rendered, the script and style are loaded. When the JS sees a code block, if it's using the syntax highlighting, it injects a copy button & maybe the expand button.

Initially I started this as a block that could live in wporg-mu-plugins (and it worked), but trying to get it to work with the existing developer blocks might be a bit more coordination than we want to do for Learn's launch. Moving this back into mu-plugins could be a future improvement though.

Before After
Screen Shot 2024-07-09 at 18 46 26 Screen Shot 2024-07-09 at 18 40 30

Note: I restricted this to syntax-highlighted only because these blocks also have some styles that make it look better (padding, primarily). For example, if it's on all code blocks, these look awkward:

Screenshot 2024-07-09 at 6 58 33 PM

To test

@ryelle ryelle added the [Component] Learn Theme Website development issues related to the Learn theme. label Jul 9, 2024
@ryelle ryelle requested review from adamwoodnz and renintw July 9, 2024 23:02
@ryelle ryelle self-assigned this Jul 9, 2024
Copy link
Contributor

@adamwoodnz adamwoodnz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works for me, very nice!

:shipit:

@adamwoodnz adamwoodnz added this to the Learning Pathways launch milestone Jul 9, 2024
@adamwoodnz adamwoodnz merged commit a9101b5 into trunk Jul 10, 2024
1 check passed
@adamwoodnz adamwoodnz deleted the add/code-copy-expand branch July 10, 2024 02:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Component] Learn Theme Website development issues related to the Learn theme.
2 participants