From 928c0cc7e6e3d06d4f2d2b5c28364fc42632a7ec Mon Sep 17 00:00:00 2001 From: Amanda Riu Date: Fri, 12 Feb 2021 20:15:37 -0500 Subject: [PATCH 01/34] Add search block to inserter Only adds a shell of a block. --- packages/block-library/src/index.native.js | 1 + .../block-library/src/search/edit.native.js | 28 +++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 packages/block-library/src/search/edit.native.js diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js index 76b24a0e9335e..e06ac500b2f0b 100644 --- a/packages/block-library/src/index.native.js +++ b/packages/block-library/src/index.native.js @@ -226,6 +226,7 @@ export const registerCoreBlocks = () => { file, audio, devOnly( reusableBlock ), + devOnly( search ), ].forEach( registerBlock ); registerBlockVariations( socialLink ); diff --git a/packages/block-library/src/search/edit.native.js b/packages/block-library/src/search/edit.native.js new file mode 100644 index 0000000000000..45f0969ce0787 --- /dev/null +++ b/packages/block-library/src/search/edit.native.js @@ -0,0 +1,28 @@ +/** + * External dependencies + */ +import { View } from 'react-native'; + +/** + * WordPress dependencies + */ +import { RichText } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; + +export default function SearchEdit( { attributes, setAttributes } ) { + const { label, showLabel } = attributes; + + return ( + + { showLabel && ( + setAttributes( { label: html } ) } + /> + ) } + + ); +} From 6267582b34fbaa7bdeb40019304f0b55c4406a95 Mon Sep 17 00:00:00 2001 From: Amanda Riu Date: Fri, 12 Feb 2021 23:25:05 -0500 Subject: [PATCH 02/34] Add label and icon toggle toolbar buttons --- .../block-library/src/search/edit.native.js | 42 ++++++++++++++++++- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/search/edit.native.js b/packages/block-library/src/search/edit.native.js index 45f0969ce0787..cb3fdfe40d214 100644 --- a/packages/block-library/src/search/edit.native.js +++ b/packages/block-library/src/search/edit.native.js @@ -6,14 +6,52 @@ import { View } from 'react-native'; /** * WordPress dependencies */ -import { RichText } from '@wordpress/block-editor'; +import { RichText, BlockControls } from '@wordpress/block-editor'; +import { ToolbarGroup, ToolbarButton } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +/** + * Internal dependencies + */ +import { buttonWithIcon, toggleLabel } from './icons'; + export default function SearchEdit( { attributes, setAttributes } ) { - const { label, showLabel } = attributes; + const { label, showLabel, buttonPosition, buttonUseIcon } = attributes; + + const controls = ( + + + { + setAttributes( { + showLabel: ! showLabel, + } ); + } } + isActive={ showLabel } + /> + + { 'no-button' !== buttonPosition && ( + { + setAttributes( { + buttonUseIcon: ! buttonUseIcon, + } ); + } } + isActive={ buttonUseIcon } + /> + ) } + + + ); return ( + { controls } + { showLabel && ( Date: Sat, 13 Feb 2021 00:16:04 -0500 Subject: [PATCH 03/34] Add button position dropdown menu --- .../search/button-position-dropdown.native.js | 82 +++++++++++++++++++ .../block-library/src/search/edit.native.js | 12 +++ 2 files changed, 94 insertions(+) create mode 100644 packages/block-library/src/search/button-position-dropdown.native.js diff --git a/packages/block-library/src/search/button-position-dropdown.native.js b/packages/block-library/src/search/button-position-dropdown.native.js new file mode 100644 index 0000000000000..b6e4537e29043 --- /dev/null +++ b/packages/block-library/src/search/button-position-dropdown.native.js @@ -0,0 +1,82 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { DropdownMenu } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { buttonOutside, buttonInside, noButton } from './icons'; + +const BUTTON_OPTIONS = [ + 'button-inside', + 'button-outside', + 'no-button', + 'button-only', +]; + +/** + * Creates a custom dropdown menu for the button position options. + * + * @param {Object} Component Component properties. + * @param {string} Component.selectedOption The selected option. + * @param {Function} Component.onChange Function to handle a change + * in the selected option. + * + * @return {DropdownMenu} Dropdown menu for use inside {ToolbarGroup} + */ +export default function ButtonPositionDropdown( { selectedOption, onChange } ) { + const getButtonIcon = ( option ) => { + switch ( option ) { + case 'button-inside': + return buttonInside; + case 'button-outside': + return buttonOutside; + case 'no-button': + return noButton; + } + }; + + const getButtonTitle = ( option ) => { + switch ( option ) { + case 'button-inside': + return __( 'Button Inside' ); + case 'button-outside': + return __( 'Button Outside' ); + case 'no-button': + return __( 'No Button' ); + } + }; + + const createOptionControl = ( + targetOption, + activeOption, + title, + onChangeCallback + ) => { + const isActive = targetOption === activeOption; + + return { + icon: getButtonIcon( targetOption ), + title, + isActive, + onClick: () => onChangeCallback( targetOption ), + }; + }; + + return ( + + createOptionControl( + option, + selectedOption, + getButtonTitle( option ), + onChange + ) + ) } + label={ __( 'Change button position' ) } + /> + ); +} diff --git a/packages/block-library/src/search/edit.native.js b/packages/block-library/src/search/edit.native.js index cb3fdfe40d214..88b602f57fd07 100644 --- a/packages/block-library/src/search/edit.native.js +++ b/packages/block-library/src/search/edit.native.js @@ -14,10 +14,17 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { buttonWithIcon, toggleLabel } from './icons'; +import ButtonPositionDropdown from './button-position-dropdown.native'; export default function SearchEdit( { attributes, setAttributes } ) { const { label, showLabel, buttonPosition, buttonUseIcon } = attributes; + const handleBlockPositionChange = ( position ) => { + setAttributes( { + buttonPosition: position, + } ); + }; + const controls = ( @@ -32,6 +39,11 @@ export default function SearchEdit( { attributes, setAttributes } ) { isActive={ showLabel } /> + + { 'no-button' !== buttonPosition && ( Date: Sat, 13 Feb 2021 00:34:48 -0500 Subject: [PATCH 04/34] Add temporary alert to make toolbar testing easier This alert will be removed once styling is added in a later PR. --- .../block-library/src/search/edit.native.js | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/search/edit.native.js b/packages/block-library/src/search/edit.native.js index 88b602f57fd07..3ea7844278a4e 100644 --- a/packages/block-library/src/search/edit.native.js +++ b/packages/block-library/src/search/edit.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { View } from 'react-native'; +import { View, Alert } from 'react-native'; /** * WordPress dependencies @@ -19,10 +19,10 @@ import ButtonPositionDropdown from './button-position-dropdown.native'; export default function SearchEdit( { attributes, setAttributes } ) { const { label, showLabel, buttonPosition, buttonUseIcon } = attributes; - const handleBlockPositionChange = ( position ) => { - setAttributes( { - buttonPosition: position, - } ); + // Temporary. Will be removed when styling is implemented + // in a future PR. + const alert = ( message ) => { + Alert.alert( '', message, [ { text: 'OK' } ], { cancelable: true } ); }; const controls = ( @@ -41,7 +41,15 @@ export default function SearchEdit( { attributes, setAttributes } ) { { + setAttributes( { + buttonPosition: position, + } ); + + // Temporary. Will be removed when styling is implemented + // in a future PR. + alert( `Button position: ${ position }` ); + } } /> { 'no-button' !== buttonPosition && ( @@ -52,6 +60,10 @@ export default function SearchEdit( { attributes, setAttributes } ) { setAttributes( { buttonUseIcon: ! buttonUseIcon, } ); + + // Temporary. Will be removed when styling is implemented + // in a future PR. + alert( `Icon only button: ${ ! buttonUseIcon }` ); } } isActive={ buttonUseIcon } /> From 5e71172715f4604f914e156a1872681ce15c772e Mon Sep 17 00:00:00 2001 From: Amanda Riu Date: Mon, 15 Feb 2021 20:02:09 -0500 Subject: [PATCH 05/34] Add initial UI and basic styling --- .../block-library/src/search/edit.native.js | 65 ++++++++++++++++++- .../src/search/style.native.scss | 14 ++++ 2 files changed, 76 insertions(+), 3 deletions(-) create mode 100644 packages/block-library/src/search/style.native.scss diff --git a/packages/block-library/src/search/edit.native.js b/packages/block-library/src/search/edit.native.js index 3ea7844278a4e..6afd7b3f3265a 100644 --- a/packages/block-library/src/search/edit.native.js +++ b/packages/block-library/src/search/edit.native.js @@ -1,23 +1,32 @@ /** * External dependencies */ -import { View, Alert } from 'react-native'; +import { View, Alert, TextInput } from 'react-native'; /** * WordPress dependencies */ import { RichText, BlockControls } from '@wordpress/block-editor'; -import { ToolbarGroup, ToolbarButton } from '@wordpress/components'; +import { ToolbarGroup, ToolbarButton, Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import { search } from '@wordpress/icons'; /** * Internal dependencies */ import { buttonWithIcon, toggleLabel } from './icons'; import ButtonPositionDropdown from './button-position-dropdown.native'; +import styles from './style.scss'; export default function SearchEdit( { attributes, setAttributes } ) { - const { label, showLabel, buttonPosition, buttonUseIcon } = attributes; + const { + label, + showLabel, + buttonPosition, + buttonUseIcon, + placeholder, + buttonText, + } = attributes; // Temporary. Will be removed when styling is implemented // in a future PR. @@ -72,6 +81,45 @@ export default function SearchEdit( { attributes, setAttributes } ) { ); + const renderTextField = () => { + return ( + + setAttributes( { placeholder: newVal } ) + } + /> + ); + }; + + const renderButton = () => { + return ( + + { buttonUseIcon && ( + +