Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

WKND Chapter 5 Style System - Style Icon (Paintbrush) not showing up for Title Component

infiniteshi
Level 2
Level 2

Hi, I was wondering if anybody has ran into a similar issue or knows how to solve the following issue:
****Background****
I've following the instructions in WKND Tutorial Chapter 5 Style System. My local author instance is at version 6.5.0 (jar file, not the cloud version), and coming from the resolution to this issue https://github.com/adobe/aem-guides-wknd/issues/283, I downloaded service pack 6.5.10 from distribution center and uploaded it to my local instance successfully. Things all worked as expected in the tutorial until I tried to Add a Title Policy

****Problem Description****
With Title Policy set and saved following the steps below:

Policy Title *: WKND Title

Properties > Styles Tab > Add a new style

Underline : cmp-title--underline
The expected underline did show up in localhost:8082 (because 8080 and 8081 are preoccupied)
Screen Shot 2021-10-28 at 1.22.11 PM.png
but it can't be displayed in http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html

because I don't have the style icon (paintbrush Screen Shot 2021-10-28 at 1.19.56 PM.png) available 

Screen Shot 2021-10-28 at 1.02.26 PM.png


****What I've tried/ Other information****
1. I examined the model in CRX/DE as shown below in the screenshot, things look fine?
Screen Shot 2021-10-28 at 1.04.20 PM.png
 
2. I confirmed that the page uses "Article Page Template"Screen Shot 2021-10-28 at 1.06.29 PM.png
Because I've tried creating "WKND Title" policy so many times, you'll notice below that each of them has the style tab set (i.e cmp-title-underline) added). Theoretically at least one should do its job. 
Screen Shot 2021-10-28 at 1.08.37 PM.png
3. Even before I created my own title policy named "WKND Title", I notice a policy called "WKND Title - Global Styles" came out of the box (I'm on chapter 5 tutorial/style-system-start branch by the way) wherein all the settings I need are already in place. Despite this I still don't see the style icon/paintbrush showing up above the title component.
Screen Shot 2021-10-28 at 1.11.54 PM.png
Screen Shot 2021-10-28 at 1.16.32 PM.png

Can anybody please help?

3 Replies
infiniteshi
Level 2
Level 2

Update: I used a hacky way to partially solved the problem: checked out the style-system-solution branch, used mvn goals to build and deploy that code base, then I got the style icon / paintbrush. When I switched back to style-system-solution branch, the style icon is not gone. I hoped this would solve the whole issue so that I could at least move on to the next chapter, but like I said, it only partially helped: the style icon is available now with "Underline" as an option in the drop-down, but selecting it does nothing. The underline effect is still not applied.
Screen Shot 2021-10-28 at 8.47.51 PM.png

infiniteshi
Level 2
Level 2

Problem solved and this is how-to:
(1) I opened up in CRX/DE to locate where my policies are stored 
/conf/project_name/settings/wcm/policies/component_name/policy_randomNumber
(2) I saw about 8 title policies there for title from my previous attempts/experimentations, all with unique uuid but with the same name "WKND Title" and the same cmp-title-underline config. I believe this is the root cause of the symptoms described above. Essentially I had 8 policies to switch on and off and that might have confused AEM quite a bit. 
(3) I deleted all 8 "WKND Title" polices. Had to restart local AEM instance to have this change in effect. 
(4) After I rebooted local AEM instance, I cleaned up cmp-title-underline from the Page Policy (see my previous posts above to understand why I have to do this extra step) to have a clean slate, then added cmp-title--underline for the title component.
(5) Things start to click. I got the underline applied just on the specific title that should have it. In the screenshot below h1 title only.
Screen Shot 2021-11-01 at 12.43.06 PM.png

infiniteshi
Level 2
Level 2

I applied the underline style in the Page policy setting and now can see the desired underline style on the Page level, meaning that all the titles now have an underline. The title component's policy still isn't doing anything, meaning I couldn't add the underline just to the title level and now I can't remove the underline added by the Page, either. This tells me that _title.scss is working fine for the Page level only, something is wrong on the title component.
Screen Shot 2021-11-01 at 11.55.54 AM.png

If the title component is working for anybody here, could you please share a screenshot of your title component configuration (http://localhost:4502/crx/de/index.jsp#/apps/core/wcm/components/title/v2/) so that I can do a side-by-side comparison?
Below is mine:
Screen Shot 2021-11-01 at 12.13.02 PM.png