Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Upgrade guide entry] Upgrade entry for new Pages editing architecture for field components #1815

Merged
merged 6 commits into from
Jun 12, 2024
Merged

[Upgrade guide entry] Upgrade entry for new Pages editing architecture for field components #1815

Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0562655
add upgrade entry for new editing architecture for field components
yavorsk Jun 6, 2024
fa240ef
minor wording fix
yavorsk Jun 6, 2024
a6cf5c4
add additional comment regarding field.editable
yavorsk Jun 12, 2024
9ce680e
add code example
yavorsk Jun 12, 2024
e7daffa
updated code sample
yavorsk Jun 12, 2024
a557604
remove comma
yavorsk Jun 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions docs/upgrades/unreleased.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,3 +113,24 @@
* Introduce a new _lib/graphql-editing-service.ts_ file to initialize a _graphQLEditingService_ to support a new Editing Metadata Mode. Can be done by adding this file from the latest version introduced in _nextjs-xmcloud_ base template.

* Update _lib/page-props-factory/plugins/preview-mode_ plugin to support a new Editing Metadata Mode. Can be done by replacing this file with the latest version introduced in _nextjs-xmcloud_ base template.

* To support editing for fields in Pages, the new editing metadata architecture relies on the new metadata property 'field.metadata' (instead of on 'field.editable', which won't be used in this scenario). If you are using the new editing arhitecture in Pages (EditMode.Metadata) and have custom field component that manipulates or relies on 'field.editable' in some way, it may need to be reworked. Experience Editor still relies on 'field.editable', so it needs to be supported. See example below from SXA's Banner component:

```ts
...
export const Banner = (props: ImageProps): JSX.Element => {
...
const isMetadataMode = sitecoreContext?.editMode === EditMode.Metadata;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's show how to access sitecoreContext variable, and add required imports for useSitecoreContext and EditMode variables

...
const modifyImageProps = !isMetadataMode
? {
...props.fields.Image,
editable: props?.fields?.Image?.editable
?.replace(`width="${props?.fields?.Image?.value?.width}"`, 'width="100%"')
.replace(`height="${props?.fields?.Image?.value?.height}"`, 'height="100%"'),
}
: { ...props.fields.Image };
...
}
...
```