diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 6f05be0..9cfc3e8 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -326,14 +326,11 @@ function theme_get_setting($setting_name, $theme = NULL) {
       }
 
       // Generate the path to the logo image.
-      if ($cache[$theme]->get('features.logo')) {
-        $logo_path = $cache[$theme]->get('logo.path');
-        if ($cache[$theme]->get('logo.use_default')) {
-          $cache[$theme]->set('logo.url', file_create_url($theme_object->getPath() . '/logo.svg'));
-        }
-        elseif ($logo_path) {
-          $cache[$theme]->set('logo.url', file_create_url($logo_path));
-        }
+      if ($cache[$theme]->get('logo.use_default')) {
+        $cache[$theme]->set('logo.url', file_create_url($theme_object->getPath() . '/logo.svg'));
+      }
+      elseif ($logo_path = $cache[$theme]->get('logo.path')) {
+        $cache[$theme]->set('logo.url', file_create_url($logo_path));
       }
 
       // Generate the path to the favicon.
@@ -1296,7 +1293,6 @@ function template_preprocess_html(&$variables) {
  */
 function template_preprocess_page(&$variables) {
   $language_interface = \Drupal::languageManager()->getCurrentLanguage();
-  $site_config = \Drupal::config('system.site');
 
   // Move some variables to the top level for themer convenience and template cleanliness.
   $variables['title'] = $variables['page']['#title'];
@@ -1310,9 +1306,6 @@ function template_preprocess_page(&$variables) {
   $variables['base_path']         = base_path();
   $variables['front_page']        = \Drupal::url('<front>');
   $variables['language']          = $language_interface;
-  $variables['logo']              = theme_get_setting('logo.url');
-  $variables['site_name']         = (theme_get_setting('features.name') ? $site_config->get('name') : '');
-  $variables['site_slogan']['#markup'] = (theme_get_setting('features.slogan') ? $site_config->get('slogan') : '');
 
   // An exception might be thrown.
   try {
@@ -1417,6 +1410,13 @@ function template_preprocess_maintenance_page(&$variables) {
 
   // @see system_page_attachments()
   $variables['#attached']['library'][] = 'system/maintenance';
+
+  // Maintenance page and install page need branding info in variables because
+  // there is no blocks.
+  $site_config = \Drupal::config('system.site');
+  $variables['logo'] = theme_get_setting('logo.url');
+  $variables['site_name'] = $site_config->get('name');
+  $variables['site_slogan'] = $site_config->get('slogan');
 }
 
 /**
diff --git a/core/lib/Drupal/Core/Extension/ThemeHandler.php b/core/lib/Drupal/Core/Extension/ThemeHandler.php
index 2eb56bc..6dfb99a 100644
--- a/core/lib/Drupal/Core/Extension/ThemeHandler.php
+++ b/core/lib/Drupal/Core/Extension/ThemeHandler.php
@@ -22,10 +22,7 @@ class ThemeHandler implements ThemeHandlerInterface {
    * @var array
    */
   protected $defaultFeatures = array(
-    'logo',
     'favicon',
-    'name',
-    'slogan',
     'node_user_picture',
     'comment_user_picture',
     'comment_user_verification',
diff --git a/core/modules/color/color.module b/core/modules/color/color.module
index 46ddce5..aeb8359 100644
--- a/core/modules/color/color.module
+++ b/core/modules/color/color.module
@@ -8,6 +8,7 @@
 use Drupal\Core\Asset\CssOptimizer;
 use Drupal\Component\Utility\Bytes;
 use Drupal\Component\Utility\Environment;
+use Drupal\Core\Block\BlockPluginInterface;
 use Drupal\Core\Cache\Cache;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Language\LanguageInterface;
@@ -106,18 +107,25 @@ function color_library_info_alter(&$libraries, $extension) {
 }
 
 /**
- * Implements hook_preprocess_page().
- *
- * Replace the logo with the colored version if available.
+ * Implements hook_block_view_BASE_BLOCK_ID_alter().
+ */
+function color_block_view_system_branding_block_alter(array &$build, BlockPluginInterface $block) {
+  $build['#pre_render'][] = 'color_block_view_pre_render';
+}
+
+/**
+ * #pre_render callback: Sets color preset logo.
  */
-function color_preprocess_page(&$variables) {
+function color_block_view_pre_render(array $build) {
   $theme_key = \Drupal::theme()->getActiveTheme()->getName();
 
   // Override logo.
   $logo = \Drupal::config('color.theme.' . $theme_key)->get('logo');
-  if ($logo && $variables['logo'] && preg_match('!' . $theme_key . '/logo.svg$!', $variables['logo'])) {
-    $variables['logo'] = file_create_url($logo);
+  if ($logo && $build['content']['site_logo'] && preg_match('!' . $theme_key . '/logo.svg$!', $build['content']['site_logo']['#uri'])) {
+    $build['content']['site_logo']['#uri'] = file_create_url($logo);
   }
+
+  return $build;
 }
 
 /**
diff --git a/core/modules/config/src/Tests/ConfigLanguageOverrideWebTest.php b/core/modules/config/src/Tests/ConfigLanguageOverrideWebTest.php
index f4d5acb..79ed24c 100644
--- a/core/modules/config/src/Tests/ConfigLanguageOverrideWebTest.php
+++ b/core/modules/config/src/Tests/ConfigLanguageOverrideWebTest.php
@@ -23,7 +23,11 @@ class ConfigLanguageOverrideWebTest extends WebTestBase {
    *
    * @var array
    */
-  public static $modules = array('language', 'system');
+  public static $modules = [
+    'block',
+    'language',
+    'system'
+  ];
 
   /**
    * {@inheritdoc}
@@ -54,6 +58,9 @@ function testSiteNameTranslation() {
       ->set('name', 'XX site name')
       ->save();
 
+    // Place branding block with site name into header region.
+    $this->drupalPlaceBlock('system_branding_block', ['region' => 'header']);
+
     $this->drupalLogout();
 
     // The home page in English should not have the override.
diff --git a/core/modules/config/src/Tests/ConfigSingleImportExportTest.php b/core/modules/config/src/Tests/ConfigSingleImportExportTest.php
index 688d867..0a382e2 100644
--- a/core/modules/config/src/Tests/ConfigSingleImportExportTest.php
+++ b/core/modules/config/src/Tests/ConfigSingleImportExportTest.php
@@ -22,7 +22,11 @@ class ConfigSingleImportExportTest extends WebTestBase {
    *
    * @var array
    */
-  public static $modules = array('config', 'config_test');
+  public static $modules = [
+    'block',
+    'config',
+    'config_test'
+  ];
 
   /**
    * Tests importing a single configuration file.
@@ -126,6 +130,10 @@ public function testImport() {
   public function testImportSimpleConfiguration() {
     $this->drupalLogin($this->drupalCreateUser(array('import configuration')));
     $config = $this->config('system.site')->set('name', 'Test simple import');
+
+    // Place branding block with site name into header region.
+    $this->drupalPlaceBlock('system_branding_block', ['region' => 'header']);
+
     $edit = array(
       'config_type' => 'system.simple',
       'config_name' => $config->getName(),
diff --git a/core/modules/config_translation/src/Tests/ConfigTranslationUiTest.php b/core/modules/config_translation/src/Tests/ConfigTranslationUiTest.php
index e4a4e3f..2b092a1 100644
--- a/core/modules/config_translation/src/Tests/ConfigTranslationUiTest.php
+++ b/core/modules/config_translation/src/Tests/ConfigTranslationUiTest.php
@@ -176,6 +176,9 @@ public function testSiteInformationTranslationUi() {
     $this->assertFieldByName('translation[config_names][system.site][name]', $fr_site_name);
     $this->assertFieldByName('translation[config_names][system.site][slogan]', $fr_site_slogan);
 
+    // Place branding block with site name and slogan into header region.
+    $this->drupalPlaceBlock('system_branding_block', ['region' => 'header']);
+
     // Check French translation of site name and slogan are in place.
     $this->drupalGet('fr');
     $this->assertRaw($fr_site_name);
diff --git a/core/modules/language/src/Tests/LanguageUILanguageNegotiationTest.php b/core/modules/language/src/Tests/LanguageUILanguageNegotiationTest.php
index 3f7994b..4645d68 100644
--- a/core/modules/language/src/Tests/LanguageUILanguageNegotiationTest.php
+++ b/core/modules/language/src/Tests/LanguageUILanguageNegotiationTest.php
@@ -393,6 +393,9 @@ function testUrlLanguageFallback() {
     // it is set by JavaScript.
     $this->drupalLogout();
 
+    // Place a site branding block in the header region.
+    $this->drupalPlaceBlock('system_branding_block', ['region' => 'header']);
+
     // Access the front page without specifying any valid URL language prefix
     // and having as browser language preference a non-default language.
     $http_header = array("Accept-Language: $langcode_browser_fallback;q=1");
@@ -406,7 +409,7 @@ function testUrlLanguageFallback() {
     $this->assertTrue($fields[0] == $languages[$langcode_browser_fallback]->getName(), 'The browser language is the URL active language');
 
     // Check that URLs are rewritten using the given browser language.
-    $fields = $this->xpath('//strong[@class="site-name"]/a[@rel="home" and @href=:url]', $args);
+    $fields = $this->xpath('//div[@class="site-name"]/a[@rel="home" and @href=:url]', $args);
     $this->assertTrue($fields[0] == 'Drupal', 'URLs are rewritten using the browser language.');
   }
 
diff --git a/core/modules/page_cache/src/Tests/PageCacheTagsIntegrationTest.php b/core/modules/page_cache/src/Tests/PageCacheTagsIntegrationTest.php
index f19ac70..58f8fde 100644
--- a/core/modules/page_cache/src/Tests/PageCacheTagsIntegrationTest.php
+++ b/core/modules/page_cache/src/Tests/PageCacheTagsIntegrationTest.php
@@ -91,6 +91,7 @@ function testPageCacheTags() {
       'rendered',
       'block_view',
       'config:block_list',
+      'config:block.block.bartik_branding',
       'config:block.block.bartik_breadcrumbs',
       'config:block.block.bartik_content',
       'config:block.block.bartik_tools',
@@ -127,6 +128,7 @@ function testPageCacheTags() {
       'rendered',
       'block_view',
       'config:block_list',
+      'config:block.block.bartik_branding',
       'config:block.block.bartik_breadcrumbs',
       'config:block.block.bartik_content',
       'config:block.block.bartik_tools',
diff --git a/core/modules/system/config/install/system.theme.global.yml b/core/modules/system/config/install/system.theme.global.yml
index 5ee6cc7..b8da423 100644
--- a/core/modules/system/config/install/system.theme.global.yml
+++ b/core/modules/system/config/install/system.theme.global.yml
@@ -7,10 +7,7 @@ features:
   comment_user_picture: true
   comment_user_verification: true
   favicon: true
-  logo: true
-  name: true
   node_user_picture: true
-  slogan: true
 logo:
   path: ''
   url: ''
diff --git a/core/modules/system/src/Form/ThemeSettingsForm.php b/core/modules/system/src/Form/ThemeSettingsForm.php
index fd8b777..978ca80 100644
--- a/core/modules/system/src/Form/ThemeSettingsForm.php
+++ b/core/modules/system/src/Form/ThemeSettingsForm.php
@@ -141,9 +141,6 @@ public function buildForm(array $form, FormStateInterface $form_state, $theme =
 
     // Toggle settings
     $toggles = array(
-      'logo' => t('Logo'),
-      'name' => t('Site name'),
-      'slogan' => t('Site slogan'),
       'node_user_picture' => t('User pictures in posts'),
       'comment_user_picture' => t('User pictures in comments'),
       'comment_user_verification' => t('User verification status in comments'),
diff --git a/core/modules/system/src/Plugin/Block/SystemBrandingBlock.php b/core/modules/system/src/Plugin/Block/SystemBrandingBlock.php
index 16b0368..a4f8df7 100644
--- a/core/modules/system/src/Plugin/Block/SystemBrandingBlock.php
+++ b/core/modules/system/src/Plugin/Block/SystemBrandingBlock.php
@@ -160,10 +160,9 @@ public function build() {
     $build = array();
     $site_config = $this->configFactory->get('system.site');
 
-    $logo = theme_get_setting('logo');
     $build['site_logo'] = array(
       '#theme' => 'image',
-      '#uri' => $logo['url'],
+      '#uri' => theme_get_setting('logo.url'),
       '#alt' => $this->t('Home'),
       '#access' => $this->configuration['use_site_logo'],
     );
diff --git a/core/modules/system/src/Tests/System/PageTitleTest.php b/core/modules/system/src/Tests/System/PageTitleTest.php
index 56fa556..73ef4bd 100644
--- a/core/modules/system/src/Tests/System/PageTitleTest.php
+++ b/core/modules/system/src/Tests/System/PageTitleTest.php
@@ -23,7 +23,7 @@ class PageTitleTest extends WebTestBase {
    *
    * @var array
    */
-  public static $modules = array('node', 'test_page_test', 'form_test');
+  public static $modules = ['node', 'test_page_test', 'form_test', 'block'];
 
   protected $contentUser;
   protected $savedTitle;
@@ -71,13 +71,6 @@ function testTitleXSS() {
     $slogan = '<script type="text/javascript">alert("Slogan XSS!");</script>';
     $slogan_filtered = Xss::filterAdmin($slogan);
 
-    // Activate needed appearance settings.
-    $edit = array(
-      'toggle_name'           => TRUE,
-      'toggle_slogan'         => TRUE,
-    );
-    $this->drupalPostForm('admin/appearance/settings', $edit, t('Save configuration'));
-
     // Set title and slogan.
     $edit = array(
       'site_name'    => $title,
@@ -85,6 +78,9 @@ function testTitleXSS() {
     );
     $this->drupalPostForm('admin/config/system/site-information', $edit, t('Save configuration'));
 
+    // Place branding block with site name and slogan into header region.
+    $this->drupalPlaceBlock('system_branding_block', ['region' => 'header']);
+
     // Load frontpage.
     $this->drupalGet('');
 
diff --git a/core/modules/system/src/Tests/System/ThemeTest.php b/core/modules/system/src/Tests/System/ThemeTest.php
index f4e87e1..c04560e 100644
--- a/core/modules/system/src/Tests/System/ThemeTest.php
+++ b/core/modules/system/src/Tests/System/ThemeTest.php
@@ -123,9 +123,11 @@ function testThemeSettings() {
       $this->assertEqual((string) $elements[1], $explicit_file);
       $this->assertEqual((string) $elements[2], $local_file);
 
-      // Verify the actual 'src' attribute of the logo being output.
+      // Verify the actual 'src' attribute of the logo being output in a site
+      // branding block.
+      $this->drupalPlaceBlock('system_branding_block', ['region' => 'header']);
       $this->drupalGet('');
-      $elements = $this->xpath('//header/a[@rel=:rel]/img', array(
+      $elements = $this->xpath('//header//a[@rel=:rel]/img', array(
           ':rel' => 'home',
         )
       );
@@ -175,8 +177,9 @@ function testThemeSettings() {
     $fields = $this->xpath($this->constructFieldXpath('name', 'logo_path'));
     $uploaded_filename = 'public://' . $fields[0]['value'];
 
+    $this->drupalPlaceBlock('system_branding_block', ['region' => 'header']);
     $this->drupalGet('');
-    $elements = $this->xpath('//header/a[@rel=:rel]/img', array(
+    $elements = $this->xpath('//header//a[@rel=:rel]/img', array(
         ':rel' => 'home',
       )
     );
diff --git a/core/modules/system/src/Tests/Update/SiteBrandingConvertedIntoBlockUpdateTest.php b/core/modules/system/src/Tests/Update/SiteBrandingConvertedIntoBlockUpdateTest.php
new file mode 100644
index 0000000..86a34d7
--- /dev/null
+++ b/core/modules/system/src/Tests/Update/SiteBrandingConvertedIntoBlockUpdateTest.php
@@ -0,0 +1,73 @@
+<?php
+
+/**
+ * @file
+ * Contains \Drupal\system\Tests\Update\LocalActionsAndTasksConvertedIntoBlocksUpdateTest.
+ */
+
+namespace Drupal\system\Tests\Update;
+
+use Drupal\node\Entity\Node;
+
+/**
+ * Tests the upgrade path for local actions/tasks being converted into blocks.
+ *
+ * @see https://www.drupal.org/node/507488
+ *
+ * @group system
+ */
+class SiteBrandingConvertedIntoBlockUpdateTest extends UpdatePathTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setDatabaseDumpFiles() {
+    $this->databaseDumpFiles = [
+      __DIR__ . '/../../../../system/tests/fixtures/update/drupal-8.bare.standard.php.gz',
+      __DIR__ . '/../../../../system/tests/fixtures/update/drupal-8.site-branding-into-block-2005546.php',
+    ];
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+    /** @var \Drupal\Core\Extension\ThemeHandlerInterface $theme_handler */
+    $theme_handler = \Drupal::service('theme_handler');
+    $theme_handler->refreshInfo();
+  }
+
+  /**
+   * Tests that site branding elements are being converted into blocks.
+   */
+  public function testUpdateHookN() {
+    $this->runUpdates();
+
+    /** @var \Drupal\block\BlockInterface $block_storage */
+    $block_storage = \Drupal::entityManager()->getStorage('block');
+
+    $this->assertRaw('Because your site has custom theme(s) installed, we had to set the branding block into the content region. Please manually review the block configuration and remove the site name, slogan, and logo variables from your templates.');
+
+    // Disable maintenance mode.
+    // @todo Can be removed once maintenance mode is automatically turned off
+    // after updates in https://www.drupal.org/node/2435135.
+    \Drupal::state()->set('system.maintenance_mode', FALSE);
+
+    // We finished updating so we can login the user now.
+    $this->drupalLogin($this->rootUser);
+
+    // Site branding is visible on the home page.
+    $this->drupalGet('/node');
+    $this->assertRaw('site-branding__logo');
+    $this->assertRaw('site-branding__name');
+    $this->assertNoRaw('site-branding__slogan');
+
+    $this->drupalGet('admin/structure/block/list/bartik');
+
+    /** @var \Drupal\Core\Config\StorageInterface $config_storage */
+    $config_storage = \Drupal::service('config.storage');
+    $this->assertTrue($config_storage->exists('block.block.test_theme_branding'), 'Site branding block has been created for the custom theme.');
+  }
+
+}
diff --git a/core/modules/system/system.install b/core/modules/system/system.install
index 86365a9..008c12f 100644
--- a/core/modules/system/system.install
+++ b/core/modules/system/system.install
@@ -1307,7 +1307,8 @@ function system_update_8004() {
   // https://www.drupal.org/node/2542748. Regenerate the related schemas to
   // ensure they match the currently expected status.
   $manager = \Drupal::entityDefinitionUpdateManager();
-  foreach (array_keys(\Drupal::entityManager()->getDefinitions()) as $entity_type_id) {
+  foreach (array_keys(\Drupal::entityManager()
+    ->getDefinitions()) as $entity_type_id) {
     $manager->updateEntityType($manager->getEntityType($entity_type_id));
   }
 }
@@ -1462,7 +1463,78 @@ function system_update_8005() {
 }
 
 /**
- * Helper function to create block configuration objects for the update.
+ * Place branding blocks in every theme.
+ */
+function system_update_8006() {
+  // When block module is not installed, there is nothing that could be done
+  // except showing a warning.
+  if (!\Drupal::moduleHandler()->moduleExists('block')) {
+    return t('Block module is not enabled so site branding elements, which have been converted to a block, are not visible anymore.');
+  }
+
+  /** @var \Drupal\Core\Extension\ThemeHandlerInterface $theme_handler */
+  $theme_handler = \Drupal::service('theme_handler');
+  $custom_themes_installed = FALSE;
+  $message = NULL;
+  $langcode = \Drupal::service('language_manager')->getCurrentLanguage()->getId();
+
+  $site_branding_default_settings = [
+    'plugin' => 'system_branding_block',
+    'region' => 'content',
+    'settings.label' => 'Site Branding',
+    'settings.label_display' => 0,
+    'settings.cache.max_age' => 0,
+    'visibility' => [],
+    'weight' => 0,
+    'langcode' => $langcode,
+  ];
+  foreach ($theme_handler->listInfo() as $theme) {
+    $theme_name = $theme->getName();
+    switch ($theme_name) {
+      case 'bartik':
+        $name = 'block.block.bartik_branding';
+        $values = [
+            'id' => 'bartik_branding',
+            'region' => 'header',
+          ] + $site_branding_default_settings;
+        _system_update_create_block($name, $theme_name, $values);
+        break;
+
+      case 'stark':
+        $name = 'block.block.stark_branding';
+        $values = [
+            'id' => 'stark_branding',
+            'region' => 'header',
+          ] + $site_branding_default_settings;
+        _system_update_create_block($name, $theme_name, $values);
+        break;
+
+      case 'seven':
+      case 'classy':
+        // Don't place any blocks or trigger custom themes installed warning.
+        break;
+      default:
+        $custom_themes_installed = TRUE;
+        $name = sprintf('block.block.%s_branding', $theme_name);
+        $values = [
+            'id' => sprintf('%s_branding', $theme_name),
+            'region' => 'content',
+            'weight' => '-50',
+          ] + $site_branding_default_settings;
+        _system_update_create_block($name, $theme_name, $values);
+        break;
+    }
+  }
+
+  if ($custom_themes_installed) {
+    $message = t('Because your site has custom theme(s) installed, we had to set the branding block into the content region. Please manually review the block configuration and remove the site name, slogan, and logo variables from your templates.');
+  }
+
+  return $message;
+}
+
+/**
+ * Helper function to create block configuration objects for an update.
  *
  * @param string $name
  *   The name of the config object.
diff --git a/core/modules/system/system.module b/core/modules/system/system.module
index c12a2d4..f077504 100644
--- a/core/modules/system/system.module
+++ b/core/modules/system/system.module
@@ -1063,10 +1063,7 @@ function system_rebuild_module_data() {
  */
 function _system_default_theme_features() {
   return array(
-    'logo',
     'favicon',
-    'name',
-    'slogan',
     'node_user_picture',
     'comment_user_picture',
     'comment_user_verification',
diff --git a/core/modules/system/templates/block--system-branding-block.html.twig b/core/modules/system/templates/block--system-branding-block.html.twig
index 63e0c3e..2a98687 100644
--- a/core/modules/system/templates/block--system-branding-block.html.twig
+++ b/core/modules/system/templates/block--system-branding-block.html.twig
@@ -17,12 +17,12 @@
 #}
 {% block content %}
   {% if site_logo %}
-    <a href="{{ url('<front>') }}" title="{{ 'Home'|t }}" rel="home">
+    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
       <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
     </a>
   {% endif %}
   {% if site_name %}
-    <a href="{{ url('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
+    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
   {% endif %}
   {{ site_slogan }}
 {% endblock %}
diff --git a/core/modules/system/templates/page.html.twig b/core/modules/system/templates/page.html.twig
index b80310e..fda928a 100644
--- a/core/modules/system/templates/page.html.twig
+++ b/core/modules/system/templates/page.html.twig
@@ -58,32 +58,6 @@
 <div class="layout-container">
 
   <header role="banner">
-    {% if logo %}
-      <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">
-        <img src="{{ logo }}" alt="{{ 'Home'|t }}"/>
-      </a>
-    {% endif %}
-
-    {% if site_name or site_slogan %}
-      <div class="name-and-slogan">
-
-        {# Use h1 when the content title is empty #}
-        {% if title %}
-          <strong class="site-name">
-            <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-          </strong>
-        {% else %}
-          <h1 class="site-name">
-            <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-          </h1>
-        {% endif %}
-
-        {% if site_slogan %}
-          <div class="site-slogan">{{ site_slogan }}</div>
-        {% endif %}
-      </div>{# ./name-and-slogan #}
-    {% endif %}
-
     {{ page.header }}
   </header>
 
diff --git a/core/modules/system/tests/fixtures/update/block.block.testfor2005546.yml b/core/modules/system/tests/fixtures/update/block.block.testfor2005546.yml
new file mode 100644
index 0000000..4396c75
--- /dev/null
+++ b/core/modules/system/tests/fixtures/update/block.block.testfor2005546.yml
@@ -0,0 +1,25 @@
+uuid: b299258f-6fb5-47f8-b42f-473787d02e22
+langcode: en
+status: true
+dependencies:
+  module:
+    - system
+  theme:
+    - bartik
+id: bartik_branding
+theme: bartik
+region: header
+weight: 0
+provider: null
+plugin: system_branding_block
+settings:
+  id: system_branding_block
+  label: 'Site Branding'
+  provider: system
+  label_display: '0'
+  cache:
+    max_age: -1
+  use_site_logo: true
+  use_site_name: true
+  use_site_slogan: true
+visibility: {  }
diff --git a/core/modules/system/tests/fixtures/update/drupal-8.site-branding-into-block-2005546.php b/core/modules/system/tests/fixtures/update/drupal-8.site-branding-into-block-2005546.php
new file mode 100644
index 0000000..576762d
--- /dev/null
+++ b/core/modules/system/tests/fixtures/update/drupal-8.site-branding-into-block-2005546.php
@@ -0,0 +1,60 @@
+<?php
+
+/**
+ * @file
+ * Contains database additions to drupal-8.bare.standard.php.gz for testing the
+ * upgrade path of https://www.drupal.org/node/2005546.
+ */
+
+use Drupal\Core\Database\Database;
+
+$connection = Database::getConnection();
+
+// Structure of a custom block with visibility settings.
+$block_configs[] = \Drupal\Component\Serialization\Yaml::decode(file_get_contents(__DIR__ . '/block.block.testfor2005546.yml'));
+
+foreach ($block_configs as $block_config) {
+  $connection->insert('config')
+    ->fields([
+      'collection',
+      'name',
+      'data',
+    ])
+    ->values([
+      'collection' => '',
+      'name' => 'block.block.' . $block_config['id'],
+      'data' => serialize($block_config),
+    ])
+    ->execute();
+}
+
+// Update the config entity query "index".
+$existing_blocks = $connection->select('key_value')
+  ->fields('key_value', ['value'])
+  ->condition('collection', 'config.entity.key_store.block')
+  ->condition('name', 'theme:bartik')
+  ->execute()
+  ->fetchField();
+$existing_blocks = unserialize($existing_blocks);
+
+$connection->update('key_value')
+  ->fields([
+    'value' => serialize(array_merge($existing_blocks, ['block.block.bartik_branding']))
+  ])
+  ->condition('collection', 'config.entity.key_store.block')
+  ->condition('name', 'theme:bartik')
+  ->execute();
+
+// Enable test theme.
+$extensions = $connection->select('config')
+  ->fields('config', ['data'])
+  ->condition('name', 'core.extension')
+  ->execute()
+  ->fetchField();
+$extensions = unserialize($extensions);
+$connection->update('config')
+  ->fields([
+    'data' => serialize(array_merge_recursive($extensions, ['theme' => ['test_theme' => 0]]))
+  ])
+  ->condition('name', 'core.extension')
+  ->execute();
diff --git a/core/profiles/minimal/config/install/block.block.stark_branding.yml b/core/profiles/minimal/config/install/block.block.stark_branding.yml
new file mode 100644
index 0000000..acf108f
--- /dev/null
+++ b/core/profiles/minimal/config/install/block.block.stark_branding.yml
@@ -0,0 +1,18 @@
+id: stark_branding
+theme: stark
+weight: 0
+status: true
+langcode: en
+region: header
+plugin: system_branding_block
+settings:
+  id: system_branding_block
+  label: 'Site Branding'
+  provider: system
+  label_display: '0'
+dependencies:
+  module:
+    - system
+  theme:
+    - stark
+visibility: {  }
diff --git a/core/profiles/standard/config/install/block.block.bartik_branding.yml b/core/profiles/standard/config/install/block.block.bartik_branding.yml
new file mode 100644
index 0000000..3bed730
--- /dev/null
+++ b/core/profiles/standard/config/install/block.block.bartik_branding.yml
@@ -0,0 +1,18 @@
+id: bartik_branding
+theme: bartik
+weight: 0
+status: true
+langcode: en
+region: header
+plugin: system_branding_block
+settings:
+  id: system_branding_block
+  label: 'Site Branding'
+  provider: system
+  label_display: '0'
+dependencies:
+  module:
+    - system
+  theme:
+    - bartik
+visibility: {  }
diff --git a/core/themes/bartik/bartik.libraries.yml b/core/themes/bartik/bartik.libraries.yml
index bb49f7e..ff6b547 100644
--- a/core/themes/bartik/bartik.libraries.yml
+++ b/core/themes/bartik/bartik.libraries.yml
@@ -37,6 +37,7 @@ global-styling:
       css/components/shortcut.css: {}
       css/components/skip-link.css: {}
       css/components/sidebar.css: {}
+      css/components/site-branding.css: {}
       css/components/site-footer.css: {}
       css/components/table.css: {}
       css/components/tabs.css: {}
diff --git a/core/themes/bartik/bartik.theme b/core/themes/bartik/bartik.theme
index 1b82230..edef889 100644
--- a/core/themes/bartik/bartik.theme
+++ b/core/themes/bartik/bartik.theme
@@ -40,9 +40,6 @@ function bartik_preprocess_html(&$variables) {
  * Implements hook_preprocess_HOOK() for page templates.
  */
 function bartik_preprocess_page(&$variables) {
-  // Set the options that apply to both page and maintenance page.
-  _bartik_process_page($variables);
-
   // Since the title and the shortcut link are both block level elements,
   // positioning them next to each other is much simpler with a wrapper div.
   if (!empty($variables['title_suffix']['add_or_remove_shortcut']) && $variables['title']) {
@@ -75,9 +72,6 @@ function bartik_preprocess_maintenance_page(&$variables) {
 
   // Bartik has custom styling for the maintenance page.
   $variables['#attached']['library'][] = 'bartik/maintenance_page';
-
-  // Set the options that apply to both page and maintenance page.
-  _bartik_process_page($variables);
 }
 
 /**
@@ -107,23 +101,3 @@ function bartik_preprocess_block(&$variables) {
 function bartik_preprocess_menu(&$variables) {
   $variables['attributes']['class'][] = 'clearfix';
 }
-
-/**
- * Helper function for handling the site name and slogan.
- */
-function _bartik_process_page(&$variables) {
-  $site_config = \Drupal::config('system.site');
-  // Always print the site name and slogan, but if they are toggled off, we'll
-  // just hide them visually.
-  $variables['hide_site_name']   = theme_get_setting('features.name') ? FALSE : TRUE;
-  $variables['hide_site_slogan'] = theme_get_setting('features.slogan') ? FALSE : TRUE;
-  if ($variables['hide_site_name']) {
-    // If toggle_name is FALSE, the site_name will be empty, so we rebuild it.
-    $variables['site_name'] = $site_config->get('name');
-  }
-  if ($variables['hide_site_slogan']) {
-    // If toggle_site_slogan is FALSE, the site_slogan will be empty, so we
-    // rebuild it.
-    $variables['site_slogan']['#markup'] = $site_config->get('slogan');
-  }
-}
diff --git a/core/themes/bartik/css/colors.css b/core/themes/bartik/css/colors.css
index d56f24b..0c722b2 100644
--- a/core/themes/bartik/css/colors.css
+++ b/core/themes/bartik/css/colors.css
@@ -46,10 +46,10 @@ a:active,
 .region-header,
 .region-header a,
 .region-header li a.is-active,
-#name-and-slogan,
-.site-branding-block,
-#name-and-slogan a,
-.site-branding-block a,
+.site-branding__text,
+.site-branding,
+.site-branding__text a,
+.site-branding a,
 .region-secondary-menu .menu-item a {
   color: #fffeff;
 }
diff --git a/core/themes/bartik/css/components/header.css b/core/themes/bartik/css/components/header.css
index 031d0b2..39936bb 100644
--- a/core/themes/bartik/css/components/header.css
+++ b/core/themes/bartik/css/components/header.css
@@ -6,113 +6,39 @@
   position: relative;
 }
 .region-header {
-  float: right; /* LTR */
-  margin: .5em 5px .75em;
+  padding: 0.357em 15px 0;
 }
-[dir="rtl"] .region-header {
-  float: left;
+.region-header .site-branding {
+  margin-top: 0.429em;
 }
-@media all and (min-width: 461px) and (max-width: 900px) {
-  .region-header {
-    margin: .5em 5px .75em;
+@media all and (min-width: 461px) {
+  .region-header .block {
+    float: right; /* LTR */
+    margin-top: 0.357em;
   }
-}
-@media all and (min-width: 901px) {
-  .region-header {
-    margin: 1em 5px 1.5em;
+  [dir="rtl"] .region-header .block {
+    float: left;
   }
-}
-#logo,
-.site-logo {
-  float: left; /* LTR */
-  padding: 4px 4px 4px 9px; /* LTR */
-}
-[dir="rtl"] #logo,
-[dir="rtl"] .site-logo {
-  padding: 4px 9px 4px 4px;
-}
-@media all and (min-width: 461px) and (max-width: 900px) {
-  #logo,
-  .site-logo {
-    padding: 5px 0 0 5px; /* LTR */
-  }
-  [dir="rtl"] #logo,
-  [dir="rtl"] .site-logo {
-    padding: 5px 5px 0 0;
-  }
-}
-@media all and (min-width: 901px) {
-  #logo,
-  .site-logo {
-    padding: 9px 4px 4px 9px; /* LTR */
-  }
-  [dir="rtl"] #logo,
-  [dir="rtl"] .site-logo {
-    padding: 9px 9px 4px 4px;
-  }
-}
-#name-and-slogan,
-.site-branding-text {
-  float: left; /* LTR */
-  margin: 0;
-  padding: 5px 10px 8px;
-}
-[dir="rtl"] #name-and-slogan,
-[dir="rtl"] .site-branding-text {
-  margin: 0 15px 30px 0;
-}
-@media all and (min-width: 461px) and (max-width: 900px) {
-  #name-and-slogan,
-  .site-branding-text {
-    padding: 10px 10px 8px;
-  }
-}
-@media all and (min-width: 901px) {
-  #name-and-slogan,
-  .site-branding-text {
-    padding: 26px 0 0;
-    margin: 0 0 30px 15px; /* LTR */
+  .region-header .site-branding {
+    float: left; /* LTR */
+   /* margin-bottom: 1.857em;*/
   }
-  [dir="rtl"] #name-and-slogan,
-  [dir="rtl"] .site-branding-text {
-    margin: 0 15px 30px 0;
+  [dir="rtl"] .region-header .site-branding {
+    float: right;
   }
 }
-#site-name,
-.site-name {
-  font-size: 1.6em;
-  color: #686868;
-  line-height: 1;
+
+/* Region header blocks. */
+.region-header .block:not(.site-branding) {
+  font-size: 0.857em;
+  margin: 0 0 1em;
+  clear: right;
 }
 @media all and (min-width: 901px) {
-  #site-name,
-  .site-name {
-    font-size: 1.821em;
+  .region-header .block:not(.site-branding) {
+    margin: 1.167em 0 1em;
   }
 }
-h1#site-name,
-h1.site-name {
-  margin: 0;
-}
-#site-name a,
-.site-name a {
-  font-weight: normal;
-}
-#site-slogan,
-.site-slogan {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 0.929em;
-  margin-top: 7px;
-  word-spacing: 0.1em;
-  font-style: italic;
-}
-/* Region header blocks. */
-.region-header .block {
-  font-size: 0.857em;
-  float: left; /* LTR */
-  margin: 0 10px;
-  padding: 0;
-}
 .region-header .block > h2 {
   /* @extend .visually-hidden */
   position: absolute !important;
@@ -133,6 +59,9 @@ h1.site-name {
   list-style-image: none;
   padding: 0;
 }
+.region-header .branding {
+  font-size: 1em;
+}
 .region-header .form-text {
   background: #fefefe;
   background: rgba(255, 255, 255, 0.7);
@@ -146,8 +75,8 @@ h1.site-name {
   margin-right: 0;
 }
 .region-header .form-text:hover,
-.region-header .form-text:active,
-.region-header .form-text:focus {
+.region-header .form-text:focus,
+.region-header .form-text:active {
   background: #fff;
   background: rgba(255, 255, 255, 0.8);
 }
@@ -170,15 +99,15 @@ h1.site-name {
   padding: 3px 7px;
 }
 .region-header .block-menu li a:hover,
-.region-header .block-menu li a:active,
-.region-header .block-menu li a:focus {
+.region-header .block-menu li a:focus,
+.region-header .block-menu li a:active {
   text-decoration: none;
   background: rgba(255, 255, 255, 0.15);
 }
 .region-header .block-menu li:last-child a {
   border-bottom: 0;
 }
-/* User Login block in the header region */
+/* User Login block in the header region. */
 .region-header #block-user-login {
   width: auto;
 }
@@ -236,14 +165,21 @@ h1.site-name {
   background: #fff;
   background: rgba(255, 255, 255, 0.9);
 }
-/* Search block in region header. */
+/* Search block in header region. */
 .region-header #block-search-form {
   width: 208px;
 }
 .region-header #block-search-form .form-text {
   width: 154px;
 }
-/* Language switcher block in region header. */
+.region-header .search-block-form {
+  float: right; /* LTR */
+}
+[dir="rtl"] .region-header .search-block-form {
+  float: left;
+}
+
+/* Language switcher block in header region. */
 .region-header .block-locale ul li {
   display: inline;
   padding: 0 0.5em;
@@ -252,11 +188,9 @@ h1.site-name {
   border-bottom: none;
 }
 
-[dir="rtl"] #logo,
+[dir="rtl"] .branding,
 [dir="rtl"] .site-logo,
-[dir="rtl"] #name-and-slogan,
 [dir="rtl"] .site-branding-text,
-[dir="rtl"] .region-header .block,
 [dir="rtl"] .region-header #block-user-login .form-item,
 [dir="rtl"] .region-header #block-user-login .item-list li {
   float: right;
diff --git a/core/themes/bartik/css/components/site-branding.css b/core/themes/bartik/css/components/site-branding.css
new file mode 100644
index 0000000..faf8f7b
--- /dev/null
+++ b/core/themes/bartik/css/components/site-branding.css
@@ -0,0 +1,45 @@
+/**
+ * @file
+ * Visual styles for the Site Branding block in Bartik.
+ */
+
+.site-branding__logo {
+  display: inline-block;
+  margin-right: 1em; /* LTR */
+  margin-bottom: 0.286em;
+}
+[dir="rtl"] .site-branding__logo {
+  margin-right: 0;
+  margin-left: 1em;
+}
+.site-branding__text {
+  display: inline-block;
+  vertical-align: top;
+}
+@media all and (min-width: 461px) {
+  .site-branding__text {
+    margin-bottom: 1.857em;
+  }
+}
+@media all and (min-width: 901px) {
+  .site-branding__text {
+    padding: 1.286em 0 0;
+  }
+}
+.site-branding__name {
+  font-size: 1.6em;
+  color: #686868;
+  line-height: 1;
+}
+@media all and (min-width: 901px) {
+  .site-branding__name {
+    font-size: 1.821em;
+  }
+}
+.site-branding__slogan {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 0.929em;
+  margin-top: 7px;
+  word-spacing: 0.1em;
+  font-style: italic;
+}
diff --git a/core/themes/bartik/css/maintenance-page.css b/core/themes/bartik/css/maintenance-page.css
index fffa02c..dd473d4 100644
--- a/core/themes/bartik/css/maintenance-page.css
+++ b/core/themes/bartik/css/maintenance-page.css
@@ -35,19 +35,19 @@ body.maintenance-page {
   background-color: #fff;
   background-image: none;
 }
-.maintenance-page #name-and-slogan {
+.maintenance-page .site-branding-text {
   margin-bottom: 50px;
   margin-left: 0; /* LTR */
   padding-top: 20px;
   font-size: 90%;
 }
-[dir="rtl"] .maintenance-page #name-and-slogan {
+[dir="rtl"] .maintenance-page .site-branding-text {
   margin-right: 0;
 }
-.maintenance-page #name-and-slogan,
-.maintenance-page #name-and-slogan a,
-.maintenance-page #name-and-slogan a:hover,
-.maintenance-page #name-and-slogan a:focus {
+.maintenance-page .site-branding-text,
+.maintenance-page .site-branding-text a,
+.maintenance-page .site-branding-text a:hover,
+.maintenance-page .site-branding-text a:focus {
   color: #777;
 }
 .maintenance-page  .page-title {
diff --git a/core/themes/bartik/templates/block--system-branding-block.html.twig b/core/themes/bartik/templates/block--system-branding-block.html.twig
index 4a4b733..9bf4f3d 100644
--- a/core/themes/bartik/templates/block--system-branding-block.html.twig
+++ b/core/themes/bartik/templates/block--system-branding-block.html.twig
@@ -13,21 +13,22 @@
  * - site_slogan: Slogan for site as defined in Site information settings.
  */
 #}
+{% set attributes = attributes.addClass('site-branding') %}
 {% block content %}
   {% if site_logo %}
-    <a href="{{ url('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="site-logo">
+    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="site-branding__logo">
       <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
     </a>
   {% endif %}
   {% if site_name or site_slogan %}
-    <div class="site-branding-text">
+    <div class="site-branding__text">
       {% if site_name %}
-        <strong class="site-name">
-          <a href="{{ url('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-        </strong>
+        <div class="site-branding__name">
+          <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
+        </div>
       {% endif %}
       {% if site_slogan %}
-        <div class="site-slogan">{{ site_slogan }}</div>
+        <div class="site-branding__slogan">{{ site_slogan }}</div>
       {% endif %}
     </div>
   {% endif %}
diff --git a/core/themes/bartik/templates/page.html.twig b/core/themes/bartik/templates/page.html.twig
index 4c27d8f..bd6a779 100644
--- a/core/themes/bartik/templates/page.html.twig
+++ b/core/themes/bartik/templates/page.html.twig
@@ -25,13 +25,7 @@
  *   name has been disabled in the theme settings.
  * - site_slogan: The slogan of the site. This is empty when displaying the site
  *   slogan has been disabled in theme settings.
- * - hide_site_name: A flag indicating if the site name has been toggled off on
- *   the theme settings page. If hidden, the "visually-hidden" class is added
- *   to make the site name visually hidden, but still accessible.
- * - hide_site_slogan: A flag indicating if the site slogan has been toggled off
- *   on the theme settings page. If hidden, the "visually-hidden" class is
- *   added to make the site slogan visually hidden, but still accessible.
- *
+
  * Page content (in order of occurrence in the default page.html.twig):
  * - title_prefix: Additional output populated by modules, intended to be
  *   displayed in front of the main title tag that appears in the template.
@@ -72,34 +66,6 @@
     <header id="header" class="header" role="banner" aria-label="{{ 'Site header'|t}}">
       <div class="section layout-container clearfix">
         {{ page.secondary_menu }}
-        {% if logo %}
-          <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home" id="logo">
-            <img src="{{ logo }}" alt="{{ 'Home'|t }}" />
-          </a>
-        {% endif %}
-        {% if site_name or site_slogan %}
-          <div id="name-and-slogan"{% if hide_site_name and hide_site_slogan %} class="visually-hidden"{% endif %}>
-            {% if site_name %}
-              {% if title %}
-                <div id="site-name"{% if hide_site_name %} class="visually-hidden"{% endif %}>
-                  <strong>
-                    <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home"><span>{{ site_name }}</span></a>
-                  </strong>
-                </div>
-              {# Use h1 when the content title is empty #}
-              {% else %}
-                <h1 id="site-name"{% if hide_site_name %} class="visually-hidden" {% endif %}>
-                  <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home"><span>{{ site_name }}</span></a>
-                </h1>
-              {% endif %}
-            {% endif %}
-            {% if site_slogan %}
-              <div id="site-slogan"{% if hide_site_slogan %} class="visually-hidden"{% endif %}>
-                {{ site_slogan }}
-              </div>
-            {% endif %}
-          </div>
-        {% endif %}
         {{ page.header }}
         {{ page.primary_menu }}
       </div>
diff --git a/core/themes/bartik/templates/region--header.html.twig b/core/themes/bartik/templates/region--header.html.twig
new file mode 100644
index 0000000..e8c6e13
--- /dev/null
+++ b/core/themes/bartik/templates/region--header.html.twig
@@ -0,0 +1,16 @@
+{% extends "region.html.twig" %}
+{#
+/**
+ * @file
+ * Bartik's theme implementation to display a header region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region div.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+{% set attributes = attributes.addClass('clearfix') %}
diff --git a/core/themes/classy/templates/block/block--system-branding-block.html.twig b/core/themes/classy/templates/block/block--system-branding-block.html.twig
index c26ce7a..7c3b7de 100644
--- a/core/themes/classy/templates/block/block--system-branding-block.html.twig
+++ b/core/themes/classy/templates/block/block--system-branding-block.html.twig
@@ -15,13 +15,13 @@
 #}
 {% block content %}
   {% if site_logo %}
-    <a href="{{ url('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="site-logo">
+    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="site-logo">
       <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
     </a>
   {% endif %}
   {% if site_name %}
     <div class="site-name">
-      <a href="{{ url('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
+      <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
     </div>
   {% endif %}
   {% if site_slogan %}
diff --git a/core/themes/classy/templates/layout/page.html.twig b/core/themes/classy/templates/layout/page.html.twig
index 8c81950..4305df0 100644
--- a/core/themes/classy/templates/layout/page.html.twig
+++ b/core/themes/classy/templates/layout/page.html.twig
@@ -56,32 +56,6 @@
 <div class="layout-container">
 
   <header role="banner">
-    {% if logo %}
-      <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">
-        <img src="{{ logo }}" alt="{{ 'Home'|t }}"/>
-      </a>
-    {% endif %}
-
-    {% if site_name or site_slogan %}
-      <div class="name-and-slogan">
-
-        {# Use h1 when the content title is empty #}
-        {% if title %}
-          <strong class="site-name">
-            <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-          </strong>
-        {% else %}
-          <h1 class="site-name">
-            <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-          </h1>
-        {% endif %}
-
-        {% if site_slogan %}
-          <div class="site-slogan">{{ site_slogan }}</div>
-        {% endif %}
-      </div>{# ./name-and-slogan #}
-    {% endif %}
-
     {{ page.header }}
   </header>