Add preview link to library block and template Menus (#497) #512
Conversation
* Adds a preview link to both block and template sections of the library. Modifies the preview SVG to be in line with other SVGs used in da-library.js * Adding space
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
|
@JasonHowellSlavin feedback:
You can check out the sandbox for hints on #2: https://libprev--da-live--adobe.aem.live/#/aem-sandbox/block-collection Raise your future PRs against this branch and we can merge and test quickly. Thanks for the contribution! |
* Styling is to my liking, full screen modal is in work * Still working on modal showing w/o removing lib palette * Working as expected, cleanup necessary, interested to see how the solution goes over * Full page working * Removing anchor tag, adding css for UI clarity for template section * Indentation * Adding lighter grey shade to new buttons * Updates for templates section * Renaming for clarity * Small css modification * Code Reveiw changes. Making preview point to aem page * Fixing most linter errors, some are still triggering with wrong specificity * Removing last of linting errors * CR changes: Added a new close button, moved the old close button. Added preview title * Small change for code sync * Remove space for code sync
* remove hide class css * Removing additional unecessary css
| return new Promise((resolve) => setTimeout(resolve, ms)); | ||
| } | ||
|
|
||
| export const getMetadata = (el) => [...el.childNodes].reduce((rdx, row) => { |
There was a problem hiding this comment.
This function can be imported from here (double check to verify it's exactly the same):
https://github.com/adobe/da-live/blob/main/blocks/edit/utils/helpers.js#L420
There was a problem hiding this comment.
Looks like they are slightly different, but do not have to be. That being said, they must be being used a bit differently. da-library/helpers version returns an object with the key as the metadata key, and then the content and text. The one in edit/utils only returns the content. It might be worth it for me to open an issue and then collapse the utils and check for imports and uses?
| this.shadowRoot.querySelector('.da-fs-dialog-plugin').showModal(); | ||
| this.shadowRoot.querySelector('.da-fs-dialog-plugin').classList.remove('hide'); |
There was a problem hiding this comment.
nit run selector once
| this.shadowRoot.querySelector('.da-fs-dialog-plugin').showModal(); | |
| this.shadowRoot.querySelector('.da-fs-dialog-plugin').classList.remove('hide'); | |
| const fsDialogPlugin = this.shadowRoot.querySelector('.da-fs-dialog-plugin'); | |
| fsDialogPlugin?.showModal(); | |
| fsDialogPlugin?.classList.remove('hide'); |
|
@chrischrischris @JasonHowellSlavin Are we thinking of adding a single preview button pointing to a single block document or have a preview for each variation that an author can browse through ? The original preview block library plugin was much more intuitive where authors can browse/preview through different variants of a block and click copy to insert it in a doc Looking at the sample url feels like many more clicks to browse through a single doc, preview and remember which variant to insert on the document with another click |
Contributing branch on @JasonHowellSlavin's behalf so we can test against prod content.
Adds a preview link to both block and template sections of the library. Modifies the preview SVG to be in line with other SVGs used in da-library.js
Adding space