fix(app-page-builder): sort properties as defined in the element plugin

packages/app-page-builder/src/editor/config/ElementProperty.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Element, ElementProps } from "./Element";
 import { makeDecoratable } from "@webiny/react-composition";
-import { Elements } from "~/editor/config/Elements";
+import { Elements, ElementsProps } from "~/editor/config/Elements";
 
 const SCOPE = "elementProperties";
 
@@ -32,8 +32,9 @@ export const ElementProperty = Object.assign(BaseElementProperty, ElementPropert
 
 export interface ElementPropertiesProps {
     group?: string;
+    transform?: ElementsProps["transform"];
 }
 
 export const ElementProperties = (props: ElementPropertiesProps) => {
-    return <Elements group={props.group} scope={SCOPE} />;
+    return <Elements group={props.group} scope={SCOPE} transform={props.transform} />;
 };

packages/app-page-builder/src/editor/config/Elements.tsx

@@ -15,6 +15,7 @@ declare global {
 export interface ElementsProps {
     group?: string;
     scope?: string;
+    transform?: (elements: ElementConfig[]) => ElementConfig[];
 }
 
 const passthrough = () => true;
@@ -26,7 +27,9 @@ const byScope = (scope?: string) => {
     return scope ? (item: ElementConfig) => item.scope === scope : passthrough;
 };
 
-export const Elements = ({ group, scope }: ElementsProps) => {
+const defaultTransform = (elements: ElementConfig[]) => elements;
+
+export const Elements = ({ group, scope, transform = defaultTransform }: ElementsProps) => {
     const { elements } = useEditorConfig();
 
     const groupElements = useMemo(() => {
@@ -35,7 +38,7 @@ export const Elements = ({ group, scope }: ElementsProps) => {
 
     return (
         <pb-editor-ui-elements data-scope={scope} data-group={group}>
-            {groupElements.map(element => (
+            {transform(groupElements).map(element => (
                 <pb-editor-ui-element key={element.name} data-name={element.name}>
                     {element.element}
                 </pb-editor-ui-element>

packages/app-page-builder/src/editor/defaultConfig/Sidebar/BackwardsCompatibility/StyleSettingsAdapter.tsx

@@ -5,7 +5,7 @@ import { PbEditorPageElementStyleSettingsPlugin } from "~/types";
 import { EditorConfig } from "~/editor/config";
 import { useElementStyleSettings } from "~/editor/plugins/elementSettings/hooks/useElementStyleSettings";
 
-const getPropertyName = (pluginName: string) => {
+export const getPropertyName = (pluginName: string) => {
     return camelCase(pluginName.replace("pb-editor-page-element-style-settings-", ""));
 };
 

packages/app-page-builder/src/editor/defaultConfig/Sidebar/StyleSettings/StyleProperties.tsx

@@ -1,6 +1,42 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { ElementProperties, ElementProperty } from "~/editor/config/ElementProperty";
+import { useElementPlugin } from "~/editor/contexts/EditorPageElementsProvider/useElementPlugin";
+import { useActiveElement } from "~/editor";
+import { Element } from "@webiny/app-page-builder-elements/types";
+import { getPropertyName } from "../BackwardsCompatibility/StyleSettingsAdapter";
 
 export const StyleProperties = () => {
-    return <ElementProperties group={ElementProperty.STYLE} />;
+    const [element] = useActiveElement<Element>();
+    if (!element) {
+        return null;
+    }
+
+    return <ElementStyleProperties element={element} />;
+};
+
+const ElementStyleProperties = ({ element }: { element: Element }) => {
+    const plugin = useElementPlugin(element);
+    if (!plugin) {
+        return null;
+    }
+
+    const names = (plugin.settings || []) as string[] | string[][];
+
+    const settings = useMemo(() => {
+        return names
+            .map(config => (Array.isArray(config) ? config[0] : config))
+            .filter(name => name.startsWith("pb-editor-page-element-style-settings-"))
+            .map(name => getPropertyName(name));
+    }, [element.type]);
+
+    return (
+        <ElementProperties
+            group={ElementProperty.STYLE}
+            transform={elements => {
+                return ["property", ...settings]
+                    .map(name => elements.find(element => element.name === name))
+                    .filter(Boolean) as typeof elements;
+            }}
+        />
+    );
 };