Redesign Library

[JohnPixle]

We can start working on a simple Library redesign, I have already started some mockups in figma and created a ticket to start with the variables: #512

Regarding the new UI of the Library, this is what I have come up with.

❇️ FIGMA DESIGN

We can fine tune styles later, but it's essentially I believe to get started building this.

Important: The old (existing) library of blocks and kits will remain in Legacy Mode somewhere hidden but accessible. Users at some point will be asked to use the new one, but for now we should hide it as "Legacy templates".

Technicals:

• [x] This new Library will pull patterns, page templates and Style Kits from a single site from our preview network.
• [x] The demo site already has categories for the templates. I believe it would be good if the gallery could pull the categories from this website and represent to the sidebar.
• [x] The popup consumes 100% of the window minus 2rem padding on all sides.
• [x] @mauryaratan should do a quick audit on which parts of the template settings we need (screenshot below), and overall what other optimizations we must do. Performance etc. Inserting should be seamless.
• [x] Perhaps one of these toggles has to do with the option if the layout is built with Containers experiment. If not, they should be told to activate the experiments automatically.

We need to bring the automatic screenshot system to perfection.

[mauryaratan]

@JohnPixle Can you please confirm if the current method of publishing template kits, works for you? https://analogwp.com/wp/wp-admin/index.php?page=acf-options-template-kits

Or should we be rethinking of a better method here?

[JohnPixle]

@mauryaratan I think this only applies for publishing at our analogwp site, not the library. Or not?

[mauryaratan]

@JohnPixle Could you please link me to the following individual pages on the Design System site, please?

• Pattern pages, index page where all Elementor patterns are located.
• Confirm that SKs will be pulled from https://preview.analogwp.com/designsystem/wp-admin/admin.php?page=style-kits
• Template page, index page where all Page Templates will be pulled from

I can't find where you created the patterns. For blocks, we had the list here https://preview.analogwp.com/blocks/wp-admin/edit.php?post_type=elementor_library&tabs_group=library

---

As per my current understanding, it looks like we're re-inventing the wheels (in terms of architecture) while our current system is more than fine for everything we need.

Templates can be published the same way we have been publishing, with only one change.

In template settings, we can just add an additional checkbox, which would say that it "Uses Container", which will exclude it from the old library and include it in the new library. Does that make sense?

This way Page Templates can stay where they are, we just control how they're published to the end user.

[JohnPixle]

As per my current understanding, it looks like we're re-inventing the wheels (in terms of architecture) while our current system is more than fine for everything we need.

Can you please elaborate on that? Because I think we are actually doing the opposite of re-inventing the wheel. Initially we had planned to re-design the library with the new U, but to make things go faster in general, we decided to keep the existing library and make some adjustments.

Confirm that SKs will be pulled from https://preview.analogwp.com/designsystem/wp-admin/admin.php?page=style-kits

Style Kits can be published like they do now. At each template kit demo, we can publish the Style Kit. In other words, the SK of each template Kit is living at the demo site of that template kit.

I can't find where you created the patterns. For blocks, we had the list here https://preview.analogwp.com/blocks/wp-admin/edit.php?post_type=elementor_library&tabs_group=library

It should be the same path: https://preview.analogwp.com/designsystem/wp-admin/edit.php?post_type=elementor_library&tabs_group=library

So far I have been creating all patterns statically in pages, I have sot yet saved them in individual templates because I did not the setup we would follow.

In template settings, we can just add an additional checkbox, which would say that it "Uses Container", which will exclude it from the old library and include it in the new library. Does that make sense?

I don't have a problem with that, as long as this checkbox can be manipulated in quick edit and be applied on many templates at once.

Let me know if you need any clarifications

[JohnPixle]

Also, i think we already have agreed that are going based on this plan right? Not redo the entire thing. https://analogwp.slack.com/archives/CR33JR611/p1658756136511889

[JohnPixle]

In template settings, we can just add an additional checkbox, which would say that it "Uses Container", which will exclude it from the old library and include it in the new library. Does that make sense?

@mauryaratan actually, we can have this toggle activated by default for every new site we make. Essentially this way, everything we do from now on will be included in the new library.

[JohnPixle]

@mauryaratan Sorry, I had completely forgotten that you needed some templates for testing.

They are at the design system site.

The first two are "container" type. This will be the type of our patterns. So essentially we will be saving every pattern as a container. In the old version, patterns were saved as Section type.

.

