Add effects and filters screens to the block screen

packages/edit-site/src/components/global-styles/screen-block.js

@@ -19,11 +19,15 @@ const {
 	useGlobalSetting,
 	useSettingsForBlockElement,
 	useHasColorPanel,
+	useHasEffectsPanel,
+	useHasFiltersPanel,
 	useGlobalStyle,
 	BorderPanel: StylesBorderPanel,
 	ColorPanel: StylesColorPanel,
 	TypographyPanel: StylesTypographyPanel,
 	DimensionsPanel: StylesDimensionsPanel,
+	EffectsPanel: StylesEffectsPanel,
+	FiltersPanel: StylesFiltersPanel,
 } = unlock( blockEditorPrivateApis );
 
 function ScreenBlock( { name, variation } ) {
@@ -46,6 +50,8 @@ function ScreenBlock( { name, variation } ) {
 	const hasColorPanel = useHasColorPanel( settings );
 	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
+	const hasEffectsPanel = useHasEffectsPanel( settings );
+	const hasFiltersPanel = useHasFiltersPanel( settings );
 
 	// These intermediary objects are needed because the "layout" property is stored
 	// in settings rather than styles.
@@ -111,6 +117,24 @@ function ScreenBlock( { name, variation } ) {
 					includeLayoutControls
 				/>
 			) }
+			{ hasEffectsPanel && (
+				<StylesEffectsPanel
+					inheritedValue={ inheritedStyleWithLayout }
+					value={ styleWithLayout }
+					onChange={ onChangeDimensions }
+					settings={ settings }
+					includeLayoutControls
+				/>
+			) }
+			{ hasFiltersPanel && (
+				<StylesFiltersPanel
+					inheritedValue={ inheritedStyleWithLayout }
+					value={ styleWithLayout }
+					onChange={ onChangeDimensions }
+					settings={ settings }
+					includeLayoutControls
+				/>
+			) }
 		</>
 	);
 }

packages/edit-site/src/components/global-styles/ui.js

@@ -31,7 +31,6 @@ import {
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
-import ScreenFilters from './screen-filters';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenLayout from './screen-layout';
@@ -40,7 +39,6 @@ import { ScreenVariation } from './screen-variations';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
 import { unlock } from '../../private-apis';
-import ScreenEffects from './screen-effects';
 
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
 const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
@@ -215,14 +213,6 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenColorPalette name={ name } />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/filters' }>
-				<ScreenFilters name={ name } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen path={ parentMenu + '/effects' }>
-				<ScreenEffects name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
 			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
 				<ScreenLayout name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>