feat: add legacy warning to block factory (#8234)

Author: maribethb

demos/blockfactory/app_controller.js

@@ -507,7 +507,7 @@ AppController.prototype.assignBlockFactoryClickHandlers = function() {
 
   document.getElementById('helpButton').addEventListener('click',
       function() {
-        open('https://developers.google.com/blockly/custom-blocks/block-factory',
+        open('https://developers.google.com/blockly/guides/create-custom-blocks/legacy-blockly-developer-tools',
              'BlockFactoryHelp');
       });
 

demos/blockfactory/factory.css

@@ -127,6 +127,13 @@ button, .buttonStyle {
   float: right;
 }
 
+#legacyBanner {
+  border: #ccc 1px solid;
+  background-color: #FFCDD2;
+  margin: 4px;
+  padding: 4px;
+}
+
 #blockFactoryContent {
   height: 85%;
   width: 100%;

demos/blockfactory/index.html

@@ -53,6 +53,9 @@ <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;
     <button class="privacyButton" title="Open Google privacy policy"><a class="privacyLink" href="https://policies.google.com/privacy">Privacy</a>
     </button>
   </h1>
+  <div id="legacyBanner">
+    This version of Developer Tools is only compatible with Blockly version 10 and earlier. Try the <a target="_blank" href="https://google.github.io/blockly-samples/examples/developer-tools/index.html">new Block Factory</a> and <a target="_blank" href="https://developers.google.com/blockly/guides/create-custom-blocks/blockly-developer-tools#import_from_legacy_block_factory">learn how to migrate your blocks</a>.
+  </div>
   <div id="tabContainer">
     <div id="blockFactory_tab" class="tab tabon">Block Factory</div>
     <div id="blocklibraryExporter_tab" class="tab taboff">Block Exporter</div>