Keep in mind that I have not published them yet in the library, neither I tweaked any of the settings at the template.

Let me know if you need any help with this.

[mauryaratan]

@JohnPixle Quick update:

Template Kits for the new library will be powered from new settings page, you're free to add items, make sure to NOT enable it for now.

I've added a new option in Template options which says Uses Container This cannot be enabled by default for new templates, because if we do, any old templates upon updating will have this checkbox enabled by default as well.

You're also free to publish new Container templates at will, I've made the changes in the backend to ensure that it is not displayed in the old library.

This change is the same across Templates, Blocks, and Kits. However, I assume Block settings don't matter since v3 library will be powered by the Patterns site.

Please let me know if you there are any questions about these. Thanks.

[JohnPixle]

Hey, few things about the library. It's a good start, but have some questions and spotted some things:

1. Error when Importing pattern.

I am getting this error when trying to import. Maybe it is related to the new settings page ? or not...

This is the template I published.

2. Screenshots / thumbnails

I know you said it's not working yet, but just a heads-up that I tried with a manual image and still did not work. Going to need the flexibility to override the automated screenshots with a manual one if needed.

3. Publishing a Style Kit Error

I published a Style Kit, and It got imported. However, it triggered the following error:

4. Publishing page template

I published one test template as a page from a template kit but it did not show up. I guess this is because I created the kit in settings but did not enable it? Let me know when I can do that.

Overall, I think things appear to be working, just some fundamental tweaks and we should be good to go with design production.

[JohnPixle]

@mauryaratan For whenever you see this, here is a summary of what we discussed yesterday:

Library UI:

• [x] From the library boxes, let's remove the part with the pattern name.
• [x] Make library popup fullscreen in the editor
• [x] The sidebar with the pattern categories can be narrower. It's in px I think. Feel free to reduce it if you want.

Other things:

• [x] Cannot import Style Kits. I still get the same error.
• [x] SVGs are not being imported. That's important. Here's an Elementor doc that might be handy.
• [x] Need the automatic screenshots. It was 40% screenshotting yesterday. 🙈

[JohnPixle]

Adding from Slack a few more things:

• [x] Auto screenshots do not update I would also like to point the attention to the fact that after making a visual change to a pattern in the library, the auto screenshot does not get updated after saving.

Yes, I synced the library. example:

Pattern: https://preview.analogwp.com/designsystem/?elementor_library=content-4

The screenshot is the old one:

• [x] Need a way to bulk-update auto-screenshots Also I think we will need a button somewhere or a command to bulk-generate screenshots. This will be useful in case we want to make a future change in the global SK that the patterns use (e.g. btn color or font family).

[lushkant]

Hey, few things about the library. It's a good start, but have some questions and spotted some things:

1. Error when Importing pattern.

I am getting this error when trying to import. Maybe it is related to the new settings page ? or not...

This is the template I published.

2. Screenshots / thumbnails

I know you said it's not working yet, but just a heads-up that I tried with a manual image and still did not work. Going to need the flexibility to override the automated screenshots with a manual one if needed.

3. Publishing a Style Kit Error

I published a Style Kit, and It got imported. However, it triggered the following error:

4. Publishing page template

I published one test template as a page from a template kit but it did not show up. I guess this is because I created the kit in settings but did not enable it? Let me know when I can do that.

Overall, I think things appear to be working, just some fundamental tweaks and we should be good to go with design production.

@JohnPixle Quick note, 1 and 3 have been resolved in our latest releases.

[lushkant]

@mauryaratan For whenever you see this, here is a summary of what we discussed yesterday:

Library UI:

• [x] From the library boxes, let's remove the part with the pattern name.
• [x] Make library popup fullscreen in the editor
• [x] The sidebar with the pattern categories can be narrower. It's in px I think. Feel free to reduce it if you want.

Other things:

• [x] Cannot import Style Kits. I still get the same error.
• [x] SVGs are not being imported. That's important. Here's an Elementor doc that might be handy.
• [x] Need the automatic screenshots. It was 40% screenshotting yesterday. 🙈

@JohnPixle currently there is no way to alter Elementor editor body classes from which we could switch the size of popup conditionally for our old and new container library.

So now if we were to change the size for patterns library it will also apply to the old library, are you okay with that?

[JohnPixle]

So now if we were to change the size for patterns library it will also apply to the old library, are you okay with that?

Absolutely, no problem. Let this apply to the old library as well.