Layout: Add design layout focus and preview updaters #4140
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sirbrillig
added
Framework
[Status] In Progress
[Feature] Customizer
sirbrillig
force-pushed
the
add/design-layout-focus
branch
from
1ebfaea to
d76d286
Compare
sirbrillig
force-pushed
the
add/design-layout-focus
branch
4 times, most recently
from
1b2b1b8 to
5290920
Compare
sirbrillig
force-pushed
the
add/design-layout-focus
branch
from
8f20f75 to
37fcb1e
Compare
sirbrillig
force-pushed
the
add/design-layout-focus
branch
2 times, most recently
from
5e7ce01 to
4efe679
Compare
sirbrillig
added
[Status] Needs Review
|
Ping @mtias if you have a moment. |
| } | ||
| )( Layout ); | ||
| function mapStateToProps( state ) { | ||
| const { isLoading, section, hasSidebar, isFullScreen, chunkName } = state.ui; |
There was a problem hiding this comment.
This is introducing changes that we have removed (hasSidebar, chunkName, etc).
There was a problem hiding this comment.
Oops, thanks! Those must have been left over from my old branch. I think I'll just revert this chunk anyway, since I'm not actually using it in this PR.
mtias
added
[Status] Needs Author Reply
and removed
[Status] Needs Review
It will be visible whenever layoutFocus is set to `design`. DesignPreview is a wrapper for WebPreview that allows for customizations to be applied to the DOM of the preview iframe. When the `customizations` prop is set to an object, that object will be passed through a series of functions to update the iframe's contents. Those functions are defined in `client/lib/design-preview`. Each one will be passed two arguments whenever the `customizations` prop is changed: 1. The document object of the iframe. 2. The current value of `customizations`.
Add "back" link to sidebar following sites and editor convention.
sirbrillig
force-pushed
the
add/design-layout-focus
branch
from
4efe679 to
37acfc5
Compare
|
Rebased to move the undocumented endpoint to the next PR (which adds actions) and clean up the |
sirbrillig
force-pushed
the
add/design-layout-focus
branch
from
37acfc5 to
f6efc27
Compare
|
To test, hook the 'customize' button in the my-sites sidebar to activate the new layout:
Then click the button and see if the design preview and design menu become visible. The preview will not load anything because there is no markup being passed. |
sirbrillig
added
[Status] Needs Review
sirbrillig
changed the title
This was referenced Mar 23, 2016
|
Setting to in-progress as some things have changed (current active development is in #4429) |
sirbrillig
added
[Status] In Progress
and removed
[Status] Needs Review
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Relies on #4136 being merged first.
To quote @mtias from #4019 where much of this code originates:
When the
designlayout is active, two panels appear and cover up the rest of the Calypso UI:DesignMenu(as a sidebar) andDesignPreviewas a main area.DesignMenuis currently empty but can contain design tools to update the preview.DesignPreviewis a wrapper forWebPreviewthat allows for customizations to be applied to the DOM of the preview iframe.When the
customizationsprop inDesignPreviewis set to an object, that object will be passed through a series of functions called "updaters" to update the iframe's content. Those functions are defined inclient/lib/design-preview. Each one will be passed two arguments whenever thecustomizationsprop is changed:customizations.The
customizationsobject and thepreviewMarkupused by the preview will be stored in the Redux state tree, but that is in a separate PR (#4153).This PR does not create any design tools by default, only sets the stage for them to be created. Nor does it activate the new layout focus anywhere in Calypso yet (that's in #4156).
Also, the new layout is only available if the config feature flag
design-layoutis enabled, which is only true in development right now.