# How would one create a pattern with custom blocks **URL:** https://discourse.roots.io/t/how-would-one-create-a-pattern-with-custom-blocks/26745 **Category:** radicle **Created:** 2024-02-20T18:09:06Z **Posts:** 6 ## Post 1 by @wispyco — 2024-02-20T18:09:06Z I am not to familiar with blocks in Gutenberg yet, but I have been able to edit the default ones in `scripts/editor` I am wondering if there is a Radicle type way or other recommended way to create patterns from blocks. ![Screenshot 2024-02-20 at 11.07.57 AM](https://discourse.roots.io/uploads/default/original/2X/f/febeef08f51d51f62d4dd27c072e286602572384.png) --- ## Post 2 by @strarsis — 2024-02-20T19:47:28Z As `radicle` is based on/compatible with Sage, this Sage 10 FSE example could be helpful: > > > //github.com/strarsis/sage10-fse/tree/master/patterns --- ## Post 3 by @wispyco — 2024-02-26T19:13:42Z Does this work with Radicle theme configuration. I am not sure it meets the requirements in this repo you linked ``` # Requirements A patched roots/acorn package is used by the theme as theme runtime dependency (in theme composer.json) which loader preserves the block template paths. remove_theme_support('block-templates') must be absent, as FSE will not work otherwise (important). templates/ directory, index.html and theme.json (see the FSE-specific theme files below). ``` --- ## Post 4 by @strarsis — 2024-02-26T21:26:38Z Correct, the patched `acorn` package is important, then `remove_theme_support('block-templates')` must be absent and the `templates/index.html` and `theme.json` must be present in the theme. --- ## Post 5 by @wispyco — 2024-02-29T18:53:29Z Do I need to add this entire block to the composer.json? ``` "repositories": [ { "url": "https://github.com/strarsis/acorn", "type": "vcs" } ], "require": { "php": "^8.0", "roots/acorn": "dev-patch-1" }, ``` --- ## Post 6 by @strarsis — 2024-02-29T20:25:56Z Yes, or alternatively use this other PR that also fixes the issue but has some improvements: > > > While we already have a pull request (PR) for full-site editing (FSE) support by… @strarsis (#141), this PR further enhances these modifications and now supports hybrid templates (Blade-PHP and FSE block templates, currently with priority given to the latter). > > ### Requirements theme > > To enable FSE support, the theme (`sage`) **requires** some modifications: > > 1. Since we use `wp_is_block_theme()` to check for FSE themes when altering the theme hierarchy, `templates/index.html` needs to exist. > 2. Currently `sage` [removes theme support for FSE](https://github.com/roots/sage/blob/be5281cdd178cb1faba9d8bba8185d6f6c1c4caf/app/setup.php#L52) - we need to remove / comment out this line. > 3. Because the generated CSS for blocks will be created in `wp_head()` action hook, the [current position](https://github.com/roots/sage/blob/be5281cdd178cb1faba9d8bba8185d6f6c1c4caf/index.php#L14) of the `view(...)->render()` method is too late and would result in empty styles for rendered blocks. Therefor, we need to [call it prior to `wp_head()`, store it in a temporary variable and echo it later](https://github.com/dsturm/sage/blob/5912c37dad81dcc2770b6f809f6b5ffa79ab4ac1/index.php#L6). > > ### Test this PR > > Optionally create a new Bedrock project > ```bash > composer create-project roots/bedrock > ``` > > Use / require acorn fork and setup (minimal) prepared sage theme > ```bash > # Require PR / fork > composer config repositories.acorn-fse vcs https://github.com/dsturm/acorn > composer require roots/acorn:dev-fse > # Clone new (sage) theme > cd web/app/themes > git clone -b fse https://github.com/dsturm/sage sage-fse > cd sage-fse > # Build > composer i -o && yarn && yarn build > # Activate theme > wp theme activate sage-fse > ``` > > ### Ideas > > To use block patterns like `header` or `footer` in blade templates / views, I wrote [two directives](https://github.com/dsturm/sage/blob/5912c37dad81dcc2770b6f809f6b5ffa79ab4ac1/app/Providers/ThemeServiceProvider.php#L34) which are currently located in my [prepared `sage` fork](https://github.com/dsturm/sage), but should be located in `roots/acorn`: > > [**@blocktemplate('template-part')**](https://github.com/dsturm/sage/blob/5912c37dad81dcc2770b6f809f6b5ffa79ab4ac1/app/Providers/ThemeServiceProvider.php#L39) > > This will render the specified block part (i.e. `header`) and fallback, if FSE is not enabled. > ```blade > > ``` > > [**@parseblocks**](https://github.com/dsturm/sage/blob/5912c37dad81dcc2770b6f809f6b5ffa79ab4ac1/app/Providers/ThemeServiceProvider.php#L36) > > If FSE is supported, this will render all blocks. > > ```blade > @parseblocks > > > @endparseblocks > ``` > > ### Questions > > 1. Which template type should be given priority: FSE or Blade? > 2. Do we need configuration for FSE options (in `config/view.php`) - like enabling/disabling FSE or setting template hierarchy priority? > 3. Should we include the directives into `roots/acorn`? > 5. How should we handle the FSE requirements. Should we have a `fse:init` command for acorn which will publish stubs and ensure we do not have `remove_theme_support('block-templates')`? > > ### Useful resources > - https://discourse.roots.io/t/full-site-editing-fse-frontend-doesnt-load-template/21574/27 > - https://fullsiteediting.com/lessons/how-to-use-php-templates-in-block-themes/#h-making-sure-that-wordpress-loads-the-block-css Or the one from the Sage 10 FSE sample as you posted above: [https://github.com/strarsis/sage10-fse/blob/e7bc7db0bd8b4b8876aca7b521d8c4b970c9b876/composer.json#L41-L50](https://github.com/strarsis/sage10-fse/blob/e7bc7db0bd8b4b8876aca7b521d8c4b970c9b876/composer.json#L41-L50)