Merge pull request #76 from palantirnet/3037751-template

Test template file

docs/theme.md

@@ -3,7 +3,7 @@
 1. Theming the search app in the context of your Drupal site:
     1. For themes with SASS: Copy `./docs/assets/search_theme_override.scss` from this module and add it to your theme sass files and start making changes.
     1. For themes with CSS only: Copy `./docs/assets/search_theme_override.css` from this module and add it to your theme css files and start making changes.
-    1. You'll likely also need to [define this css file as a theme library and attach it to the search page](#adding-the-styles-to-your-theme)  
+    1. You'll likely also need to [define this css file as a theme library and attach it to the search page](#adding-the-styles-to-your-theme)
 
 ### Adding the styles to your theme
 Once you have defined your theme styles, we recommend creating a theme library with the `CSS` and attaching that file to the search page route.  See examples below.
@@ -42,3 +42,23 @@ function <your-theme>_page_attachments_alter(array &$page) {
 
 ### Notes
 The Sass/CSS assets that are included in docs/assets are examples only. They will not be regularly maintained or updated.
+
+## Theming the Drupal elements
+
+While the React application is separate from Drupal, the provided search block `Federated Search Page Form block` is themable, as is the wrapper around the search results page. There are three theme files.
+
+### search-app.html.twig
+
+This template instantiates the application itself. It is designed to use the full width of the page. If you override this template in your theme, you must retain the root div element:
+
+`<div id="root" data-federated-search-app-config="{{ app_config }}">`
+
+Without this element, the application will not function.
+
+### search-api-federated-solr-block.html.twig
+
+This template displays the search block, with no block title, as a suitable replacement for the core search block.
+
+### search-api-federated-solr-block-form.html.twig
+
+This template generates the search form that appears in the block. You may override its elements by printing them individually. When doing so, be sure to render the hidden form elements.

search_api_federated_solr.module

@@ -64,9 +64,39 @@ function search_api_federated_solr_theme($existing, $type, $theme, $path) {
         'federated_search_app_config' => NULL,
       ],
     ],
+    'search_api_federated_solr_block' => [
+      'variables' => [
+        'search_form' => NULL
+      ],
+    ],
+    'search_api_federated_solr_block_form' => [
+      'render element' => 'form'
+    ],
   ];
 }
 
+/**
+ * Implements hook_theme_suggestions_HOOK_alter().
+ */
+function search_api_federated_solr_theme_suggestions_input_alter(&$suggestions, array $variables) {
+  $element = $variables['element'];
+
+  if (isset($element['#provider']) && $element['#provider'] == 'search_api_federated_solr') {
+    $suggestions[] = 'input__' . $element['#provider'] . '__' . $element['#type'];
+  }
+}
+
+/**
+ * Implements hook_theme_suggestions_HOOK_alter().
+ */
+function search_api_federated_solr_theme_suggestions_form_element_alter(&$suggestions, array $variables) {
+  $element = $variables['element'];
+
+  if (isset($element['#provider']) && $element['#provider'] == 'search_api_federated_solr') {
+    $suggestions[] = 'form_element__' . $element['#provider'] . '__' . $element['#type'];
+  }
+}
+
 /**
  * Change the way the index's field names are mapped to Solr field names.
  *

src/Form/FederatedSearchPageBlockForm.php

@@ -31,6 +31,7 @@ public function buildForm(array $form, FormStateInterface $form_state) {
     $renderer = \Drupal::service('renderer');
     $app_config = \Drupal::config('search_api_federated_solr.search_app.settings');
 
+    $form['#theme'] = 'search_api_federated_solr_block_form';
     $form['search'] = [
       '#type' => 'search',
       '#name' => 'search',
@@ -42,15 +43,15 @@ public function buildForm(array $form, FormStateInterface $form_state) {
         'title' => $this->t('Enter the terms you wish to search for.'),
         'placeholder' => 'Search',
       ],
-      '#prefix' => '<div class="container-inline">',
+      '#provider' => 'search_api_federated_solr',
     ];
 
     $form['actions'] = ['#type' => 'actions'];
     $form['actions']['submit'] = [
       '#type' => 'submit',
       '#value' => $this->t('Search'),
       '#name' => '',
-      '#suffix' => '</div>',
+      '#provider' => 'search_api_federated_solr',
     ];
 
     // Send site name as qs param if app is configured to load w/default site.

src/Plugin/Block/FederatedSearchPageFormBlock.php

@@ -20,9 +20,10 @@ class FederatedSearchPageFormBlock extends BlockBase implements BlockPluginInter
    * {@inheritdoc}
    */
   public function build() {
-    $build = [];
-
-    $build['container']['form'] = \Drupal::formBuilder()->getForm('Drupal\search_api_federated_solr\Form\FederatedSearchPageBlockForm');
+    $build = [
+      '#theme' => 'search_api_federated_solr_block',
+      '#search_form' => \Drupal::formBuilder()->getForm('Drupal\search_api_federated_solr\Form\FederatedSearchPageBlockForm'),
+    ];
 
     return $build;
   }

templates/search-api-federated-solr-block-form.html.twig

@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Theme override for a 'form' element.
+ *
+ * Available variables
+ * - attributes: A list of HTML attributes for the wrapper element.
+ * - form: The form element array.
+ *
+ * @see template_preprocess_form()
+ */
+#}
+<div class="container-inline">
+{{ form }}
+</div>

templates/search-api-federated-solr-block.html.twig

@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Federated search's theme implementation for a search form block.
+ *
+ * Available variables:
+ * - search_form: The content of this block.
+ *
+ * @see template_preprocess_block()
+ * @see search_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ search_form  }}