SDK: Create DotCMSLayoutBody React Component to render page content

[rjvelazco]

Parent Issue

#30943

Background

The DotcmsLayout component was originally designed to render the page and listen for changes from the UVE. However, its responsibilities have grown too complex by combining layout rendering with editor-specific logic. To address this, we will deprecate the DotcmsLayout component and introduce a new, cleaner component called DotCMSLayoutBody.

DotCMSLayoutBody will focus solely on rendering the content, ensuring a separation of concerns. UVE-related logic will no longer be included in this component, and developers can rely on other mechanisms for editor communication.

Tasks

• Deprecate DotcmsLayout with appropriate warnings in the codebase and documentation.
• Build the new DotCMSLayoutBody component, ensuring it focuses solely on rendering the content.
• Verify the DotCMSLayoutBody component works in both Edit and Live modes.
• Update SDK documentation to highlight the deprecation of DotcmsLayout and promote DotCMSLayoutBody.
• Ensure no regressions in the layout rendering process after migration.
• All existing use cases for DotcmsLayout are migrated to DotCMSLayoutBody.
• If Components is not passed, the app does not break, and console a warning.
• Include a devMode prop to show the Container is EMPTY and No Component for ${Contenty} messages outside the UVE.

Proposed Objective

Same as Parent Issue

Proposed Priority

Priority 3 - Average

Acceptance Criteria

Important

Make sure the withExperiments works with this new component.

• Deprecate DotcmsLayout.
• Build DotCMSLayoutBody.
• Test Compatibility.
• Update Examples and Documentation.
• DotcmsLayout should still work.

Pseudo-code

Use Case

Important

The new implementation should emphasize simplicity and flexibility.

import { DotCMSLayoutBody } from '@dotcms/client/next';

export function MyPage({ pageAsset }) {
    return (
        <DotCMSLayoutBody 
            pageAsset={pageAsset} 
            components={componentsMap} 
        />
    );
}

Quality Assurance Notes

• Test DotCMSLayoutBody with and without the components prop to ensure both scenarios are functional.
• Verify rendering behavior in both Edit and Live modes to confirm consistent functionality.
• Confirm no residual UVE-related logic is left in the new component.

Sub-Tasks & Estimates

• Mark DotcmsLayout as deprecated in the SDK.
• Build DotCMSLayoutBody as a standalone component.
• Update SDK examples and documentation to reflect the changes.
• Perform regression testing to ensure no breaking changes.

[github-actions]

PRs:

• feat(SDK): Create DotCMSLayoutBody React Component to render page content #31306
• feat(sdk): fix SDK React secondary entry points #31463

[rjvelazco]

@fmontes I'm on it

[zJaaal]

IQA Passed

All examples are building correctly and types are correct.

Screenshots

Screen.Recording.2025-02-27.at.1.43.21.PM.mov

Screen.Recording.2025-02-27.at.1.45.39.PM.mov

Screen.Recording.2025-02-27.at.1.49.33.PM-1.mov