Replacing Details Toolbar Button?

Hello,

I’m trying to replace the existing details toolbar button with my own custom one, but I’m not having much success. I was following this tutorial about the plugin API along with my existing knowledge about JS but nothing seemed to be working.
I even copied the exact code from that example and pasted it in the theme editor under the </body> tab but even the heart icon didn’t appear. I’m not sure if an update made that tutorial inaccurate or what, but any help would be greatly appreciated.


What I’m trying to accomplish:

  • Replace the existing details with a new button that is titled “Insert Spoiler”
  • When clicked a modal will appear that has two input fields, one for the title and one for the contents.
  • Instead of using the markup, I want to use HTML to avoid issues with videos not embedding as mentioned here.

Final Output:

<details>
<summary>value_from_title_input</summary>
Value_From_Contents_Input
</details>

Note: If a modal would be a lot of work, I can settle with placeholder text being inserted instead such as “Spoiler Title” for the title and “Contents” for the contents.