From 2dfa273b2f7b91376a4533ca744dad8e505d7521 Mon Sep 17 00:00:00 2001 From: Christophe Jossart Date: Tue, 18 Jun 2024 15:42:22 +0200 Subject: [PATCH 1/2] chore(SLB-415): gutenberg editor preview --- packages/drupal/gutenberg_blocks/css/edit.css | 38 ++++++ .../gutenberg_blocks/gutenberg_blocks.module | 19 +++ packages/drupal/gutenberg_blocks/src/index.ts | 1 + .../drupal/gutenberg_blocks/src/preview.ts | 126 ++++++++++++++++++ 4 files changed, 184 insertions(+) create mode 100644 packages/drupal/gutenberg_blocks/src/preview.ts diff --git a/packages/drupal/gutenberg_blocks/css/edit.css b/packages/drupal/gutenberg_blocks/css/edit.css index 1ef6f0086..7c90c5d90 100644 --- a/packages/drupal/gutenberg_blocks/css/edit.css +++ b/packages/drupal/gutenberg_blocks/css/edit.css @@ -100,3 +100,41 @@ .gutenberg__editor .edit-post-visual-editor__content-area a.no-underline { text-decoration: none; } + +/* This is set by the Gutenberg module */ +/* Provide a patch to remove !important */ +/* +@media screen and (min-width: 85.375rem) { + .interface-complementary-area.edit-post-sidebar { + width: 380px !important; + } +} +*/ + +.gutenberg__editor .drupal-preview-sidebar { + min-width: 350px; + border-right: 1px solid #e0e0e0; + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.gutenberg__editor .drupal-preview-sidebar--iframe-wrapper iframe { + height: 100vh; + border: none; +} + +.gutenberg__editor .drupal-preview-sidebar .interface-complementary-area-header, +.gutenberg__editor + .drupal-preview-sidebar + .interface-complementary-area.edit-post-sidebar { + width: 100%; +} + +.gutenberg__editor .drupal-preview-sidebar--header { + margin: 10px; +} + +.gutenberg__editor .drupal-preview-sidebar--header button { + margin-right: 5px; +} diff --git a/packages/drupal/gutenberg_blocks/gutenberg_blocks.module b/packages/drupal/gutenberg_blocks/gutenberg_blocks.module index cf3abeeda..6fe4ca00c 100644 --- a/packages/drupal/gutenberg_blocks/gutenberg_blocks.module +++ b/packages/drupal/gutenberg_blocks/gutenberg_blocks.module @@ -4,6 +4,7 @@ use Drupal\Core\Form\FormStateInterface; use Drupal\Core\Language\LanguageInterface; use Drupal\silverback_gutenberg\Utils; use Drupal\webform\Entity\Webform; +use Drupal\Core\Url; /** * Implements hook_library_info_alter(). @@ -26,6 +27,24 @@ function gutenberg_blocks_form_node_form_alter(&$form, FormStateInterface $form_ /** @var \Drupal\node\NodeInterface $node */ $node = $form_state->getFormObject()->getEntity(); if (Utils::getGutenbergFields($node)) { + $form['actions']['preview_link'] = [ + '#type' => 'link', + '#title' => t('Preview'), + '#url' => Url::fromRoute(''), + '#attributes' => [ + 'class' => [ + 'button', + 'button--primary', + ], + ], + ]; + // Add preview url for editor preview. + /** @var \Drupal\silverback_external_preview\ExternalPreviewLink $externalPreviewLink */ + $externalPreviewLink = \Drupal::service('silverback_external_preview.external_preview_link'); + $previewUrl = $externalPreviewLink->createPreviewUrlFromEntity($node)->toString(); + $form['#attached']['drupalSettings']['preview'] = [ + 'previewUrl' => $previewUrl, + ]; // Load all open webforms and populate them into drupalSettings. $languageManager = \Drupal::languageManager(); diff --git a/packages/drupal/gutenberg_blocks/src/index.ts b/packages/drupal/gutenberg_blocks/src/index.ts index 4b70a94bc..9a846e2b3 100644 --- a/packages/drupal/gutenberg_blocks/src/index.ts +++ b/packages/drupal/gutenberg_blocks/src/index.ts @@ -1,4 +1,5 @@ import './customisations'; +import './preview'; import './blocks/hero'; import './blocks/content'; import './blocks/heading'; diff --git a/packages/drupal/gutenberg_blocks/src/preview.ts b/packages/drupal/gutenberg_blocks/src/preview.ts new file mode 100644 index 000000000..de03f74a1 --- /dev/null +++ b/packages/drupal/gutenberg_blocks/src/preview.ts @@ -0,0 +1,126 @@ +(($, Drupal, once, drupalSettings) => { + Drupal.behaviors.gutenbergBlocksPreview = { + /* @ts-ignore */ + attach: function (context) { + $(once('gutenbergBlocksPreview', '.gutenberg-full-editor', context)).each( + function () { + $('#edit-preview-link').on('click', function (e) { + e.preventDefault(); + + const previewUrl = drupalSettings.preview.previewUrl; + const previewSizes = [ + { + label: Drupal.t('Mobile'), + id: 'mobile', + width: 375, + height: 725, + iconPath: + '/modules/contrib/silverback_external_preview/icons/mobile.svg', + }, + { + label: Drupal.t('Tablet'), + id: 'tablet', + width: 1024, + height: 824, + iconPath: + '/modules/contrib/silverback_external_preview/icons/tablet.svg', + }, + { + label: Drupal.t('Laptop'), + id: 'laptop', + width: 1366, + height: 786, + iconPath: + '/modules/contrib/silverback_external_preview/icons/laptop.svg', + }, + { + label: Drupal.t('Desktop'), + id: 'desktop', + width: 1920, + height: 1080, + iconPath: + '/modules/contrib/silverback_external_preview/icons/desktop.svg', + }, + { + label: Drupal.t('Full'), + id: 'full', + width: -1, + height: -1, + iconPath: + '/modules/contrib/silverback_external_preview/icons/full.svg', + }, + ]; + + let previewButtons = ''; + previewSizes.forEach((size) => { + previewButtons += ` + `; + }); + + const previewSidebarMarkup = ` +
+
+
+ ${Drupal.t('Preview')} + +
+
+ ${Drupal.t('Preview')} + +
+
+
+ ${previewButtons} +
+
+ +
+
+
+
`; + + const $previewSidebar = $('.drupal-preview-sidebar'); + if (!$previewSidebar.length) { + $('.interface-interface-skeleton__body').prepend( + previewSidebarMarkup, + ); + $('.drupal-preview-sidebar .components-panel__header button').on( + 'click', + function () { + $('.drupal-preview-sidebar').remove(); + }, + ); + previewSizes.forEach((size) => { + $('.drupal-preview-sidebar--button__' + size.id).on( + 'click', + function () { + const windowFeatures = + size.width !== -1 && size.height !== -1 + ? `resizable,height=${size.height},width=${size.width}` + : `resizable,height=${screen.height},width=${screen.width}`; + window.open(previewUrl, 'preview', windowFeatures); + }, + ); + }); + } else { + $('.drupal-preview-sidebar').remove(); + } + }); + }, + ); + }, + }; + /* @ts-ignore */ +})(jQuery, Drupal, once, drupalSettings); From 6dba0f55cf654f1948c8afa31504c5985f377d65 Mon Sep 17 00:00:00 2001 From: Christophe Jossart Date: Thu, 20 Jun 2024 15:36:05 +0200 Subject: [PATCH 2/2] chore(SLB-415): remove !important on sidebar --- apps/cms/composer.json | 3 ++- .../gutenberg_remove-important-sidebar.patch | 16 ++++++++++++++++ packages/drupal/gutenberg_blocks/css/edit.css | 10 ---------- packages/drupal/gutenberg_blocks/src/preview.ts | 2 +- 4 files changed, 19 insertions(+), 12 deletions(-) create mode 100644 apps/cms/patches/gutenberg_remove-important-sidebar.patch diff --git a/apps/cms/composer.json b/apps/cms/composer.json index 50427ad02..d2860b8d1 100644 --- a/apps/cms/composer.json +++ b/apps/cms/composer.json @@ -102,7 +102,8 @@ "Autosave preview": "./patches/fetch-entity.patch" }, "drupal/gutenberg": { - "Gutenberg enabled hook": "https://www.drupal.org/files/issues/2024-05-07/gutenberg_enabled_hook_3445677-2.patch" + "Gutenberg enabled hook": "https://www.drupal.org/files/issues/2024-05-07/gutenberg_enabled_hook_3445677-2.patch", + "Remove !important from sidebar": "./patches/gutenberg_remove-important-sidebar.patch" } }, "patchLevel": { diff --git a/apps/cms/patches/gutenberg_remove-important-sidebar.patch b/apps/cms/patches/gutenberg_remove-important-sidebar.patch new file mode 100644 index 000000000..643923a03 --- /dev/null +++ b/apps/cms/patches/gutenberg_remove-important-sidebar.patch @@ -0,0 +1,16 @@ +diff --git a/css/claro.css b/css/claro.css +index 720c3a8..9c5ad05 100644 +--- a/css/claro.css ++++ b/css/claro.css +@@ -44,8 +44,8 @@ + + @media screen and (min-width: 85.375rem) { + .interface-complementary-area.edit-post-sidebar { +- width: 380px !important; ++ width: 380px; + } + } + +-/*# sourceMappingURL=claro.css.map */ +\ No newline at end of file ++/*# sourceMappingURL=claro.css.map */ diff --git a/packages/drupal/gutenberg_blocks/css/edit.css b/packages/drupal/gutenberg_blocks/css/edit.css index 7c90c5d90..bd7f026ff 100644 --- a/packages/drupal/gutenberg_blocks/css/edit.css +++ b/packages/drupal/gutenberg_blocks/css/edit.css @@ -101,16 +101,6 @@ text-decoration: none; } -/* This is set by the Gutenberg module */ -/* Provide a patch to remove !important */ -/* -@media screen and (min-width: 85.375rem) { - .interface-complementary-area.edit-post-sidebar { - width: 380px !important; - } -} -*/ - .gutenberg__editor .drupal-preview-sidebar { min-width: 350px; border-right: 1px solid #e0e0e0; diff --git a/packages/drupal/gutenberg_blocks/src/preview.ts b/packages/drupal/gutenberg_blocks/src/preview.ts index de03f74a1..1fdd5e874 100644 --- a/packages/drupal/gutenberg_blocks/src/preview.ts +++ b/packages/drupal/gutenberg_blocks/src/preview.ts @@ -4,7 +4,7 @@ attach: function (context) { $(once('gutenbergBlocksPreview', '.gutenberg-full-editor', context)).each( function () { - $('#edit-preview-link').on('click', function (e) { + $('#edit-preview-link').on('click', function (e: Event) { e.preventDefault(); const previewUrl = drupalSettings.preview.previewUrl;