Improve discovery and UX of changing settings in Customizer

[westonruter]

When opening the Customizer from the admin, the initial page in the preview is the homepage. This often won't have any Code blocks on it, leaving our controls in the Colors section very unhelpful. We need to:

• Add detection for whether the currently-previewed URL has any Code blocks on it.
• If there are no Code blocks previewed, add a control before the Syntax Highlighting Theme control that displays a notice to say that there is no Code blocks in the preview and provide a link to navigate to the most recently-published post that contains a Code block.
• Also, immediately upon changing one of our settings (or rather clicking on a control), the first Code block in the preview should be scrolled into view so that the changes can be previewed.
• Each instance of the Code block should have an edit shortcut.
• Lastly, instead of causing a full page refresh when a setting is changed, we should rather implement a postMessage preview update, perhaps utilizing selective refresh if needed.
• There should be a shortcut link in the Code block settings panel when editing a post to open that post (even draft) in the Customizer preview with the Colors section auto-expanded so the user can easily change the colors. If the post is not saved, this would need to initiate an autosave.
• Once these changes are done, the readme needs to be updated to better highlight the Customizer integration, as requested in a plugin review:

  I just stumbled upon the ability to change the color scheme in the Customizer. This is an awesome feature, but not one that is highlighted in the description of the plugin or in the screenshots. Of course it is mentioned in the Advanced Usage wiki, but I have been using the plugin for months and definitely overlooked that 😉. A brief mention in the main description and a screenshot of the different theme options would definitely help unobservant users like myself.

[twofingerrightclick]

I also couldn't find the the customize settings... which lead me to this issue, which I have a solution too: Click customize from a page you have code on:

And for those who cant find the Syntax Customize options on the Customize Panel, search for "Syntax" in the panels search bar:

[westonruter]

Is that "search settings" field part of a plugin you added?

In any case, customizing the color is going to need to be integrated into the block editor rather than rely on the Customizer going forward. The reason is that for newer sites which use block themes, the Customizer is replaced with the Site Editor.

[twofingerrightclick]

I just realized you are the author... Yes it would be great if the Customize settings was in the block editor. I am only slightly knowledgably about WordPress, but yes the site I was adding this plugin (solid plugin!) to has a block editor based theme. You are right about the search: it is apart of the Neve theme.

[westonruter]

Yes, I want to move the settings to the block editor. It might be part of the global styles system, but I need to learn more about that.

[pdkcoder]

@westonruter any update on this?

[westonruter]

@thphuc no, no update