feature/design-tokens-module - #20
Draft
d4mation wants to merge 33 commits into
Draft
Conversation
…eElement, ResizeObserver global)
…sureRangeControl to it
…readOnly + actions)
…r controls The override branch of `SinglePopColorControl` and `InlinePopColorControl` hard-filtered the swatch list down to `kb-palette-*` slugs, dropping any other palette-backed colors (e.g. a consumer projecting colors into the global-palette slots). Route the computed swatch list through an `applyFilters` seam (`kadence.components.popColorControl.colors`) in both modes, passing the full unfiltered palette and the override flag as context. The seam is strictly additive: with no listener registered the built-in filtered list is returned unchanged, so default behavior is byte-identical. Consuming plugins can augment or replace the swatch list without this package knowing about their color model, mirroring the existing `@wordpress/hooks` seam in `common/control-extensions.js`.
…ld always present
…ld always present
…eal disabled attributes
…orOutput The pop color controls painted their swatch tiles and the selected-value preview straight from the raw swatch value, so only a literal hex (or the hardcoded palette1..9 slugs) rendered. Delegate the final display resolution to `KadenceColorOutput`, which routes through the `kadence.helpers.colorValue` filter: a token reference resolves to its `var(--kb-token--<id>)`, a palette slug to its `var(--global-*)`, and a literal (hex/rgba/var) is returned unchanged (idempotent). This lets a consumer store a token-referencing value on a swatch and have it render correctly in the control, without this package knowing about any token vocabulary.
[DTM] SOFT-3906: dimension/border/range controls — token-agnostic extension seam
[DTM] SOFT-3907: box-shadow control — token-agnostic extension seam
[DTM] SOFT-3906 [base] Integration base for token-agnostic control extension seams
…eference The color picker (react-color) needs a literal color; when the current value is a token reference or palette slug the control was passing that raw string through, so the picker fell back to black. Flatten it first: resolve through KadenceColorOutput to its CSS var, then read the computed value off the document root. A literal (hex/rgba) passes through unchanged. Preview/indicator still receive the live `var(--kb-token--<id>)` so they re-tint under the active palette.
…rol-override-seam
…lution The swatch-list filtering (override + `kadence.components.popColorControl.colors` seam), the `kadence_blocks_params` config parse, and the picker's concrete-color flattening were duplicated verbatim in `SinglePopColorControl` and `InlinePopColorControl`. Extract them to `src/common/pop-color.js` (`getKadenceColorConfig`, `getPopColorSwatches`, `toConcreteColor`) and have both controls call the shared helpers, so the two stay in lock-step.
…e-seam SOFT-3870: token-agnostic swatch seam + KadenceColorOutput display on the pop color controls
8 tasks
Routes the font-family select in both typography controls through the package's existing `controlEditor` seam, and accepts the same neutral `context` prop `border-control` already threads. Extensibility only: with no listener registered both controls render exactly as before, and no consumer vocabulary enters this package. The seam is needed rather than optional. The family select gates the font weight / style / subset selects behind the same `onFontFamily` prop, so a consumer cannot drop the prop to substitute its own picker without silently losing those three controls too. `onTypoFontPick` adapts this package's own storage shape to the seam's contract, per the seam docblock's rule that a control speaking a different shape adapts on its own side: a listener reads `fontFamily` off the context and hands a plain family string back, never a react-select option. Resolving the family to its own option first keeps every google/variant/weight/subset derivation in `onTypoFontChange` instead of forking a second copy. Also guards `componentDidMount`'s `configuration` read behind the same `typeof kadence_blocks_params !== 'undefined'` check every other read in that method already uses. The global belongs to the consuming plugin, so a control that throws a `ReferenceError` without it cannot be rendered standalone — which is precisely what a seam consumer needs to be able to do, and what the new test does.
`KadenceWebfontLoader` appended no stylesheet at all, so a block using a Google font rendered in a fallback face in the editor with nothing reported anywhere. Three defects stacked, and each alone was enough to lose the font. **It read the wrong prop.** It looked only at `config.google.families`, while every one of the ~19 call sites for this export passes a block's `typography` attribute. `config` was `undefined`, the guard short-circuited, and the loader did nothing. `config` keeps working for the callers that pass it. **It never loaded on mount.** `componentDidMount` set `mounted` through `setState` and then called `loadFonts()` in the same synchronous pass, so the flag it checked was still false. `componentDidUpdate` only reloads on a changed device or changed props, so nothing loaded afterwards either. Mounted-ness is an instance field now, set before the load. **Its URLs were invalid whenever a variant was present.** The colon form (`Inter:700italic`) is `webfontloader` syntax and this talks to css2, which answers 400 to it. Variants are now parsed and re-expressed as `ital,wght` axes. Derivation moves to `font-request.js`, pure and DOM-free, so both prop shapes converge in one tested place. Requests are deduplicated by family AND axes, so one family at two weights loads both while the same font asked for twice loads once — the loader requests exactly what it was handed and nothing more.
`package.json` and `package-lock.json` were swept into the webfont-loader fix by a `git add -A`; they carried a local `npm link` setup, not an intended change. Dropping `@kadence/helpers` and `@kadence/icons` as peers is not something a loader fix should do, so both files return to what the base branch has.
…as absent Three narrow gaps in the same pass: - A load pass only appends, so a block that switched from Inter to Roboto kept the Inter stylesheet until it unmounted. A prop change now prunes the stylesheets the props no longer name, leaving the surviving ones in place so a face the canvas is painting with is never unregistered and re-fetched. - A `typography` entry carrying `variant: null` (or a blank one) was read as upright 400, throwing away the `weight` and `style` sitting beside it. Absent now covers null and blank as well as missing. - An empty `typography` array fell through to a legacy `config`, loading a font for a block that had named none. `config` is now read only when `typography` is not an array at all.
The css2 URL builder substituted `+` for spaces without encoding, having dropped the `encodeURIComponent` the previous builder wrapped the family in. That encoding was applied in the wrong order there -- it ran after the substitution, so the `+` it had just inserted came back as %2B and asked Google for a family with a literal plus in its name, which is a 400 for every multi-word family. Dropping it fixed the 400 and lost the escaping with it. Encoding now runs first and only the encoded space is narrowed back to the `+` css2's own documentation uses. The axes are still appended raw, because `:` and `@` are css2 syntax rather than part of the family. Every family Google publishes is alphanumeric and spaces, so this is not for them: `family` is whatever a block stored, and a name carrying `&` or `#` would otherwise end the query string early and change what is requested.
…aphy-prop [DTM] SOFT-4207 [2/2]: load the font KadenceWebfontLoader was actually given
|
Important Draft PR not reviewedDraft PRs are not automatically reviewed by default.
To automatically review draft PRs, update your CodeRabbit configuration: reviews:
auto_review:
drafts: trueComment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.