@designcrowd/library.brand-page 6.1.6 → 6.1.7

package/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.pages-tab.test.ts

@@ -0,0 +1,78 @@
+import { describe, test, expect, vi } from 'vitest';
+import BrandPageMakerPageMixin from './BrandPageMakerPage.mixin';
+import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
+import { PAGE_SECTIONS } from '@shared/page-settings/models';
+
+// Clicking the header/footer of the live preview jumps straight to the Pages tab
+// and its matching section (BP-5855) — it must NOT push the old Content "pages"
+// sub-mode, which no longer exists. Driving the handlers keeps the test light.
+const { onPageHeaderContainerClick, onPageFooterContainerClick } = (
+  BrandPageMakerPageMixin as any
+).methods;
+
+const createContext = () => ({
+  isInteractivePreviewEnabled: true,
+  sideBarStore: { setSelectedTabName: vi.fn() },
+  contentSettingsStore: {
+    _setSelectedItemId: vi.fn(),
+    pushMode: vi.fn(),
+    resetMode: vi.fn(),
+  },
+  pageSettingsStore: { setSelectedSectionName: vi.fn() },
+  isHeaderSelected: false,
+  isFooterSelected: false,
+  isContentSelected: false,
+});
+
+describe('BrandPageMakerPage — preview deep links open the Pages tab', () => {
+  test('header click opens the Pages tab at the header section', () => {
+    const context = createContext();
+
+    onPageHeaderContainerClick.call(context);
+
+    expect(context.sideBarStore.setSelectedTabName).toHaveBeenCalledWith({
+      tabName: SIDE_BAR_TAB_NAMES.PAGE_SETTINGS,
+    });
+    expect(
+      context.pageSettingsStore.setSelectedSectionName,
+    ).toHaveBeenCalledWith({ sectionName: PAGE_SECTIONS.header });
+    expect(context.contentSettingsStore.pushMode).not.toHaveBeenCalled();
+    expect(context.isHeaderSelected).toBe(true);
+  });
+
+  test('footer click opens the Pages tab at the footer section', () => {
+    const context = createContext();
+
+    onPageFooterContainerClick.call(context);
+
+    expect(context.sideBarStore.setSelectedTabName).toHaveBeenCalledWith({
+      tabName: SIDE_BAR_TAB_NAMES.PAGE_SETTINGS,
+    });
+    expect(
+      context.pageSettingsStore.setSelectedSectionName,
+    ).toHaveBeenCalledWith({ sectionName: PAGE_SECTIONS.footer });
+    expect(context.contentSettingsStore.pushMode).not.toHaveBeenCalled();
+    expect(context.isFooterSelected).toBe(true);
+  });
+
+  // BP-5855 regression: setSelectedTabName only resets a leftover mode on an
+  // actual tab change, so clicking the header/footer while ALREADY on the
+  // Pages tab (e.g. mid image-replace from a footer icon) needs its own
+  // explicit reset here, or the panel stays stuck on the picker instead of
+  // scrolling to the section.
+  test('header click clears a leftover mode explicitly, not just via the tab switch', () => {
+    const context = createContext();
+
+    onPageHeaderContainerClick.call(context);
+
+    expect(context.contentSettingsStore.resetMode).toHaveBeenCalled();
+  });
+
+  test('footer click clears a leftover mode explicitly, not just via the tab switch', () => {
+    const context = createContext();
+
+    onPageFooterContainerClick.call(context);
+
+    expect(context.contentSettingsStore.resetMode).toHaveBeenCalled();
+  });
+});

package/src/brand-page-maker/constants/sidebar-constant.ts

@@ -1,9 +1,10 @@
 import type { SideBarTab } from '@shared/side-bar/models';
