Extending block-filter.js in a child theme and modify editor styles wrapper vars

[Wewill]

Hello team,

That's not a proper issue ; I just wondering how to properly extend block-filter.js and modify the editor styles by custom fields as you done it with 'Hide page title' but not with a jQuery.css(), directly by changing the --go--vars... editor styles wrapper variables.

Just for the test, I quickly add some functionalities ( a dark mode and wide mode ) directly to the 'Hide page title' button.
I'm searching into document stylesheets and then modify the root var ; but I'm sure there is a much proper way ? Can you help me ?

block-filters.js:121

function GoPageTitleToggle(_ref) {
  var isEnabled = _ref.isEnabled,
      _onChange = _ref.onChange;
  wp.domReady(function () {
	
	let editorStylesWrapper;	
	for (let s = 0; s < document.styleSheets.length; s++) {
		let styleSheet = document.styleSheets[s];
		var rules = document.styleSheets[s].rules || document.styleSheets[s].cssRules;
        if (!rules)
            continue;
		for(let i = 0; i < rules.length; i++) {
		  if(rules[i].selectorText === '.editor-styles-wrapper') {
		    editorStylesWrapper = rules[i];
		  }
		}
	}
	//console.log(editorStylesWrapper);
	
    if (isEnabled) {
      jQuery('.block-editor .editor-post-title__input').css({
        opacity: 0.5
      });
    }

    jQuery('#hide-page-title-toggle').on('change', function () {
      if (jQuery(this).is(':checked')) {
        jQuery('.block-editor .editor-post-title__input').css({
          opacity: 0.5
        });
	// Trying to dynamically modify editor styles
	editorStylesWrapper.style.setProperty('--go--max-width', 'none');
	editorStylesWrapper.style.setProperty('--go--color--text', '#FFF');
	editorStylesWrapper.style.setProperty('--go-heading--color--text', '#FFF');
	editorStylesWrapper.style.setProperty('--go-h1--color--text', '#FFF');
	editorStylesWrapper.style.setProperty('--go--color--background', '#222');
        ...
        return;
      }

jQuery('.block-editor .editor-post-title__input').css({
        opacity: 1
      });
      // Trying to dynamically modify editor styles
      editorStylesWrapper.style.setProperty('--go--max-width', '38rem');
      editorStylesWrapper.style.setProperty('--go--color--text', '#000');
      editorStylesWrapper.style.setProperty('--go-heading--color--text', '#000');
      editorStylesWrapper.style.setProperty('--go-h1--color--text', '#000');
      editorStylesWrapper.style.setProperty('--go--color--background', '#FFF');
      ...
    });
  });
...

Expected behavior:
Properly modify editor styles wrapper variables

Screenshot(s):

Priority (select one):

• High - Functional blocker
• Medium - Doesn't work as expected
• Low - Not a big deal but we'd want to get to this eventually

Best regards, Wilhem

[jrtashjian]

Closing this issue as we focus on the Full Site Editing work currently underway in Go.