內容簡介
這是一個功能外掛，旨在實現 #28536：為 Customizer 預覽中的導航添加瀏覽器歷史記錄和深度鏈接。此外掛將瀏覽器 URL 更新為當前預覽的 URL，作為 url 查詢參數和當前展開的面板/部分/控制作為 autofocus 參數。這樣可以收藏書籤，還能重新加載和回到相同的視圖（對開發者來說非常有用），包括預覽的設備（桌面、平板電腦或手機）。不僅 URL 與當前的自定義器用戶界面同步，還會在預覽中瀏覽網站時添加新的瀏覽器歷史記錄項目（通過 history.pushState()），允許您在使用自定義器之外瀏覽時正常使用返回/前進按鈕。每個預覽的 URL 的滾動位置也被跟蹤，因此當您返回/前進時，滾動位置將被恢復，就像在自定義器預覽之外瀏覽站點時一樣。當重新加載自定義器時，還會恢復滾動位置，因為位置在 scroll 查詢參數中得到保存：這對開發者來說非常有用。
此外掛與 Customize Snapshots 外掛很搭配，允許您在帶有關聯 UUID 的快照/更改集中保存自定義器狀態，並將其添加到自定義器中的瀏覽器 URL 中。
例如，如果您載入自定義器，然後點擊“站點標識”部分，URL 將被替換為添加 autofocus[section]=title_tagline。
如果您進入導航菜單面板，打開一個菜單部分，然後展開導航菜單項目控件，則 URL 將添加這些 autofocus 參數：
autofocus[panel]=nav_menus&autofocus[section]=nav_menu[87]&autofocus[control]=nav_menu_item[5123]
而且，當在瀏覽器預覽中導航到另一個頁面時，url 參數也會被替換以反映新的預覽 URL。
請注意，url 參數將進行 URL 編碼。因此，典型的自定義器 URL 將被更新為：
http://example.com/wp-admin/customize.php?url=http%3A%2F%2Fexample.com%2Fsample-page%2F&autofocus[panel]=widgets&autofocus[section]=sidebar-widgets-sidebar-1&autofocus[control]=widget_text[10]&device=mobile&scroll=200
此外掛還會將來自前端的滾動位置保存到自定義器預覽框架中，以便在前端管理欄中單擊“自定義”鏈接後能快速開始編輯當前正在查看的內容，使自定義器從前端更無縫地加載。
此外，當您在自定義器預覽中導航時，自定義器控制面板中的關閉鏈接也會不斷更新，以指向您正在預覽的相同 URL，同時保持滾動位置。以這種方式，每當您通過此鏈接關閉自定義器時，用戶體驗就像是自定義器側欄被刪除一樣，就像他們點擊側欄底部的“隱藏控制”鏈接一樣。如果用戶是從管理員點擊 Customize，則行為不會啟用，Close 鏈接將保持鏈接到他們來自的管理員頁面。請注意，對於 Twenty Seventeen 等響應式主題，前端和後端之間同步的滾動位置不總是看起來很無縫，這是正常現象。
外掛標籤
開發者團隊
原文外掛簡介
This is a feature plugin intended to implement #28536: Add browser history and deep linking for navigation in Customizer preview
This plugin keeps the Customizer URL in the browser updated with current previewed URL as the url query param and current expanded panel/section/control as autofocus params. This allows for bookmarking and also the ability to reload and return go the same view (which is great for developers), including which device you are previewing (desktop, tablet, or mobile). Not only will the URL be kept in sync with the current customizer UI, but new browser history entries will be added as you navigate around the site in the preview (via history.pushState()), allowing you to use the back/forward buttons as you would normally when browsing the site outside the customizer. The scroll position for each previewed URL is tracked as well, so that when you navigate back/forward the scroll position will be restored, just as happens when browsing the site outside the customizer preview. Restoring the scroll position also works when reloading the customizer, as the position is persisted in a scroll query parameter: again, this is extremely useful during development.
This plugin complements well the Customize Snapshots plugin which allows you to save your Customizer state in a shapshot/changeset with an associated UUID that also gets added to the browser URL in the Customizer.
For example, if you load the Customizer and then click the “Site Identity” section, the URL will be replaced to add autofocus[section]=title_tagline.
If you navigate into the nav menus panel, open a menu section, and then expand a nav menu item control, then the URL will have these autofocus params added:
autofocus[panel]=nav_menus&autofocus[section]=nav_menu[87]&autofocus[control]=nav_menu_item[5123]
And while these changes to the autofocus params are being made in the browser’s URL as the Customizer UI is interacted with, if you navigate to another page in the preview the url parameter will also be replaced to reflect the new preview URL.
Note that the url param will be URL-encoded. So a typical Customizer URL would get updated to look like:
http://example.com/wp-admin/customize.php?url=http%3A%2F%2Fexample.com%2Fsample-page%2F&autofocus[panel]=widgets&autofocus[section]=sidebar-widgets-sidebar-1&autofocus[control]=widget_text[10]&device=mobile&scroll=200
The plugin will also persist the scroll position from the frontend to preview frame in the Customizer after clicking the “Customize” link in the frontend admin bar. This ensures you can quickly start editing whatever you were looking at the moment you clicked Customize, and it makes the Customizer load from the frontend in a more seamless way.
Additionally, as you navigate around the Customizer preview, the close link in the Customizer controls pane will keep updating to point to the same URL that you are previewing, along with persisting the scroll position. In this way, whenever you close the Customizer via this link the user experience is that the Customizer sidebar is just removed, similar to as if they clicked the “Hide Controls” link at the bottom of the sidebar. This behavior is only active if the user had clicked the Customize link from the frontend. If they clicked Customize from the admin, then the Close link will remain linking back to the admin page they came from. Note that for responsive themes like Twenty Seventeen, the synced scroll position between the frontend and backend won’t always appear seamless since the Customizer controls panel being expanded causes the element dimensions in the preview to change.
Development of this plugin is done on GitHub. Pull requests welcome. Please see issues reported there before going to the plugin forum.