-import { constantsTr } from '@src/composables/useTranslate';
+import { constantsTr, pageSettingsTr } from '@src/composables/useTranslate';
 
 export const SIDE_BAR_TAB_NAMES = {
   PREVIEW: 'Preview',
   TEMPLATE_SETTINGS: 'TemplatesSettings',
+  PAGE_SETTINGS: 'PageSettings',
   CONTENT_SETTINGS: 'ContentSettings',
   BACKGROUND_SETTINGS: 'BackgroundSettings',
   ADMIN_BACKGROUND_SETTINGS: 'AdminBackgroundSettings',
@@ -31,6 +32,14 @@ export const DEFAULT_SIDE_BAR_TABS = (): SideBarTab[] => [
     isDisabledForAdmin: false,
     isVisible: true,
   },
+  {
+    name: SIDE_BAR_TAB_NAMES.PAGE_SETTINGS,
+    displayName: pageSettingsTr(`pages`),
+    iconName: 'page-blank',
+    accessibleDisplayName: 'Pages',
+    isDisabledForAdmin: false,
+    isVisible: true,
+  },
   {
     name: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
     displayName: constantsTr(`contentDisplayName`),

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.test.ts

@@ -839,17 +839,22 @@ describe('brand page maker store module', () => {
 
     await makerStore.initialise(INITIALISE_PAYLOAD);
 
-    // Simulate the user opening a content item's focused settings.
+    // Simulate the user opening a content item's focused settings. Tab first,
+    // then mode — focusing an item is only possible once already on the
+    // Content tab (setSelectedTabName resets a leftover mode on an actual tab
+    // change, so pushing the mode before landing on the tab would be
+    // backwards from how this happens for real, and would immediately wipe
+    // it here too).
     const orphanItemId = 'orphan-content-id-not-in-snapshot';
 
+    sideBarStore.setSelectedTabName({
+      tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
+    });
     contentSettingsStore.pushMode({
       mode: CONTENT_SETTINGS_MODES.focusedContentItem,
       selectedItemId: orphanItemId,
     });
     contentSettingsStore.selectedItemId = orphanItemId;
-    sideBarStore.setSelectedTabName({
-      tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
-    });
 
     // Pre-condition: panel is showing the focused content item.
     expect(contentSettingsStore.mode).toBe(

package/src/shared/content-settings/components/content-settings/ContentSettings.mixin.ts

@@ -4,14 +4,12 @@ import type { Content } from '@brand-page';
 import type { ItemCategory } from '@brand-page-maker/models';
 import { ITEM_CATEGORIES, ITEM_CATEGORY_NAMES } from '@brand-page-maker/models';
 import { UI_EVENT_SOURCES } from '../../../models';
-import {
-  PAGE_SETTINGS_SECTIONS,
-  useUiPageSettingsStore,
-} from '../../../page-settings/store';
+import { useUiPageSettingsStore } from '../../../page-settings/store';
+import { useUiSideBarStore } from '../../../side-bar/store';
+import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
 import { useUiContentSettingsStore } from '../../store';
 import { CONTENT_SETTINGS_MODES } from '../../store';
 import {
-  useBrandPageMakerStore,
   useBrandPageMakerUserStore,
   useBrandPageContainerStore,
 } from '@brand-page-maker/stores';
@@ -39,11 +37,11 @@ interface CategoryTab {
 export default defineComponent({
   emits: ['capture-preview-snapshot'],
   setup() {
-    const brandPageMakerStore = useBrandPageMakerStore();
     const contentSettingsStore = useUiContentSettingsStore();
     const pageSettingsStore = useUiPageSettingsStore();
     const pageNavigationStore = usePageNavigationStore();
     const styleSettingsStore = useUiStyleSettingsStore();
+    const sideBarStore = useUiSideBarStore();
     const userStore = useBrandPageMakerUserStore();
     const containerStore = useBrandPageContainerStore();
     const eventTracker = useEventTracker();
@@ -52,10 +50,8 @@ export default defineComponent({
 
     return {
       mode: computed(() => contentSettingsStore.mode),
-      pages: computed(() => pageSettingsStore.pages),
       activePageId: computed(() => pageNavigationStore.activePageId),
       activeCategoryTab: computed(() => contentSettingsStore.activeCategoryTab),
-      isBrandSite: computed(() => brandPageMakerStore.isBrandSite),
       contentSettingsSelectedItemId: computed(
         () => contentSettingsStore.selectedItemId,
       ),
@@ -63,10 +59,10 @@ export default defineComponent({
       canUseRichTextEditor: computed(
         () => userStore.features.canUseRichTextEditor,
       ),
-      brandPageMakerStore,
       contentSettingsStore,
       pageNavigationStore,
       pageSettingsStore,
+      sideBarStore,
       styleSettingsStore,
       eventTracker,
       historyStore,
@@ -81,7 +77,6 @@ export default defineComponent({
           label: ITEM_CATEGORY_NAMES()[c].displayName,
         })),
       ] as CategoryTab[],
-      isAddPageModalVisible: false,
     };
   },
   mounted() {
@@ -99,9 +94,6 @@ export default defineComponent({
     showPageControls(): boolean {
       return true;
     },
-    isManagePagesButtonVisible(): boolean {
-      return this.isBrandSite || this.pageSettingsStore.pages.length > 1;
-    },
     visibleCategoryTabs(): CategoryTab[] {
       return this.categoryTabs.filter(
         (t) =>
@@ -223,12 +215,8 @@ export default defineComponent({
       );
     },
     onManagePageButtonClick(): void {
-      this.contentSettingsStore.pushMode({
-        mode: CONTENT_SETTINGS_MODES.pages,
-      });
-
-      this.pageSettingsStore.setSelectedSectionName({
-        sectionName: PAGE_SETTINGS_SECTIONS.pages,
+      this.sideBarStore.setSelectedTabName({
+        tabName: SIDE_BAR_TAB_NAMES.PAGE_SETTINGS,
       });
     },
     onAddPageButtonClick(): void {

package/src/shared/content-settings/components/content-settings/ContentSettings.pages-tab.test.ts

@@ -0,0 +1,20 @@
+import { describe, test, expect, vi } from 'vitest';
+import ContentSettingsMixin from './ContentSettings.mixin';
+import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
+
+// The Content tab's "Manage Pages" dropdown item and gear icon both redirect to
+// the dedicated Pages tab (BP-5855) — they no longer open a nested sub-mode.
+// Driving the handler keeps the test light.
+const { onManagePageButtonClick } = (ContentSettingsMixin as any).methods;
+
+describe('ContentSettings — Manage Pages redirects to the Pages tab', () => {
+  test('onManagePageButtonClick switches to the Pages tab', () => {
+    const context = { sideBarStore: { setSelectedTabName: vi.fn() } };
+
+    onManagePageButtonClick.call(context);
+
+    expect(context.sideBarStore.setSelectedTabName).toHaveBeenCalledWith({
+      tabName: SIDE_BAR_TAB_NAMES.PAGE_SETTINGS,
+    });
+  });
+});

package/src/shared/content-settings/components/content-settings/ContentSettings.vue

@@ -37,7 +37,6 @@
                 @on-click.stop="onAddNewPageSelected()"
               />
               <Button
-                v-if="isManagePagesButtonVisible"
                 data-test-tag="manage-pages"
                 icon="settings"
                 icon-size="md"
@@ -134,10 +133,6 @@
     />
     <!-- End of Image mode -->
 
-    <!-- Start of Page mode -->
-    <PageSettings v-if="mode === CONTENT_SETTINGS_MODES.pages" />
-    <!-- End of Page mode -->
-
     <!-- Start of Single Content Item Settings -->
     <FocusedContentItemSettings
       v-if="mode === CONTENT_SETTINGS_MODES.focusedContentItem"
@@ -145,7 +140,7 @@
     />
     <!-- End of Single Content Item Settings -->
 
-    <NewPageModal :visible="isAddPageModalVisible" />
+    <NewPageModal />
   </div>
 </template>
 <script>
@@ -158,7 +153,6 @@ import ReplaceImageSettingsForContent from './ReplaceImageSettingsForContent.vue
 import ContentSettingsButton from './ContentSettingsButton.vue';
 import ContentSettingsLockedButton from './ContentSettingsLockedButton.vue';
 import NewPageModal from '../../../page-settings/components/new-page-modal/NewPageModal.vue';
-import PageSettings from '../../../page-settings/components/page-settings/PageSettings.vue';
 import FocusedContentItemSettings from '../focused-content-item-settings/FocusedContentItemSettings.vue';
 import { CONTENT_SETTINGS_MODES } from '../../store';
 import { contentSettingsTr } from '@src/composables/useTranslate';
@@ -175,7 +169,6 @@ export default {
     ReorderableList,
     ReplaceImageSettingsForContent,
     NewPageModal,
-    PageSettings,
     PageSelectorDropDown,
   },
   mixins: [ContentSettingsMixin],

package/src/shared/content-settings/store/content-settings-store.ts

@@ -93,7 +93,6 @@ export const CONTENT_SETTINGS_MODES = {
   edit: 'edit',
   add: 'add',
   images: 'images',
-  pages: 'pages',
   focusedContentItem: 'focusedContentItem',
 } as const;
 

package/src/shared/page-settings/components/page-settings/PageSettings.image-replace.test.ts

@@ -0,0 +1,100 @@
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { shallowMount } from '@vue/test-utils';
+import PageSettings from './PageSettings.vue';
+import ReplaceImageSettingsForContent from '../../../content-settings/components/content-settings/ReplaceImageSettingsForContent.vue';
+import { useUiContentSettingsStore } from '../../../content-settings/store';
+import { UI_EVENT_SOURCES } from '../../../models';
+
+// Regression coverage for BP-5855: a header/footer image-replace intent (e.g. a social
+// link icon) used to push the shared content-settings image-picker mode while
+// PageSettings was still nested inside ContentSettings — pushing that mode swapped the
+// panel in place. Now that PageSettings renders as its own sidebar tab
+// (`<component :is="selectedTabName">` in BrandPageMaker.vue), the picker never mounted
+// and the mode leaked into the next Content-tab visit. PageSettings must render the
+// picker itself when the intent came from page settings, and hide the pages body while
+// it's open.
+describe('PageSettings — header/footer image-replace intent', () => {
+  let contentSettingsStore: ReturnType<typeof useUiContentSettingsStore>;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    contentSettingsStore = useUiContentSettingsStore();
+  });
+
+  const mountPageSettings = () => shallowMount(PageSettings);
+
+  const pagesBodyIsVisible = (
+    wrapper: ReturnType<typeof mountPageSettings>,
+  ): boolean =>
+    (
+      wrapper.find('[data-component="page-settings"] > div')
+        .element as HTMLElement
+    ).style.display !== 'none';
+
+  test('by default: no picker, pages body visible', () => {
+    const wrapper = mountPageSettings();
+
+    expect(wrapper.findComponent(ReplaceImageSettingsForContent).exists()).toBe(
+      false,
+    );
+    expect(pagesBodyIsVisible(wrapper)).toBe(true);
+  });
+
+  test('a page-settings image-replace intent opens the picker and hides the pages body', async () => {
+    const wrapper = mountPageSettings();
+
+    contentSettingsStore.setSelectedItemAndFieldName({
+      id: 'footer',
+      name: 'socialLinks',
+      index: 0,
+      eventSource: UI_EVENT_SOURCES.pageSettings,
+    });
+    contentSettingsStore.pushMode({ mode: 'images' });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.findComponent(ReplaceImageSettingsForContent).exists()).toBe(
+      true,
+    );
+    expect(pagesBodyIsVisible(wrapper)).toBe(false);
+  });
+
+  test('does not open the picker for a content-settings-sourced image intent', async () => {
+    const wrapper = mountPageSettings();
+
+    contentSettingsStore.setSelectedItemAndFieldName({
+      id: 'some-content-item',
+      name: 'image',
+      index: 0,
+      eventSource: UI_EVENT_SOURCES.contentSettings,
+    });
+    contentSettingsStore.pushMode({ mode: 'images' });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.findComponent(ReplaceImageSettingsForContent).exists()).toBe(
+      false,
+    );
+    expect(pagesBodyIsVisible(wrapper)).toBe(true);
+  });
+
+  test('popping the mode after picking an image restores the pages body', async () => {
+    const wrapper = mountPageSettings();
+
+    contentSettingsStore.setSelectedItemAndFieldName({
+      id: 'footer',
+      name: 'socialLinks',
+      index: 0,
+      eventSource: UI_EVENT_SOURCES.pageSettings,
+    });
+    contentSettingsStore.pushMode({ mode: 'images' });
+    await wrapper.vm.$nextTick();
+
+    contentSettingsStore.popMode();
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.findComponent(ReplaceImageSettingsForContent).exists()).toBe(
+      false,
+    );
+    expect(pagesBodyIsVisible(wrapper)).toBe(true);
+  });
+});

package/src/shared/page-settings/components/page-settings/PageSettings.mixin.ts

@@ -16,7 +16,11 @@ import {
   PAGE_SECTION_STYLE_OPTIONS,
   type PageSectionStyleOption,
 } from '@brand-page-maker/models/page-section-style.model';
-import { useUiContentSettingsStore } from '../../../content-settings/store';
+import {
+  CONTENT_SETTINGS_MODES,
+  useUiContentSettingsStore,
+} from '../../../content-settings/store';
+import { UI_EVENT_SOURCES } from '../../../models';
 import {
   PAGE_SETTINGS_SECTIONS,
   type PageSettingsSection,
@@ -47,13 +51,6 @@ export interface PageField {
   page: ContentPage;
 }
 
-const PAGE_SETTINGS_PAGES = {
-  page: 'page',
-  logo: 'logo',
-} as const;
-
-type PageSettingsPage = keyof typeof PAGE_SETTINGS_PAGES;
-
 const isRouteNestedInOrders = (
   orders: NavOrder[],
   routeId: string,
@@ -274,8 +271,6 @@ export default defineComponent({
       isDeleteModalVisible: false,
       deleteModalPageId: undefined as string | undefined,
       deleteModalPageTitle: undefined as string | undefined,
-      currentPageNo: PAGE_SETTINGS_PAGES.page as PageSettingsPage,
-      PAGE_SETTINGS_PAGES,
       PAGE_SETTINGS_SECTIONS,
       ALIGN_LEFT_ALIGNED,
       ALIGN_CENTERED,
@@ -334,6 +329,15 @@ export default defineComponent({
     showFooterSettings(): boolean {
       return this.isBrandSite;
     },
+    // Header/footer image-replace intents (e.g. a social link icon) route through the
+    // shared content-settings image picker rather than duplicating it here.
+    isReplacingPageSettingsImage(): boolean {
+      return (
+        this.contentSettingsStore.mode === CONTENT_SETTINGS_MODES.images &&
+        this.contentSettingsStore.selectedItemEventSource ===
+          UI_EVENT_SOURCES.pageSettings
+      );
+    },
     hideText() {
       return this.isDesignCom
         ? styleSettingsTr(`hideDesignLogo`)
@@ -474,33 +478,12 @@ export default defineComponent({
     onCancelDeletePage() {
       this.isDeleteModalVisible = false;
     },
-    onLogoVariationSelected(value: string) {
-      if (!this.selectedSectionName) {
-        return;
-      }
-
-      const sectionName = this.selectedSectionName;
-
-      this.pageSettingsStore.setPageSettingsSectionValue({
-        sectionName,
-        propName: 'logoImageUrl',
-        value,
-        viewport: this.viewport,
-      });
-
-      this.currentPageNo = PAGE_SETTINGS_PAGES.page;
-
-      this.pageSettingsStore.setSelectedSectionName({ sectionName });
-    },
     onPageTitleInput(pageId: string, title: string) {
       this.pageSettingsStore.setPageTitle({
         pageId,
         pageTitle: title,
       });
     },
-    onBackButtonClick() {
-      this.contentSettingsStore.popMode();
-    },
     scrollToPageSettingsSection(sectionName: PageSettingsSection) {
       this.$nextTick(() => {
         const $sideBarContent = document.querySelector(

package/src/shared/page-settings/components/page-settings/PageSettings.vue

@@ -1,12 +1,11 @@
 <template>
   <div data-component="page-settings">
+    <!-- Header/footer image-replace intent (e.g. a social link icon) — shares the
+         content-settings image picker instead of duplicating it. -->
+    <ReplaceImageSettingsForContent v-if="isReplacingPageSettingsImage" />
     <!-- start page settings -->
-    <div v-show="currentPageNo === PAGE_SETTINGS_PAGES.page">
-      <SideBarSettingsHeader
-        :title="pageSettingsTr('managePages')"
-        :show-back-button="true"
-        @on-back="onBackButtonClick"
-      />
+    <div v-show="!isReplacingPageSettingsImage">
+      <SideBarSettingsHeader :title="pageSettingsTr('managePages')" />
       <p class="tw-font-sans tw-text-sm tw-text-grayscale-600 tw-mb-3">
         {{ pageSettingsTr('addPagesDescription') }}
       </p>
@@ -19,7 +18,6 @@
         <SideBarSectionTitle :title="pageSettingsTr('addPages')" />
         <!-- Nested draggable section for visible pages -->
         <NestedDraggable
-          v-if="!parentRouteId"
           :orders="pageNavigationStore.orders"
           :is-dragging-page="isDraggingPage"
           :is-design-com="isDesignCom"
@@ -105,6 +103,8 @@
         @cancel="onCancelDeletePage"
         @confirm="onConfirmDeletePage"
       />
+
+      <NewPageModal />
     </div>
     <!-- end page settings -->
   </div>
@@ -115,7 +115,9 @@ import SideBarSettingsHeader from '../../../common/SideBarSettingsHeader.vue';
 import PageSettingsMixin from './PageSettings.mixin.ts';
 import SideBarSectionTitle from '../../../common/SideBarSectionTitle.vue';
 import DeletePageModal from '../delete-page-modal/DeletePageModal.vue';
+import NewPageModal from '../new-page-modal/NewPageModal.vue';
 import PageSettingsSectionStyles from '../page-settings-section-styles/PageSettingsSectionStyles.vue';
+import ReplaceImageSettingsForContent from '../../../content-settings/components/content-settings/ReplaceImageSettingsForContent.vue';
 import NestedDraggable from './NestedDraggable.vue';
 import { useBrandPageContainerStore } from '@brand-page-maker/stores';
 import { pageSettingsTr, styleSettingsTr } from '@src/composables/useTranslate';
@@ -129,7 +131,9 @@ export default {
     SideBarSectionTitle,
     NestedDraggable,
     DeletePageModal,
+    NewPageModal,
     PageSettingsSectionStyles,
+    ReplaceImageSettingsForContent,
   },
   mixins: [PageSettingsMixin],
   setup(_props, _context) {

package/src/shared/side-bar/components/SideBar.landing-tab.test.ts

@@ -0,0 +1,67 @@
+import { describe, test, expect, vi } from 'vitest';
+import SideBarMixin from './SideBar.mixin';
+import { SIDE_BAR_TAB_NAMES } from '@src/brand-page-maker/constants/sidebar-constant';
+
+// The desktop landing tab is chosen by NAME, not list position — inserting the
+// Pages tab between Templates and Content must not change where an editor opens
+// (BP-5855). Driving update() directly keeps the guard cheap.
+const update = (SideBarMixin as any).methods.update;
+
+const createContext = (
+  overrides: {
+    isMobileScreenSize?: boolean;
+    isPublished?: boolean;
+    isUserDraft?: boolean;
+    mobileTabName?: string;
+  } = {},
+) => ({
+  isMobileScreenSize: overrides.isMobileScreenSize ?? false,
+  mobileTabName: overrides.mobileTabName ?? SIDE_BAR_TAB_NAMES.PREVIEW,
+  brandPageContainerStore: {
+    isPublished: overrides.isPublished ?? false,
+    isUserDraft: overrides.isUserDraft ?? false,
+  },
+  sideBarStore: { setSelectedTabName: vi.fn() },
+});
+
+describe('SideBar.update — default landing tab', () => {
+  test('a published site opens on Content', () => {
+    const context = createContext({ isPublished: true });
+
+    update.call(context);
+
+    expect(context.sideBarStore.setSelectedTabName).toHaveBeenCalledWith({
+      tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
+    });
+  });
+
+  test('an existing user draft opens on Content', () => {
+    const context = createContext({ isUserDraft: true });
+
+    update.call(context);
+
+    expect(context.sideBarStore.setSelectedTabName).toHaveBeenCalledWith({
+      tabName: SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS,
+    });
+  });
+
+  test('a brand-new site opens on Templates', () => {
+    const context = createContext();
+
+    update.call(context);
+
+    expect(context.sideBarStore.setSelectedTabName).toHaveBeenCalledWith({
+      tabName: SIDE_BAR_TAB_NAMES.TEMPLATE_SETTINGS,
+    });
+  });
+
+  test('mobile opens on the preview tab', () => {
+    const context = createContext({ isMobileScreenSize: true });
+
+    update.call(context);
+
+    expect(context.sideBarStore.setSelectedTabName).toHaveBeenCalledWith({
+      tabName: SIDE_BAR_TAB_NAMES.PREVIEW,
+    });
+  });
+});

package/src/shared/side-bar/components/SideBar.mixin.ts

@@ -73,15 +73,15 @@ export default defineComponent({
   methods: {
     update() {
       if (this.isMobileScreenSize === false) {
-        const index =
+        // Land on Content for returning editors, Templates for new sites.
+        // Select by name, not list position — the tab order is not fixed.
+        const tabName =
           this.brandPageContainerStore.isPublished ||
           this.brandPageContainerStore.isUserDraft
-            ? 1
-            : 0;
+            ? SIDE_BAR_TAB_NAMES.CONTENT_SETTINGS
+            : SIDE_BAR_TAB_NAMES.TEMPLATE_SETTINGS;
 
-        this.sideBarStore.setSelectedTabName({
-          tabName: this.tabs.filter((x) => !x.isMobileOnly)[index].name,
-        });
+        this.sideBarStore.setSelectedTabName({ tabName });
       } else {
         this.sideBarStore.setSelectedTabName({ tabName: this.mobileTabName });
       }