Another great beta release! Thank you @charlie for all of the changes incorporated into this round. A few comments:
1. Possible Issue: I was playing around with an interesting concept. The concept isn’t really relevant to the issue but it might provide some context so here’s the backstory:
a. I was attempting to create a faux ‘load more’ button using a formula on a looper provider count field Something like: {{{{ looper.count }} + {{ url.param({"key":"load"}) }} }} where the url ‘load’ key would pass an always incrementing value like ?load={{ {{ url.param({"key":"load"}) | default('0') }} + 2 }}
b. However, when attempting this, nothing seemed to work. That url parameter on the button with ?load={{ {{ url.param({"key":"load"}) | default('0') }} + 2 }} simply did this to the url: /blog/?load={{%20{{%20url.param({"key":"load"})%20|%20default(%270%27)%20}}%20+%202%20}}
c. And even if it was passing the correct value into the url the looper provider wasn’t changing the count at all. But here’s where the interesting part comes in. If I change all of the Dynamic Content 2.0 formatting back to 1.0 formatting but still use the twig formula all works perfectly in this setup. So looper provider = {{ {{dc:looper:count}} + {{dc:url:param key="load"}} }} and button url =
?load={{{{dc:url:param key="load" fallback="0"}} + 2 }}
So in a nutshell, we don’t have to get my experimental setup working it’s more a question as to why the Dynamic Content 2.0 syntax doesn’t appear to be working?
2. Opinionated Preference / Thoughts The new font selector is awesome but for quick selection feels a little bit distracting. I do love that you’ve built in the option to show / hide the expanded font family with preview. What do you think about the following:
a. To get the default picker input to look the same as the native weight input, if you added font-size: var(--fs-input) and font-weight: var(--fw-input) back, it would get these looking more uniform:
Adding .tco-form-font-picker .tco-picker-swatch>div {padding:var--d-input-padding-y) var(--d-input-padding-x); would balance it out padding-wise as well.
b. I also played around a bit with the idea of de-emphasizing the font category headlines, shrinking down the size of the fonts themselves to make the browsing process a bit cleaner, and reducing the width when the expansion previews aren’t active so that the selector looks more like this:
For context I was just playing around with values here but something along these lines is where I ended up: .infinite-scroll-component h4.tco-app-standard-padding { font-size: 10px; text-transform: uppercase; margin: 1em 0em;
c. I also changed the padding and font size of the individiual fonts to match the --fs-input and --fw-input variables from the other pickers. So something like .tco-font-family-picker-item .tco-app-standard-padding { padding:0.25em; font-size: var(--fs-input); font-weight: var(--fw-input);
d. I also added a consistent CS accent hover color. Currently it’s grey but think it should be blue. I didn’t use the variable here but something like .tco-font-famil-picker-item:hover {background: #048df3;}
