-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
16 changed files
with
394 additions
and
5 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { useSelect } from '@wordpress/data'; | ||
import { useMemo, useState } from '@wordpress/element'; | ||
import { uploadMedia } from '@wordpress/media-utils'; | ||
import { | ||
BlockEditorProvider, | ||
BlockEditorKeyboardShortcuts, | ||
BlockInspector, | ||
WritingFlow, | ||
ObserveTyping, | ||
BlockList, | ||
ButtonBlockerAppender, | ||
} from '@wordpress/block-editor'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import Sidebar from '../sidebar'; | ||
|
||
export default function BlockEditor( { settings: _settings } ) { | ||
const canUserCreateMedia = useSelect( ( select ) => { | ||
const _canUserCreateMedia = select( 'core' ).canUser( 'create', 'media' ); | ||
return _canUserCreateMedia || _canUserCreateMedia !== false; | ||
}, [] ); | ||
const settings = useMemo( () => { | ||
if ( ! canUserCreateMedia ) { | ||
return _settings; | ||
} | ||
return { | ||
..._settings, | ||
mediaUpload( { onError, ...rest } ) { | ||
uploadMedia( { | ||
wpAllowedMimeTypes: _settings.allowedMimeTypes, | ||
onError: ( { message } ) => onError( message ), | ||
...rest, | ||
} ); | ||
}, | ||
}; | ||
}, [ canUserCreateMedia, _settings ] ); | ||
const [ blocks, setBlocks ] = useState( [] ); | ||
return ( | ||
<BlockEditorProvider | ||
settings={ settings } | ||
value={ blocks } | ||
onInput={ setBlocks } | ||
onChange={ setBlocks } | ||
> | ||
<BlockEditorKeyboardShortcuts /> | ||
<Sidebar.InspectorFill> | ||
<BlockInspector /> | ||
</Sidebar.InspectorFill> | ||
<div className="editor-styles-wrapper"> | ||
<WritingFlow> | ||
<ObserveTyping> | ||
<BlockList | ||
className="edit-site-block-editor__block-list" | ||
renderAppender={ ButtonBlockerAppender } | ||
/> | ||
</ObserveTyping> | ||
</WritingFlow> | ||
</div> | ||
</BlockEditorProvider> | ||
); | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
.editor-styles-wrapper { | ||
-webkit-overflow-scrolling: touch; | ||
background: $white; | ||
height: calc(100% - #{$header-height}); | ||
left: 0; | ||
overflow: auto; | ||
position: absolute; | ||
top: $header-height; | ||
width: 100%; | ||
|
||
@include break-small { | ||
width: calc(100% - #{$sidebar-width}); | ||
} | ||
} | ||
|
||
.edit-site-block-editor__block-list { | ||
padding-bottom: $grid-size-xlarge; | ||
padding-top: $grid-size-xlarge + 5; | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { | ||
SlotFillProvider, | ||
DropZoneProvider, | ||
Popover, | ||
navigateRegions, | ||
} from '@wordpress/components'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import Notices from '../notices'; | ||
import Header from '../header'; | ||
import Sidebar from '../sidebar'; | ||
import BlockEditor from '../block-editor'; | ||
|
||
function Editor( { settings } ) { | ||
return ( | ||
<SlotFillProvider> | ||
<DropZoneProvider> | ||
<Notices /> | ||
<Header /> | ||
<Sidebar /> | ||
<BlockEditor settings={ settings } /> | ||
<Popover.Slot /> | ||
</DropZoneProvider> | ||
</SlotFillProvider> | ||
); | ||
} | ||
|
||
export default navigateRegions( Editor ); |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { __ } from '@wordpress/i18n'; | ||
|
||
export default function Header() { | ||
return ( | ||
<div | ||
className="edit-site-header" | ||
role="region" | ||
aria-label={ __( 'Site editor top bar.' ) } | ||
tabIndex="-1" | ||
> | ||
<h1 className="edit-site-header__title"> | ||
{ __( 'Site Editor' ) } { __( '(beta)' ) } | ||
</h1> | ||
</div> | ||
); | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
.edit-site-header { | ||
align-items: center; | ||
background: $white; | ||
border-bottom: 1px solid $light-gray-500; | ||
display: flex; | ||
height: $header-height; | ||
justify-content: space-between; | ||
left: 0; | ||
// Stick the toolbar to the top, because the admin bar is not fixed on mobile. | ||
position: sticky; | ||
right: 0; | ||
top: 0; | ||
z-index: z-index(".edit-site-header"); | ||
|
||
// On mobile, the main content area has to scroll, | ||
// otherwise you can invoke the over-scroll bounce on the non-scrolling container. | ||
@include break-small { | ||
padding: $grid-size; | ||
position: fixed; | ||
top: $admin-bar-height-big; | ||
} | ||
|
||
@include break-medium() { | ||
top: $admin-bar-height; | ||
} | ||
} | ||
|
||
@include editor-left(".edit-site-header"); | ||
|
||
.edit-site-header__title { | ||
font-size: 16px; | ||
padding: 0 20px; | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { useSelect, useDispatch } from '@wordpress/data'; | ||
import { SnackbarList } from '@wordpress/components'; | ||
|
||
export default function Notices() { | ||
const notices = useSelect( | ||
( select ) => | ||
select( 'core/notices' ) | ||
.getNotices() | ||
.filter( ( notice ) => notice.type === 'snackbar' ), | ||
[] | ||
); | ||
const { removeNotice } = useDispatch( 'core/notices' ); | ||
return ( | ||
<SnackbarList | ||
className="edit-site-notices" | ||
notices={ notices } | ||
onRemove={ removeNotice } | ||
/> | ||
); | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
.edit-site-notices { | ||
bottom: 20px; | ||
padding-left: 16px; | ||
padding-right: 16px; | ||
position: fixed; | ||
right: 0; | ||
} | ||
|
||
@include editor-left(".edit-site-notices"); |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { createSlotFill, Panel } from '@wordpress/components'; | ||
import { __ } from '@wordpress/i18n'; | ||
|
||
const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill( | ||
'EditSiteSidebarInspector' | ||
); | ||
|
||
function Sidebar() { | ||
return ( | ||
<div | ||
className="edit-site-sidebar" | ||
role="region" | ||
aria-label={ __( 'Site editor advanced settings.' ) } | ||
tabIndex="-1" | ||
> | ||
<Panel header={ __( 'Inspector' ) }> | ||
<InspectorSlot bubblesVirtually /> | ||
</Panel> | ||
</div> | ||
); | ||
} | ||
|
||
Sidebar.InspectorFill = InspectorFill; | ||
|
||
export default Sidebar; |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
.edit-site-sidebar { | ||
background: $white; | ||
border-left: $border-width solid $light-gray-500; | ||
bottom: 0; | ||
color: $dark-gray-500; | ||
height: 100vh; | ||
overflow: hidden; | ||
position: fixed; | ||
right: 0; | ||
top: 0; | ||
width: $sidebar-width; | ||
z-index: z-index(".edit-site-sidebar"); | ||
|
||
@include break-small() { | ||
-webkit-overflow-scrolling: touch; | ||
height: auto; | ||
overflow: auto; | ||
top: $admin-bar-height-big + $header-height; | ||
z-index: z-index(".edit-site-sidebar {greater than small}"); | ||
} | ||
|
||
@include break-medium() { | ||
top: $admin-bar-height + $header-height; | ||
} | ||
|
||
// Temporarily disable the sidebar on mobile. | ||
display: none; | ||
@include break-small() { | ||
display: block; | ||
} | ||
|
||
> .components-panel { | ||
border-left: 0; | ||
border-right: 0; | ||
margin-bottom: -1px; | ||
margin-top: -1px; | ||
|
||
> .components-panel__header { | ||
background: $light-gray-200; | ||
} | ||
} | ||
|
||
.block-editor-block-inspector__card { | ||
margin: 0; | ||
} | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { addFilter } from '@wordpress/hooks'; | ||
import { MediaUpload } from '@wordpress/media-utils'; | ||
|
||
addFilter( | ||
'editor.MediaUpload', | ||
'core/edit-site/components/media-upload', | ||
() => MediaUpload | ||
); |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
/** | ||
* Internal dependencies | ||
*/ | ||
import './components'; |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,29 @@ | ||
export function initialize() {} | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import '@wordpress/notices'; | ||
import { | ||
registerCoreBlocks, | ||
__experimentalRegisterExperimentalCoreBlocks, | ||
} from '@wordpress/block-library'; | ||
import { render } from '@wordpress/element'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import './hooks'; | ||
import Editor from './components/editor'; | ||
|
||
/** | ||
* Initializes the site editor screen. | ||
* | ||
* @param {string} id ID of the root element to render the screen in. | ||
* @param {Object} settings Editor settings. | ||
*/ | ||
export function initialize( id, settings ) { | ||
registerCoreBlocks(); | ||
if ( process.env.GUTENBERG_PHASE === 2 ) { | ||
__experimentalRegisterExperimentalCoreBlocks( settings ); | ||
} | ||
render( <Editor settings={ settings } />, document.getElementById( id ) ); | ||
} |
Oops, something went wrong.