PHPackages                             amazeelabs/silverback\_gutenberg - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. amazeelabs/silverback\_gutenberg

ActiveDrupal-module[Utility & Helpers](/categories/utility)

amazeelabs/silverback\_gutenberg
================================

Adjusts Gutenberg for Amazee Labs needs.

2.6.1(9mo ago)143.7k↓13.3%[1 PRs](https://github.com/AmazeeLabs/silverback_gutenberg/pulls)GPL-2.0+PHP

Since Jun 22Pushed 9mo ago6 watchersCompare

[ Source](https://github.com/AmazeeLabs/silverback_gutenberg)[ Packagist](https://packagist.org/packages/amazeelabs/silverback_gutenberg)[ Docs](https://github.com/AmazeeLabs/silverback-mono/tree/development/packages/composer/amazeelabs/silverback_gutenberg#readme)[ RSS](/packages/amazeelabs-silverback-gutenberg/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (1)Versions (118)Used By (0)

Silverback Gutenberg
====================

[](#silverback-gutenberg)

Helps integrating Drupal's [Gutenberg module](https://www.drupal.org/project/gutenberg) into Silverback projects.

GraphQL directives
------------------

[](#graphql-directives)

This module provides a set of GraphQL directives that are picked up by the `amazeelabs/graphql_directives` module. This allows to easily expose Gutenberg blocks through a GraphQL schema.

### `@resolveEdtiorBlocks`

[](#resolveedtiorblocks)

Parse the raw output of a field at a given path and expose its content as structured block data. Allows to define `aggregated` and `ignored` blocks:

- `aggregated`: All subsequent blocks of these types will be merged into one `core/paragraph` block. In Gutenberg, standard HTML elements like lists, headings or tables are represented as separate blocks. This directive allows to merge them into one and simplify handling in the frontend.
- `ignored`: Blocks of these types will be ignored. This is useful for blocks that are not relevant for the frontend, like the `core/group` block. The block will simply not part of the result and any children are spread where the block was.

```
type Page {
  title: String! @resolveProperty(path: "title.value")
  content: [Blocks!]!
    @resolveEditorBlocks(
      path: "body.value"
      aggregated: ["core/paragraph", "core/list"]
      ignored: ["core/group"]
    )
}
```

### `@resolveEditorBlockType`

[](#resolveeditorblocktype)

Retrieve the type of gutenberg block. Useful for resolving types of a block union.

```
union Blocks @resolveEditorBlockType = Paragraph | Heading | List
```

### `@resolveEditorBlockMarkup`

[](#resolveeditorblockmarkup)

Extract inner markup of a block that was provided by the user via rich HTML.

```
type Text @type(id: "core/paragraph") {
  content: String @resolveEditorBlockMarkup
}
```

### `@resolveEditorBlockAttribute`

[](#resolveeditorblockattribute)

Retrieve a specific attribute, stored in a block.

```
type Figure @type(id: "custom/figure") {
  caption: String @resolveEditorBlockAttribute(key: "caption")
}
```

### `@resolveEditorBlockMedia`

[](#resolveeditorblockmedia)

Resolve a media entity referenced in a block.

```
type Figure @type(id: "custom/figure") {
  image: Image @resolveEditorBlockMedia
}
```

### `@resolveEditorBlockChildren`

[](#resolveeditorblockchildren)

Extract all child blocks of a given block.

```
type Columns @type(id: "custom/columns") {
  columns: [ColumnBlocks!]! @resolveEditorBlockChildren
}
```

LinkProcessor
-------------

[](#linkprocessor)

The main idea is that all links added to a Gutenberg page are

- kept in internal format (e.g. `/node/123`) when saved to Drupal database
- processed to language-prefixed aliased form (e.g. `/en/my-page`) when
    - they are displayed in Gutenberg editor
    - they are sent out via GraphQL

This helps to

- always display fresh path aliases
- be sure that the language prefix is correct
- update link URLs when translating content (e.g. `/en/my-page` will become `/fr/ma-page` automatically because it's `/node/123` under the hood)
- keep track of entity usage (TBD)

### Implementation

[](#implementation)

The module does most of the things automatically. Yet there are few things developers should take care of.

First, custom Gutenberg blocks which store links in block attributes should implement `hook_silverback_gutenberg_link_processor_block_attrs_alter`. See [`silverback_gutenberg.api.php`](./silverback_gutenberg.api.php) for an example.

Next, GraphQL resolvers which parse Gutenberg code should call `LinkProcessor::processLinks` before parsing the blocks. See [`DataProducer/Gutenberg.php`](../../../../apps/silverback-drupal/web/modules/custom/silverback_gatsby_test/src/Plugin/GraphQL/DataProducer/Gutenberg.php)for an example.

Validation
----------

[](#validation)

Custom validator plugins can be created in `src/Plugin/Validation/GutenbergValidator`

### Field level validation

[](#field-level-validation)

Example: to validate that an email is valid and required.

- the block name is `custom/my-block`
- the field attribute is `email` and the label `Email`

```