Add copy & expand buttons to syntax-highlighted code blocks #2652
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
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:
To test