WPcode

A Wordpress admin code editor plugin using the Monaco code editor that powers VisualStudio Code.

This is v3 of the existing HTML Editor Syntax Highlighter Wordpress plugin, however it is a total rewrite using the Monaco code editor rather than CodeMirror.

Status: Abandoned

I don't use wordpress anymore and don't have the bandwidth to contribute to this plugin. If you want to pick it up, send me a message. It did work for the classic text editor at some point, but I haven't tested it in a long time.

Tokenizer

I did write a tokenizer for monaco that handles a hybrid of html, css, js, wp shortcodes, and gutenberg json comments.

---

Run it

• npm i
• npm start to build and watch with livereload
• npm run build to build

Features (Goals)

• Code Editing In:
  • Classic Editor
  • Edit Theme
  • Edit Plugin
  • Additional Css in Customize
  • HTML widget
  • Gutenberg Blocks
    • Code Editor - gutenberg block comment + json
    • Gutenberg, View HTML mode of each block
    • html block
    • shortcode backwards compat
• Plugin Support:
• syntax highlighting for
  • html+shortcodes
  • html+gutenberg
  • html, css, js, php, other stuff in the the Theme/plugin editor
• settings page for setting your own json file...
  • setting open anywhere but have a page as well.
• adding themes from the vscode store
• full screen editor
• emmet / autocomplete
• SAVING
  • save with command-s
  • restore cursor place
  • retain undo tree?
  • ajax save
• REVISION - diffing with older revisions
• Formatting button.
  • format code
• works the same anywhere it is
• intellisense for shortcodes
• translate into other languages
• Better layout so scrolling doesn't suck
• linters?

CONTENT SUPPORT

• wp auto p management
• create/manage child theme
• Scripts n styles
  • use less and define global variables and functions
  • js too
  • on global Customize page
  • tabbed interface?
• Global and Post {%vars%}
• Content Blocks - with visual button
  • Snippets
  • Define shortcodes - shortcoder plugin
  • Define blocks

BUSINESS

• only paid, one-time pay?
• user-tracking
• terms of service
• maybes?
  • global find and replace - maybe only across certain content
  • integration with other plugins
  • detect HESH and warn
• adding vs-code extensions?
• copy pricing from: https://www.csshero.org/ https://www.advancedcustomfields.com/

Useful Links

• process user settings
  • working with user metadata
  • update_user_meta()
• AJAX forms
  • submitting a form in wordpress using ajax
  • how to handle form submission
• Ajax Save Post
• wp usage stats
• Assets Info
• WP SVN

Gutenberg Links

• Gutenberg Hub, Other links
• Extend Blocks
• Gutenberg API
• Gutenberg HTML comment syntax
• Events or hooks
• wp.data.getBlockMode()

Logo info

https://code.visualstudio.com/blogs/2017/10/24/theicon https://blogs.msdn.microsoft.com/visualstudio/2017/03/08/iterations-on-infinity/

Other notes

Options for wpautop

• TinyMCE Advanced: has an option to Keep paragraph tags
  • this option disables wpautop content filter and re-implements it in js
  • search for noAutop in mce/wptadv/plugin.js
  • this causes other problems apparently
• Gutenberg maybe use the gutenberg js version of autop js in conjunction with the disabling the pp wpautop content filter
• Preserved HTML Editor Markup Plus Plugin ?

Formatting HTML

• html tidy is included in some php apparently
• js beautify is what vs code uses
• replace shortcode [brackets][/brackets] with <@brackets @></@brackets @>, beautify, and then replace them back.
• test on beautifier.io
• beautify for gutenberg-html-comment-json could run selectively in comment blocks as a separate operation