Pattern Assembler: Show the main screen on "build-your-own-layout" step

[arthur791004]

Description

We want to show the main screen on the new step, and it will include the title, description, "choose a header", "add a section", "choose a footer", and "Continue" button.

7l53h5fxAUNjVRBQ82YFwn-fi-238%3A41198

Please ignore the search bar here.

Acceptance Criteria

• It will show "Choose a header", "Add a first section", and "Choose a footer" buttons at the beginning. If you have already selected a section, the "Add a first section" copy will change to "Add another section".
• When you click on the "Choose a header", it will show the pattern selector, and all of the patterns should be related to the header (blockTypes: "core/template-part/header")
• When you click on the "Add a first section" or "Add another section", it will show the pattern selector, and the header/footer-related patterns should be excluded.
• When you click on the "Choose a footer", it will show the pattern selector, and all of the patterns should be related to the footer (blockTypes: "core/template-part/footer")
• The selected pattern is added showing the pattern name in one line. If the pattern name is too long we will truncate it off using ... at the end + show the entire name via tooltip with title.
• When you hover on the selected pattern, you will see the 3 action buttons as screenshot below
  
  • The first one is to re-order the section and it won't be shown on the header/footer pattern. When you click "up", the section will go up. When you click "down", the section will go down
  • The second one is to select another pattern. When you click on it, it will show the pattern selector again.
  • The last one is to remove the selected pattern

Note that we don't limit the number of selected sections.

Dev Tasks

• Create build-your-own-layout base UI #66954

Related

• [Spike/Research] Blank Canvas: Pattern Assembler in onboarding #66589

[miksansegundo]

I have added the following acceptance criteria to consider the long pattern names:

• The selected pattern is added showing the pattern name in one line. If the pattern name is too long we will truncate it off using ... at the end + show the entire name via tooltip with title.

[arthur791004]

Close it via #66954 and we show the whitelisted patterns instead of filtering patterns by blockTypes