Giter VIP home page Giter VIP logo

nl-design-system / nlds-community-blocks Goto Github PK

View Code? Open in Web Editor NEW
1.0 2.0 0.0 1.51 MB

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.

License: European Union Public License 1.2

PHP 48.47% JavaScript 45.51% SCSS 6.00% Dockerfile 0.02%
nl-design-system wordpress wordpress-plugin

nlds-community-blocks's Introduction

NL Design System Community Blocks

This plugin adds Gutenberg blocks that implement the NL Design System to the WordPress block editor.

Dynamic block is created and adapted from https://developer.wordpress.org/block-editor/packages/packages-scripts/

Installation

Manual installation

  1. Upload the nlds-community-blocks folder to the /wp-content/plugins/ directory.
  2. cd /wp-contents/plugins/nlds-community-blocks
  3. pnpm install && pnpm run build
  4. Activate the NL Design System Community Blocks plugin through the 'Plugins' menu in WordPress.

Composer installation

  1. composer config repositories.nlds-community-blocks github https://github.com/nl-design-system/nlds-community-blocks
  2. composer require nl-design-system/nlds-community-blocks
  3. cd /wp-contents/plugins/nlds-community-blocks
  4. pnpm install && pnpm run build
  5. Activate the NL Design System Community Blocks plugin through the 'Plugins' menu in WordPress.

Coding Standards

Please remember, we use the WordPress PHP Coding Standards for this plugin! (https://make.wordpress.org/core/handbook/best-practices/coding-standards/php/) To check if your changes are compatible with these standards:

  • cd /wp-content/plugins/nlds-community-blocks
  • composer install (this step is only needed once after installing the plugin)
  • ./vendor/bin/phpcs --standard=phpcs.xml.dist .
  • See the output if you have made any errors.
    • Errors marked with [x] can be fixed automatically by phpcbf, to do so run: ./vendor/bin/phpcbf --standard=phpcs.xml.dist .

N.B. the composer install command also install a git hook, preventing you from committing code that isn't compatible with the coding standards.

Translations

wp i18n make-pot . languages/nlds-community-blocks.pot --exclude="node_modules/,vendor/" --domain="nlds-community-blocks"

cd languages && wp i18n make-json nlds-community-blocks-nl_NL.po --no-purge

Building

For the latest building commands check the package.json.

We have a watch command for the WordPress blocks and its assets. Due to the lack of support of the WP Block watcher we're calling the pnpm run start, for the assets we run pnpm run start-assets.

nlds-community-blocks's People

Contributors

robbert avatar matijs avatar hidde avatar paulacato avatar

Stargazers

Yvette Nikolov avatar

Watchers

Paul van Buuren avatar Wart Burggraaf avatar

nlds-community-blocks's Issues

Divider component review

assets/scripts/edit.js:

  • 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?

Heading component review

block.json:

  • srOnly: why is it necessary?
  • 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:
<RichText.Content value={ attributes.content } tagName={ `h${ attributes.tag }` } {...useHeading({ level, appearance})} />

Van design-token json naar Wordpress customizer MVP

  • metadata aan design tokens om token-type aan te geven voor de customizer
  • metadata aan design tokens om component groep en naam aan te geven voor de customizer
  • uitkleden van design tokens per component om te zorgen dat we alleen essentiele tokens in de customizer overhouden
  • script toevoegen aan style dictionary om design token json te converteren naar bestand wat customizer kan gebruiken
  • script toevoegen om customizer output weer in design tokens json te krijgen
  • export JSON uit customizer

Paragraph component review

assets/scripts/controls/ncb-paragraph-variation-control.js

  • 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

assets/styles/editor.scss:

  • .utrecht-paragraph::selection { background: hsl(117 28% 87%); }`
    • 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)

Verwijderen den haag thema

Het den haag thema wordt nu standaard bijgeleverd met de wordpress community blocks, die moet losgekoppeld worden

Default theme voor Open Web Concept

Een mooi begin voor alle (nieuwe) gemeentes zodat er weinig instellingen nodig zijn als je begint

Waarschijnlijk een nieuw 'common' laag tussen 'brand' en heel veel component tokens.

Server side rendering voor backend

Datamodel community blocks los van HTMl structuur

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.