Migrate any stored data

packages/preferences-persistence/src/index.js

@@ -3,6 +3,7 @@
  */
 import create from './create';
 import convertLegacyLocalStorageData from './migrations/legacy-local-storage-data';
+import convertPreferencesPackageData from './migrations/preferences-package-data';
 
 export { create };
 
@@ -34,9 +35,9 @@ export function __unstableCreatePersistenceLayer( serverData, userId ) {
 
 	let preloadedData;
 	if ( serverData && serverModified >= localModified ) {
-		preloadedData = serverData;
+		preloadedData = convertPreferencesPackageData( serverData );
 	} else if ( localData ) {
-		preloadedData = localData;
+		preloadedData = convertPreferencesPackageData( localData );
 	} else {
 		// Check if there is data in the legacy format from the old persistence system.
 		preloadedData = convertLegacyLocalStorageData( userId );

packages/preferences-persistence/src/migrations/preferences-package-data/convert-complementary-areas.js

@@ -0,0 +1,16 @@
+export default function convertComplementaryAreas( state ) {
+	return Object.keys( state ).reduce( ( stateAccumulator, scope ) => {
+		const scopeData = state[ scope ];
+
+		// If a complementary area is truthy, convert it to the `isComplementaryAreaVisible` boolean.
+		if ( scopeData?.complementaryArea ) {
+			const updatedScopeData = { ...scopeData };
+			delete updatedScopeData.complementaryArea;
+			updatedScopeData.isComplementaryAreaVisible = true;
+			stateAccumulator[ scope ] = updatedScopeData;
+			return stateAccumulator;
+		}
+
+		return stateAccumulator;
+	}, state );
+}

packages/preferences-persistence/src/migrations/preferences-package-data/index.js

@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import convertComplementaryAreas from './convert-complementary-areas';
+
+export default function convertPreferencesPackageData( data ) {
+	return convertComplementaryAreas( data );
+}

packages/preferences-persistence/src/migrations/preferences-package-data/test/convert-complementary-areas.js

@@ -0,0 +1,36 @@
+/**
+ * Internal dependencies
+ */
+import convertComplementaryAreas from '../convert-complementary-areas';
+
+describe( 'convertComplementaryAreas', () => {
+	it( 'converts the `complementaryArea` property in each scope to an `isComplementaryAreaVisible` boolean', () => {
+		const input = {
+			'core/customize-widgets': {
+				complementaryArea: 'edit-post/block',
+			},
+			'core/edit-site': {
+				complementaryArea: 'edit-site/template',
+			},
+			'core/edit-post': {
+				complementaryArea: 'edit-post/block',
+			},
+			'core/edit-widgets': {},
+		};
+
+		const expectedOutput = {
+			'core/customize-widgets': {
+				isComplementaryAreaVisible: true,
+			},
+			'core/edit-site': {
+				isComplementaryAreaVisible: true,
+			},
+			'core/edit-post': {
+				isComplementaryAreaVisible: true,
+			},
+			'core/edit-widgets': {},
+		};
+
+		expect( convertComplementaryAreas( input ) ).toEqual( expectedOutput );
+	} );
+} );

packages/preferences-persistence/src/migrations/preferences-package-data/test/index.js

@@ -0,0 +1,84 @@
+/**
+ * Internal dependencies
+ */
+import convertPreferencesPackageData from '../';
+
+const input = {
+	'core/customize-widgets': {
+		welcomeGuide: false,
+		fixedToolbar: true,
+	},
+	'core/edit-widgets': {
+		welcomeGuide: false,
+		fixedToolbar: true,
+		showBlockBreadcrumbs: false,
+		complementaryArea: 'edit-widgets/block-areas',
+	},
+	'core/edit-post': {
+		welcomeGuide: false,
+		fixedToolbar: true,
+		fullscreenMode: false,
+		hiddenBlockTypes: [ 'core/audio', 'core/cover' ],
+		editorMode: 'visual',
+		preferredStyleVariations: {
+			'core/quote': 'large',
+		},
+		inactivePanels: [],
+		openPanels: [ 'post-status' ],
+		pinnedItems: {
+			'my-sidebar-plugin/title-sidebar': false,
+		},
+	},
+	'core/edit-site': {
+		welcomeGuide: false,
+		welcomeGuideStyles: false,
+		fixedToolbar: true,
+		complementaryArea: 'edit-site/global-styles',
+	},
+};
+
+describe( 'convertPreferencesPackageData', () => {
+	it( 'converts data to the expected format', () => {
+		expect( convertPreferencesPackageData( input ) )
+			.toMatchInlineSnapshot( `
+		Object {
+		  "core/customize-widgets": Object {
+		    "fixedToolbar": true,
+		    "welcomeGuide": false,
+		  },
+		  "core/edit-post": Object {
+		    "editorMode": "visual",
+		    "fixedToolbar": true,
+		    "fullscreenMode": false,
+		    "hiddenBlockTypes": Array [
+		      "core/audio",
+		      "core/cover",
+		    ],
+		    "inactivePanels": Array [],
+		    "openPanels": Array [
+		      "post-status",
+		    ],
+		    "pinnedItems": Object {
+		      "my-sidebar-plugin/title-sidebar": false,
+		    },
+		    "preferredStyleVariations": Object {
+		      "core/quote": "large",
+		    },
+		    "welcomeGuide": false,
+		  },
+		  "core/edit-site": Object {
+		    "fixedToolbar": true,
+		    "isComplementaryAreaVisible": true,
+		    "welcomeGuide": false,
+		    "welcomeGuideStyles": false,
+		  },
+		  "core/edit-widgets": Object {
+		    "fixedToolbar": true,
+		    "isComplementaryAreaVisible": true,
+		    "showBlockBreadcrumbs": false,
+		    "welcomeGuide": false,
+		  },
+		}
+	` );
+	} );
+} );