diff --git a/docs/theme.md b/docs/theme.md index 12fcfb17e..f021c04a7 100644 --- a/docs/theme.md +++ b/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 _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: + +`
` + +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. diff --git a/search_api_federated_solr.module b/search_api_federated_solr.module index de3bbe99d..6d56afdac 100644 --- a/search_api_federated_solr.module +++ b/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. * diff --git a/src/Form/FederatedSearchPageBlockForm.php b/src/Form/FederatedSearchPageBlockForm.php index e8e808367..c687a006f 100644 --- a/src/Form/FederatedSearchPageBlockForm.php +++ b/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,7 +43,7 @@ public function buildForm(array $form, FormStateInterface $form_state) { 'title' => $this->t('Enter the terms you wish to search for.'), 'placeholder' => 'Search', ], - '#prefix' => '
', + '#provider' => 'search_api_federated_solr', ]; $form['actions'] = ['#type' => 'actions']; @@ -50,7 +51,7 @@ public function buildForm(array $form, FormStateInterface $form_state) { '#type' => 'submit', '#value' => $this->t('Search'), '#name' => '', - '#suffix' => '
', + '#provider' => 'search_api_federated_solr', ]; // Send site name as qs param if app is configured to load w/default site. diff --git a/src/Plugin/Block/FederatedSearchPageFormBlock.php b/src/Plugin/Block/FederatedSearchPageFormBlock.php index 2dd13591f..53aef6e63 100644 --- a/src/Plugin/Block/FederatedSearchPageFormBlock.php +++ b/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; } diff --git a/templates/search-api-federated-solr-block-form.html.twig b/templates/search-api-federated-solr-block-form.html.twig new file mode 100644 index 000000000..494d7c8a0 --- /dev/null +++ b/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() + */ +#} +
+{{ form }} +
diff --git a/templates/search-api-federated-solr-block.html.twig b/templates/search-api-federated-solr-block.html.twig new file mode 100644 index 000000000..a07566487 --- /dev/null +++ b/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 }}