diff --git a/core/composer.json b/core/composer.json index ddcd1ce..aa25fa2 100644 --- a/core/composer.json +++ b/core/composer.json @@ -52,6 +52,7 @@ "drupal/big_pipe": "self.version", "drupal/block": "self.version", "drupal/block_content": "self.version", + "drupal/block_place": "self.version", "drupal/book": "self.version", "drupal/breakpoint": "self.version", "drupal/ckeditor": "self.version", diff --git a/core/misc/icons/bebebe/place-block.svg b/core/misc/icons/bebebe/place-block.svg new file mode 100644 index 0000000..26b8f73 --- /dev/null +++ b/core/misc/icons/bebebe/place-block.svg @@ -0,0 +1,10 @@ + + + + Slice 1 + Created with Sketch. + + + + + \ No newline at end of file diff --git a/core/misc/icons/ffffff/place-block.svg b/core/misc/icons/ffffff/place-block.svg new file mode 100644 index 0000000..3ee9b28 --- /dev/null +++ b/core/misc/icons/ffffff/place-block.svg @@ -0,0 +1,10 @@ + + + + Combined Shape + Created with Sketch. + + + + + \ No newline at end of file diff --git a/core/modules/block/src/Controller/BlockLibraryController.php b/core/modules/block/src/Controller/BlockLibraryController.php index eb176d8..8268493 100644 --- a/core/modules/block/src/Controller/BlockLibraryController.php +++ b/core/modules/block/src/Controller/BlockLibraryController.php @@ -107,6 +107,7 @@ public function listBlocks(Request $request, $theme) { $definitions = $this->blockManager->getSortedDefinitions($definitions); $region = $request->query->get('region'); + $destination = $request->query->get('destination'); $rows = []; foreach ($definitions as $plugin_id => $plugin_definition) { $row = []; @@ -132,6 +133,9 @@ public function listBlocks(Request $request, $theme) { if ($region) { $links['add']['query']['region'] = $region; } + if ($destination) { + $links['add']['query']['destination'] = $destination; + } $row['operations']['data'] = [ '#type' => 'operations', '#links' => $links, diff --git a/core/modules/block_place/block_place.info.yml b/core/modules/block_place/block_place.info.yml new file mode 100644 index 0000000..8ae7226 --- /dev/null +++ b/core/modules/block_place/block_place.info.yml @@ -0,0 +1,8 @@ +name: Place Blocks +type: module +description: 'Allow administrators to place blocks from any Drupal page' +package: Core (Experimental) +version: VERSION +core: 8.x +dependencies: + - block diff --git a/core/modules/block_place/block_place.libraries.yml b/core/modules/block_place/block_place.libraries.yml new file mode 100644 index 0000000..38a32c7 --- /dev/null +++ b/core/modules/block_place/block_place.libraries.yml @@ -0,0 +1,5 @@ +drupal.block_place: + version: VERSION + css: + theme: + css/block-place.css: {} diff --git a/core/modules/block_place/block_place.module b/core/modules/block_place/block_place.module new file mode 100644 index 0000000..65474f8 --- /dev/null +++ b/core/modules/block_place/block_place.module @@ -0,0 +1,84 @@ +' . t('About') . ''; + $output .= '

' . t('The Place Blocks module module allows you to place blocks from every page. For more information, see the online documentation for the Place Blocks module.', [':blocks-documentation' => 'https://www.drupal.org/documentation/modules/block_place/']) . '

'; + $output .= '

' . t('Uses') . '

'; + $output .= '

' . t('Block placement is specific to each theme on your site. This module allows you to place blocks in the context of your content pages') . '

'; + return $output; + } +} + +/** + * Implements hook_toolbar(). + */ +function block_place_toolbar() { + // Link to the current page with a query parameter. + $query = \Drupal::request()->query->all(); + $wrapper_class = ''; + $status_class = ''; + $description = ''; + if (isset($query['block-place'])) { + $status_class = 'active'; + $wrapper_class = 'is-active'; + $description = t('Exit Place block mode.'); + unset($query['block-place']); + unset($query['destination']); + } + else { + $status_class = 'inactive'; + $description = t('Show regions to Place blocks.'); + $query['block-place'] = '1'; + // Setting destination is both a work-around for the toolbar "Back to site" + // link in escapeAdmin.js and used for the destination after picking a + // block. + $query['destination'] = Url::fromRoute('')->toString(); + } + + // Remove on Admin routes. + $admin_route = \Drupal::service('router.admin_context')->isAdminRoute(); + // Remove on Block Demo page. + $admin_demo = \Drupal::routeMatch()->getRouteName() === 'block.admin_demo'; + $access = (\Drupal::currentUser()->hasPermission('administer blocks') && !$admin_route && !$admin_demo); + + // The 'Place Block' tab is a simple link, with no corresponding tray. + $items['block_place'] = [ + '#cache' => [ + 'contexts' => ['user.permissions', 'url.query_args'], + ], + '#type' => 'toolbar_item', + 'tab' => [ + '#access' => $access, + '#type' => 'link', + '#title' => t('Place block'), + '#url' => Url::fromRoute('', [], ['query' => $query]), + '#attributes' => [ + 'title' => $description, + 'class' => ['toolbar-icon', 'toolbar-icon-place-block-' . $status_class], + ], + ], + '#wrapper_attributes' => [ + 'class' => ['toolbar-tab', 'block-place-toolbar-tab', $wrapper_class], + ], + '#weight' => 100, + '#attached' => [ + 'library' => [ + 'block_place/drupal.block_place', + ], + ], + ]; + return $items; +} diff --git a/core/modules/block_place/block_place.services.yml b/core/modules/block_place/block_place.services.yml new file mode 100644 index 0000000..95d7375 --- /dev/null +++ b/core/modules/block_place/block_place.services.yml @@ -0,0 +1,6 @@ +services: + block_place.page_display_variant_subscriber.block: + class: Drupal\block_place\EventSubscriber\BlockPlaceEventSubscriber + arguments: ['@request_stack', '@current_user'] + tags: + - { name: event_subscriber } diff --git a/core/modules/block_place/css/block-place.css b/core/modules/block_place/css/block-place.css new file mode 100644 index 0000000..7fc37a0 --- /dev/null +++ b/core/modules/block_place/css/block-place.css @@ -0,0 +1,62 @@ +/* relative position is required for z-index so it's always "in front" */ +.place-block-region { + position: relative; + height: 36px; +} +/* show the drop-zone for blocks */ +.place-block { + top: 6px; + width: 100%; + padding: 5px; + box-shadow: 0 0 0 1px rgba(255,255,255,0.75); + outline: 1px dashed rgba(0,0,0,0.5); + position: absolute; + z-index: 500; + text-align: center; + white-space: nowrap; + transition: all .5s; +} +/* !importants are needed to override theme styles for links */ +.place-block a, +.place-block a.link { + font: .75rem "Lucida Grande","Lucida Sans Unicode",sans-serif !important; + text-align: center !important; + color: #777 !important; + background-color: #fff !important; + box-shadow: 2px 1px 1px rgba(0, 0, 0, 0.15) !important; + border: 1px solid #ddd !important; + border-radius: 50px; + width: 75px; + display: inline-block; + padding: 3px 6px; + cursor: pointer; +} +/* semi-transparent grey background is visible against all backgrounds */ +.place-block:hover { + background-color: rgba(200,200,200,0.25); +} +.place-block a:focus, +.place-block a.link:focus { + outline: none !important; +} +/* todo: figure out how to get the throbber to replace the text inside the button on click */ + +/* + * Styling for toolbar icon. + */ +.toolbar .block-place-toolbar-tab.is-active { + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%); + background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%); +} +.toolbar .toolbar-bar .block-place-toolbar-tab { + float: right; +} +[dir="rtl"] .toolbar .toolbar-bar .block-place-toolbar-tab { + float: left; +} +.toolbar-bar .toolbar-icon-place-block-active:before { + background-image: url(../../../misc/icons/ffffff/place-block.svg); +} +.toolbar-bar .toolbar-icon-place-block-inactive:before { + background-image: url(../../../misc/icons/bebebe/place-block.svg); +} diff --git a/core/modules/block_place/src/EventSubscriber/BlockPlaceEventSubscriber.php b/core/modules/block_place/src/EventSubscriber/BlockPlaceEventSubscriber.php new file mode 100644 index 0000000..da69a00 --- /dev/null +++ b/core/modules/block_place/src/EventSubscriber/BlockPlaceEventSubscriber.php @@ -0,0 +1,67 @@ +requestStack = $request_stack; + $this->account = $account; + } + + /** + * Selects the block place override of the block page display variant. + * + * @param \Drupal\Core\Render\PageDisplayVariantSelectionEvent $event + * The event to process. + */ + public function onBlockPageDisplayVariantSelected(PageDisplayVariantSelectionEvent $event) { + if ($event->getPluginId() === 'block_page') { + if ($this->requestStack->getCurrentRequest()->query->has('block-place') && $this->account->hasPermission('administer blocks')) { + $event->setPluginId('block_place_page'); + } + $event->addCacheContexts(['user.permissions', 'url.query_args']); + } + } + + /** + * {@inheritdoc} + */ + public static function getSubscribedEvents() { + // Set a very low priority, so that it runs last. + $events[RenderEvents::SELECT_PAGE_DISPLAY_VARIANT][] = ['onBlockPageDisplayVariantSelected', -1000]; + return $events; + } + +} diff --git a/core/modules/block_place/src/Plugin/DisplayVariant/PlaceBlockPageVariant.php b/core/modules/block_place/src/Plugin/DisplayVariant/PlaceBlockPageVariant.php new file mode 100644 index 0000000..99faec4 --- /dev/null +++ b/core/modules/block_place/src/Plugin/DisplayVariant/PlaceBlockPageVariant.php @@ -0,0 +1,140 @@ +themeManager = $theme_manager; + $this->requestStack = $request_stack; + } + + /** + * {@inheritdoc} + */ + public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) { + return new static( + $configuration, + $plugin_id, + $plugin_definition, + $container->get('block.repository'), + $container->get('entity_type.manager')->getViewBuilder('block'), + $container->get('entity_type.manager')->getDefinition('block')->getListCacheTags(), + $container->get('theme.manager'), + $container->get('request_stack') + ); + } + + /** + * {@inheritdoc} + */ + public function build() { + $build = parent::build(); + + $active_theme = $this->themeManager->getActiveTheme(); + $theme_name = $active_theme->getName(); + $visible_regions = $this->getVisibleRegionNames($theme_name); + + // Build an array of the region names in the right order. + $build += array_fill_keys(array_keys($visible_regions), []); + + foreach ($visible_regions as $region => $region_name) { + $destination = $this->requestStack->getCurrentRequest()->query->get('destination'); + $query = [ + 'region' => $region, + ]; + if ($destination) { + $query['destination'] = $destination; + } + $title = $this->t('Place block', ['%region' => $region_name]); + $operations['block_description'] = [ + '#type' => 'inline_template', + '#template' => '
{{ link }}
', + '#context' => [ + 'link' => Link::createFromRoute($title, 'block.admin_library', ['theme' => $theme_name], [ + 'query' => $query, + 'attributes' => [ + 'title' => $title, + 'class' => ['use-ajax', 'link'], + 'data-dialog-type' => 'modal', + 'data-dialog-options' => Json::encode([ + 'width' => 700, + ]), + ], + ]), + ], + ]; + $build[$region] = ['block_place_operations' => $operations] + $build[$region]; + } + $build['#attached']['library'][] = 'block_place/drupal.block_place'; + return $build; + } + + /** + * Returns the human-readable list of regions keyed by machine name. + * + * @param string $theme + * The name of the theme. + * + * @return array + * An array of human-readable region names keyed by machine name. + */ + protected function getVisibleRegionNames($theme) { + return system_region_list($theme, REGIONS_VISIBLE); + } + +} diff --git a/core/modules/block_place/src/Tests/BlockPlaceTest.php b/core/modules/block_place/src/Tests/BlockPlaceTest.php new file mode 100644 index 0000000..55acc02 --- /dev/null +++ b/core/modules/block_place/src/Tests/BlockPlaceTest.php @@ -0,0 +1,66 @@ +drupalLogin($this->drupalCreateUser([ + 'access administration pages', + 'access toolbar', + 'administer blocks', + 'view the administration theme', + ])); + $this->drupalGet(Url::fromRoute('')); + $this->assertLink('Place block'); + $this->clickLink('Place block'); + + // Each region should have one link to place a block. + $theme_name = $this->container->get('theme.manager')->getActiveTheme()->getName(); + $visible_regions = system_region_list($theme_name, REGIONS_VISIBLE); + $this->assertTrue(count($visible_regions) > 0, 'At least one region is visible'); + foreach ($visible_regions as $region => $name) { + $href = 'admin/structure/block/library/classy?region=' . $region; + $links = $this->xpath('//a[contains(@href, :href)]', [':href' => $href]); + $this->assertEqual(1, count($links), 'Found one matching link for region ' . $region); + list($path, $query_string) = explode('?', $links[0]['href'], 2); + parse_str($query_string, $query_parts); + $this->assertFalse(empty($query_parts['destination']), 'Destination query string is set in href'); + /* Get the text inside the div->a->span->em */ + $demo_block = $this->xpath('//div[@class="block-region demo-block"]/a[text()="Place block"]//em[text()="' . $name . '"]'); + $this->assertEqual('1', count($demo_block), 'Found one matching DIV including the region name: ' . $name); + } + + // Create a user who cannot administer blocks. + $this->drupalLogin($this->drupalCreateUser([ + 'access administration pages', + 'access toolbar', + 'view the administration theme', + ])); + $this->drupalGet(Url::fromRoute('')); + $this->assertNoLink('Place block'); + + $this->drupalGet('admin/structure/block/library/classy'); + $this->assertResponse(403); + } + +} diff --git a/core/themes/bartik/css/components/vertical-tabs.component.css b/core/themes/bartik/css/components/vertical-tabs.component.css index ce4d6cd..b89b43a 100644 --- a/core/themes/bartik/css/components/vertical-tabs.component.css +++ b/core/themes/bartik/css/components/vertical-tabs.component.css @@ -14,3 +14,8 @@ /* This is required to win specificity over [dir="rtl"] .region-content ul */ padding: 0; } + +/* Fix vertical tabs rendered in a dialog from the main theme. */ +.ui-dialog .vertical-tabs__menu li { + left: 230px; +} diff --git a/core/themes/stable/css/block_place/block-place.css b/core/themes/stable/css/block_place/block-place.css new file mode 100644 index 0000000..e9e1eae --- /dev/null +++ b/core/themes/stable/css/block_place/block-place.css @@ -0,0 +1,62 @@ +/* relative position is required for z-index so it's always "in front" */ +.place-block-region { + position: relative; + height: 36px; +} +/* show the drop-zone for blocks */ +.place-block { + top: 6px; + width: 100%; + padding: 5px; + box-shadow: 0 0 0 1px rgba(255,255,255,0.75); + outline: 1px dashed rgba(0,0,0,0.5); + position: absolute; + z-index: 500; + text-align: center; + white-space: nowrap; + transition: all .5s; +} +/* !importants are needed to override theme styles for links */ +.place-block a, +.place-block a.link { + font: .75rem "Lucida Grande","Lucida Sans Unicode",sans-serif !important; + text-align: center !important; + color: #777 !important; + background-color: #fff !important; + box-shadow: 2px 1px 1px rgba(0, 0, 0, 0.15) !important; + border: 1px solid #ddd !important; + border-radius: 50px; + width: 75px; + display: inline-block; + padding: 3px 6px; + cursor: pointer; +} +/* semi-transparent grey background is visible against all backgrounds */ +.place-block:hover { + background-color: rgba(200,200,200,0.25); +} +.place-block a:focus, +.place-block a.link:focus { + outline: none !important; +} +/* todo: figure out how to get the throbber to replace the text inside the button on click */ + +/* + * Styling for toolbar icon. + */ +.toolbar .block-place-toolbar-tab.is-active { + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%); + background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%); +} +.toolbar .toolbar-bar .block-place-toolbar-tab { + float: right; +} +[dir="rtl"] .toolbar .toolbar-bar .block-place-toolbar-tab { + float: left; +} +.toolbar-bar .toolbar-icon-place-block-active:before { + background-image: url(../../images/core/icons/ffffff/place-block.svg); +} +.toolbar-bar .toolbar-icon-place-block-inactive:before { + background-image: url(../../images/core/icons/bebebe/place-block.svg); +} diff --git a/core/themes/stable/images/core/icons/bebebe/place-block.svg b/core/themes/stable/images/core/icons/bebebe/place-block.svg new file mode 100644 index 0000000..26b8f73 --- /dev/null +++ b/core/themes/stable/images/core/icons/bebebe/place-block.svg @@ -0,0 +1,10 @@ + + + + Slice 1 + Created with Sketch. + + + + + \ No newline at end of file diff --git a/core/themes/stable/images/core/icons/ffffff/place-block.svg b/core/themes/stable/images/core/icons/ffffff/place-block.svg new file mode 100644 index 0000000..3ee9b28 --- /dev/null +++ b/core/themes/stable/images/core/icons/ffffff/place-block.svg @@ -0,0 +1,10 @@ + + + + Combined Shape + Created with Sketch. + + + + + \ No newline at end of file diff --git a/core/themes/stable/stable.info.yml b/core/themes/stable/stable.info.yml index 3476833..118cf78 100644 --- a/core/themes/stable/stable.info.yml +++ b/core/themes/stable/stable.info.yml @@ -12,6 +12,10 @@ libraries-override: css: theme: css/block.admin.css: css/block/block.admin.css + block_place/drupal.block_place: + css: + theme: + css/block-place.css: css/block_place/block-place.css ckeditor/drupal.ckeditor: css: