WordPress Gutenberg Blocks for NL Design System components. Authors of WordPress websites can now use NL Design System components to compose their pages. This repository is maintained by the NL Design System community.
Community blocks hebben nu server side rendering voor de frontend. Doordat dit nog niet in de backend zit gaat dat nog stuk wanneer er een breaking change in een component zit. Door ook server side rendering toevoegen aan de backend kunnen we updates van de HTML structuur en classnames makkelijk doen zonder dat er content gemigreerd hoeft te worden.
Is dit snel genoeg?
Kunnen React liefhebbers hier mee uit de voeten?
Testje: update html structuur pakt goed uit zonder migratie
distanced variant: I don't think this one is needed as part of the public API
Den Haag Detail: I would like to investigate if this could be part of a figure caption component instead
edit.js
useLayoutEffect to remove <meta charset="utf-8"> from copy-and-paste actions. Would it also work to perform this sanitization action in save.js instead?
save.js
save.js and edit.js have code duplication for rendering the variation classes, probably good to refactor this to avoid these implementations to become out of sync
this should probably use a design token, perhaps a new common token for selection. In high contrast mode selection should be Highlight/HighlightText.
comment mentions there is a problem with this approach though: // HSL instead variable, CSS Variables won't load at this point.
.denhaag-theme a:not(.denhaag-link)
why is it necessary to style links that are not part of the design system?
perhaps we can refactor this to .denhaag-theme a:not(.denhaag-link) { @include utrecht-html-a }. Perhaps the utrecht-html-a mixin should be updated to match & instead of a for this to work.
&[disabled="disabled"]: disabled is not a valid attribute for links. Perhaps use aria-disabled instead?
&[target="_blank"]:after: is the external link icon really this imporant? There are accessibility issues with using background images for icons (forced colors mode specifically)
Allowed levels go from 2 to 5. I can see that heading 1 is reserved for the page title, and that heading 6 is not in use by Den Haag. I think at least heading 6 should be available.
tag: I would suggest to use level instead of tag, referring to aria-level.
tagShownAs: the Utrecht heading component uses appearance for this, referring to the CSS property appearance.
"style": ["ncb-denhaag-typography"]: I wish we could split this up into heading and paragraph styles, and not include the paragraph styles here.
class-heading.php
The JSDoc comment incorrectly refers to The Paragraph class.
assets/scripts/save.js
I suppose it would be convenient if the UtrechtHeading component would offer useHeading so it would be possible to do the following:
role="presentation" : The Den Haag divider component is presentational only, and this is rendered correctly. Is it really the intention to include the presentational divider as gutenberg, or should we offer the semantic Utrecht separator instead?
Overwegen om te hernoemen, bijvoorbeeld naar download. Bedenk wel dat er ook een verwijder-upload component in het formulier kan zitten die misschien hetzelfde design heeft.