-
Notifications
You must be signed in to change notification settings - Fork 879
/
SearchAppearanceModal.js
40 lines (35 loc) · 1.35 KB
/
SearchAppearanceModal.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* External dependencies */
import { SearchIcon } from "@heroicons/react/solid";
import { useSelect } from "@wordpress/data";
import { __ } from "@wordpress/i18n";
import { useSvgAria } from "@yoast/ui-library/src";
import styled from "styled-components";
/* Internal dependencies */
import EditorModal from "../../../containers/EditorModal";
import BlockEditorSnippetEditor from "../../../containers/SnippetEditor";
import ElementorSnippetEditor from "../../../elementor/containers/SnippetEditor";
const StyledHeroIcon = styled( SearchIcon )`
width: 18px;
height: 18px;
margin: 3px;
`;
/**
* The Search Appearance Modal.
*
* @returns {JSX.Element} The Search Appearance Modal.
*/
const SearchAppearanceModal = () => {
const svgAriaProps = useSvgAria();
const isElementorEditor = useSelect( select => select( "yoast-seo/editor" ).getIsElementorEditor(), [] );
return (
<EditorModal
title={ __( "Search appearance", "wordpress-seo" ) }
id="yoast-search-appearance-modal"
SuffixHeroIcon={ <StyledHeroIcon className="yst-text-slate-500" { ...svgAriaProps } /> }
>
{ isElementorEditor === true && <ElementorSnippetEditor showCloseButton={ false } hasPaperStyle={ false } /> }
{ isElementorEditor === false && <BlockEditorSnippetEditor showCloseButton={ false } hasPaperStyle={ false } /> }
</EditorModal>
);
};
export default SearchAppearanceModal;