I can’t save an attribute when trying to extend Gutenberg using a filter

I’ve been trying to add a simple toggle to all core Gutenberg blocks that adds a class to the block if selected. I’ve searched the internet for the last week and been working from tutorials from 2019 and the Gutenberg docs. I’m new to React so I was hoping for more examples on how to do this in the documentation.

The issue
The following code successfully adds the class, ‘parallax’, to a block on the frontend but the attribute isn’t stored. When I refresh the page editor the new class is showing up in “Addition CSS Classes” but the block doesn’t have the attribute set and the toggle is switched off. What id like to know is:

1. What am I doing wrong here?
2. What is the best practice when it comes to enqueuing block CSS & JS assets for improved performance? Should I be conditionally enqueuing separate assets for each filter & block and let something like WP Rocket combine these per page?

Here is the JS file I’m working with and the PHP I’m using to enqueue. If anyone can help I’d really appreciate it.

editor.js (ES6 / ESNext)

import domReady from "@wordpress/dom-ready";
domReady(() => {
  // ADD CUSTOM ATTRIBUTE
  function addAnimationAttribute(settings) {
    if (typeof settings.attributes !== "undefined") {
      settings.attributes = Object.assign(settings.attributes, {
        parallax: { type: "boolean" },
      });
    }
    return settings;
  }
  wp.hooks.addFilter(
    "blocks.registerBlockType",
    "testing/animation-custom-attribute",
    addAnimationAttribute
  );

  // ADD SETTING TO INSPECTOR
  const animationAdvancedControls = wp.compose.createHigherOrderComponent(
    (BlockEdit) => {
      return (props) => {
        const { Fragment } = wp.element;
        const { ToggleControl, Panel, PanelBody, PanelRow } = wp.components;
        const { InspectorControls } = wp.blockEditor;
        const { attributes, setAttributes, isSelected } = props;
        return (
          <Fragment>
            <BlockEdit {...props} />
            {isSelected && (
              <InspectorControls>
                <Panel>
                  <PanelBody title="Animations" initialOpen="{true}">
                    <PanelRow>
                      <ToggleControl
                        label={wp.i18n.__("Parallax", "testing")}
                        checked={props.attributes.parallax}
                        onChange={(newval) =>
                          setAttributes({ parallax: !attributes.parallax })
                        }
                      />
                    </PanelRow>
                  </PanelBody>
                </Panel>
              </InspectorControls>
            )}
          </Fragment>
        );
      };
    },
    "animationAdvancedControls"
  );
  wp.hooks.addFilter(
    "editor.BlockEdit",
    "testing/animation-advanced-control",
    animationAdvancedControls
  );

  // ADD CUSTOM CLASS
  function animationApplyExtraClass(extraProps, attributes) {
    const { parallax } = attributes;
    if (
      typeof parallax !== "undefined" &&
      parallax &&
      extraProps.className.includes("parallax") !== true
    ) {
      extraProps.className = extraProps.className + " parallax";
    }
    return extraProps;
  }
  wp.hooks.addFilter(
    "blocks.getSaveContent.extraProps",
    "testing/animation-apply-class",
    animationApplyExtraClass
  );
});

Functions.php

add_action('enqueue_block_editor_assets', function () {
wp_enqueue_script('themeName/editor.js', asset('scripts/editor.js')->uri(), [
'wp-blocks', 'wp-components', 'wp-compose', 'wp-dom-ready', 'wp-editor',
'wp-element', 'wp-hooks', ], null, true); }, 100);

• This topic was modified 3 years, 8 months ago by camknight.
• This topic was modified 3 years, 8 months ago by camknight.
• This topic was modified 3 years, 8 months ago by camknight.
• This topic was modified 3 years, 8 months ago by camknight.
• This topic was modified 3 years, 8 months ago by camknight.